audio标签的自动播放(ios)
程序员文章站
2022-06-24 10:19:30
0.应用场景 前端移动端开发,经常有播放音乐的需求。比如我有公司做过类似支付宝的年度账单,功能是用户在查看年度账单的过程中播放轻音乐。 1.audio标签播放mp3 (一)常用属性和API介绍 1.controls属性 有了它,就会显示控制条。 图1 chrome默认audio样式 图2 ie默认a ......
0.应用场景
前端移动端开发,经常有播放音乐的需求。比如我有公司做过类似支付宝的年度账单,功能是用户在查看年度账单的过程中播放轻音乐。
1.audio标签播放mp3
(一)常用属性和API介绍
1.controls属性
有了它,就会显示控制条。
图1 chrome默认audio样式
图2 ie默认audio样式
图3 firefox默认audio样式
图4 ios的微信端(iphone6,系统版本11.4,微信使用内置Safari):
2.autoplay属性
autoplay指的是自动播放,chrome61、ie11 ,ie edge、firefox 60已测试,可自动播放。ios不能自动播放,那么先点一下播放按钮才行。这是什么原因呢,ios为了用户流量着想,限制了audio标签的自动播放,那么safari没有用户的交互就播放会被拦截。
PS:6月29日补充。杯具了:(,我的电脑自动更新到chrome67了,不能自动播放了。参考“Chrome禁止audio自动播放”搜索词。
autoplay的默认值是false。
(二)实现ios自动播放
我们刚才说了,除了ios,其他端都能够使用autoplay属性实现自动播放。那么ios自动播放应该如何来做呢?
首先,我们要知道音频流(audio stream)在ios上的工作方式。那么就是说只有有了用户交互后才能下载,接下来才能播放。
如下图:
参考
图1:Workflow to load audio in mobile Safari
第二,用Js来完成效果,ios的微信端可以监听XXX事件,safari(和ios微信端)监听touchstart事件,然后手动play。
ios微信端:
<script> var audio = document.querySelector('#audio'); audio.play(); //既然是微信的ready事件,只能在微信端使用 document.addEventListener("WeixinJSBridgeReady", function () { audio.play(); }, false); </script>
成功播放!
ios的safari浏览器和微信端:
<audio id="audio" controls src="assets/music.mp3" autoplay> <source src="assets/music.mp3" type="audio/mpeg"> </audio> <script> var audio = document.querySelector('#audio'); //safari和微信 document.addEventListener("touchstart", function () { audio.play(); }, false); </script>
成功播放!
长时间的写博客,有些累了,完整Demo待更新!!!