audio标签的自动播放(ios)

Posted 2020-11-20 陈蒙的技术空间

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上的工作方式。那么就是说只有有了用户交互后才能下载，接下来才能播放。

如下图:

参考Overcoming iOS HTML5 audio limitations

图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待更新！！！