【轉】h5頁面audio不自動播放問題

1、audio:html5音頻標簽

<audio loop src="/photo/aa.mp3" id="audio" autoplay preload="auto">該瀏覽器不支持audio屬性</audio>

不支持audio元素的瀏覽器會顯示標簽內文字

src:音頻地址

autoplay:音頻加載完畢后自動播放。

controls:顯示播放控制條。

loop:播放完畢后會重復播放。

preload:1)auto 預加載音頻視頻。2）metadata 只預加載音頻視頻元數據。  有autoplay時此屬性無效。

（h5 推薦使用OGG Vobis格式）

 

2、js控制媒體

play()播放

pause()暫停

load()重新加載

 

需引入微信API接口，用JS控制代碼如下：

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> 
<script type="text/javascript">
    document.addEventListener("WeixinJSBridgeReady", function () { 
        document.getElementById('mp3Btn').play(); 
        // document.getElementById('video').play(); 
    }, false);
</script>

所以采用以下方式解決

//--創建頁面監聽，等待微信端頁面加載完畢 觸發音頻播放
document.addEventListener('DOMContentLoaded', function () {
    function audioAutoPlay() {
        var audio = document.getElementById('audio');
            audio.play();
        document.addEventListener("WeixinJSBridgeReady", function () {
            audio.play();
        }, false);
    }
    audioAutoPlay();
});
//--創建觸摸監聽，當瀏覽器打開頁面時，觸摸屏幕觸發事件，進行音頻播放
document.addEventListener('touchstart', function () {
    function audioAutoPlay() {
        var audio = document.getElementById('audio');
            audio.play();
    }
    audioAutoPlay();
});