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具体在手机浏览器内的坑
- 其src属性在空的时候应该设置为null,而不应该为
""
减少消耗 - 其在移动端刚进入播放时是无法调用 play(),各种加载的行为操作都会被浏览器或者系统阻挡,原因就是手机厂商希望,必须是用户知晓情况,并做出交互时才能允许这些加载流量的操作。 刚开始查阅资料 发现有各种操作的,然后又接触了一部分坑哎移动端真是头皮发麻
通过查阅资料发现这个无法通过直接实现,只能通过取巧的方法来,就是让用户去触发交互,在某个交互内调用play()就行了,网上也说了自定义事件,模拟用户交互,然后还是没用。
这里提一下 在用户交互事件触发后 调用play()时必须保证其src属是能够加载的,若不能,则本次失效,故这里就需要在 对应值的改变之后才能够去play(),所以最简单就是setTimeout(0);
一般绑定的是touch事件,但是因此也接触到了另一个坑 touchend,touchstart这些事件如果绑定到 body,html这些 在ios上 若body,html为空的话是不能触发事件的,因为其子元素内没有 可以触摸的元素
- 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操作