audio标签的自动播放(ios)

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指的是自动播放，chrome6一、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待更新！！！