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