h5 audio 多媒体在实际中的用法

h5 audio 多媒体在实际中的用法

介绍audio标签

1. audio是html里新定义的多媒体流，它可以把音频呈现出来 常用于多媒体，支持度方面除了老掉牙的IE老版本外，新版浏览器都能使用(兼容性不同)。

主流浏览器兼容性

格式	Chrome	Firefox	IE9	Opera	Safari
OGG	支持	支持	支持	支持	不支持
mp3	支持	不支持	支持	不支持	支持
WAV	不支持	支持	不支持	支持	不支持

综上 然而手机端还有一些问题 这个等会再说

2. 标签内属性

一般用到就不谈了 主要是

preload这个属性就是音乐预加载

ontrols这个是 是否显示默认控件

autoplay是就绪后自动播放，若设置这个则忽略preload属性

3. 对象内常用事件以及属性方法

html标签内的属性js对象里都有

常用的:

1. currentSrc返回当前音频的src
2. currentTime设置当前播放时间按秒这个变化是会触发canplay事件
3. duration长度
4. src设置src
5. readyState 状态 一般 0是无 4是完全就绪 类似与xml对象的哪个属性
其实还有许多但是项目中完全没有用到 所以就不提了

常用方法:

audio.play()播放 
audio.pause()暂停 这里有个坑 下面讲
load()重加载 一般调用play若未加载是会先调用一次 load的

常用事件:

1.加载时触发

canplay:浏览器能够播放 progress:正在加载

2.出错时

error:加载错误

3.状态

play:音频或视频文件已经就绪可以开始播放时触发 playing:音频或视频已开始播放时触发 ended:音频或视频文件播放完毕后触发 pause:音频或视频文件暂停时触发

4.开发常用

play:音频或视频文件已经就绪可以开始播放时触发 ended:音频或视频文件播放完毕后触发 pause:音频或视频文件暂停时触发 abort:在音频或视频终止加载时触发 canplay:浏览器能够开始播放指定的音频或视频

audio具体在手机浏览器内的坑

1. 其src属性在空的时候应该设置为null,而不应该为""减少消耗
2. 其在移动端刚进入播放时是无法调用 play(),各种加载的行为操作都会被浏览器或者系统阻挡，原因就是手机厂商希望，必须是用户知晓情况,并做出交互时才能允许这些加载流量的操作。 刚开始查阅资料 发现有各种操作的，然后又接触了一部分坑哎移动端真是头皮发麻

通过查阅资料发现这个无法通过直接实现，只能通过取巧的方法来，就是让用户去触发交互，在某个交互内调用play()就行了，网上也说了自定义事件，模拟用户交互，然后还是没用。

这里提一下 在用户交互事件触发后 调用play()时必须保证其src属是能够加载的，若不能，则本次失效，故这里就需要在 对应值的改变之后才能够去play(),所以最简单就是setTimeout(0);

一般绑定的是touch事件，但是因此也接触到了另一个坑 touchend，touchstart这些事件如果绑定到 body,html这些 在ios上 若body,html为空的话是不能触发事件的，因为其子元素内没有 可以触摸的元素

3. play的连续调用或者 pause连续调用,这就时同步代码 即

audio.play();
audio.play(); //这里浏览器会报错,因为play必须在同一个事件队列必须在pause之后，同理 pause也是

//解决
audio.play();
setTimeout(()=>{
    audio.play();
})
vue.nextTick(()=>{
    audio.play();
})
promise.then(()=>{
    audio.play();
})

只要将后次的play异步就行，也就是保证每个队列有且仅有一个play操作或者 pause操作