audio微信自動播放以及自定義樣式

audio標簽如下：

<audio id="audioTag" src="" autoplay="autoplay" controls="controls" preload="auto" loop="loop" > 您的瀏覽器不支持 audio 標簽。</audio>

上面寫入了基礎屬性

 

①微信端自動播放

目前加入autoplay屬性之后在大部分的移動端都可以自動播放，但是我遇到的問題是在用蘋果手機在微信上打開卻沒有自動播放解決辦法，調用微信一個借口：

document.addEventListener("WeixinJSBridgeReady", function () {
            audio.play();
        }, false);

　　//移動端自動播放還可以通過mousedown/mouseup/click/touchstart來觸發

②自定義樣式

可以在audio標簽外加一個標簽然后通過點擊來改變樣式（建議是通過添加class來改變樣式）給audio增加hidden='true'使它本身樣式隱藏

var aduio = document.getElementById('audioTag');
controlsPlay.click(function() {
    //改變暫停/播放icon
    if (audio.paused) {//class為播放時候樣式 暫停時候移除
         audio.play();
         $(this).addClass('class')
    } else {
        audio.pause();
        $(this).removeClass('class')
    }
});

 ③正對ios系統auido無法自動播放，目前我的解決辦法是：在進入頁面不會自動播放音樂，而是在進行第一次touchstart時，開始播放audio

 

-------------------------------------------------------------------------------------------------------分界線-------------------------------------------------------------------------------------------------------------------------------------

 

有audio還有video之前也遇到過video沒有辦法自動播放現在看到這個地址（http://www.phptext.net/article_view.php?id=621）發現在ios端有iso自身的屬性功能沒有開啟

雖然沒有測試過紀錄下：

（在視頻標簽加入 webkit-playsinline  x5-playsinline  playsinline就可以解決播放彈出窗口問題包含自動播放。）

<video id="player" width="480" height="320" webkit-playsinline>

也有js代碼：

  if ("wView" in window) {

    window.wView.allowsInlineMediaPlayback = "YES";

    window.wView.mediaPlaybackRequiresUserAction = "NO";

  }

 

后續遇到問題在繼續更新。。。。。。