H5移動端IOS音頻自動播放解決

在移動端，H5的標簽controls="controls" autoplay="autoplay"，不支持此標簽。

需要用JS代碼來實現網頁加載后音頻自動播放功能。

html代碼如下：

<!-- 音頻 -->
<audio controls="controls" autoplay="autoplay" id="mp3Btn" style="display: none;">
  <source src="__IMG__/mp3.mp3" type="audio/mp3" />
</audio>
<!-- 音頻 end-->
<div style="width: 50px;height: 50px; position: absolute; top: 20px;right: 10px;z-index: 100" class="btn-audio rotateClass">
<img src="__IMG__/audio.png" style="    width: 50px;">
</div>

JS代碼如下：

<script type="text/javascript">
    $(document).ready(function(){ 
        //播放完畢
        $('#mp3Btn').on('ended', function() {
            console.log("音頻已播放完成");
            $('.btn-audio').removeClass('rotateClass');
        });
        //播放器控制
        var audio = document.getElementById('mp3Btn');
        audio.volume = .3;
        $('.btn-audio').click(function() {

            event.stopPropagation();//防止冒泡
            if(audio.paused){ //如果當前是暫停狀態
                $('.btn-audio').addClass('rotateClass');
                audio.play(); //播放
                return;
            }else{
                //當前是播放狀態
                $('.btn-audio').removeClass('rotateClass');
                audio.pause(); //暫停''
            }
        });
    });
</script>

在安卓機上測試，此功能能夠正常使用，頁面加載完成后音頻自動播放，並能夠通過手動點擊圖片來控制音頻播放和暫停。

但是ios由於對流量存在限制，IOS還是不支持頁面加載完后自動播放，可以通過調用微信提供的接口，在微信中打開實現音頻的自動播放功能。代碼如下。：

<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>

同時為了隱藏播放器，已經給予控制播放器的偽按鈕圖片更好看的樣式，通過CSS3來控制，讓其在音頻播放時候旋轉，暫停時停止旋轉。

css代碼如下：

.rotateClass{

 -webkit-transform:translate3d(0,0,0);
    -moz-transform:translate3d(0,0,0);
    transform:translate3d(0,0,0);
    /* 設置動畫，animation:動畫名稱 動畫播放時長單位秒或微秒 動畫播放的速度曲線linear為勻速 動畫播放次數infinite為循環播放; */
    -webkit-animation:play 3s linear infinite;
    -moz-animation:play 3s linear infinite;
    animation:play 3s linear infinite;
}
@-webkit-keyframes play{
    0%  {
        /*
        水平翻轉
        */
        /*-webkit-transform:rotateY(0deg);*/
        /*
        垂直翻轉
        -webkit-transform:rotateX(0deg);
        順時針旋轉
        -webkit-transform:rotate(0deg);
        逆時針旋轉
        -webkit-transform:rotate(0deg);
        */
        -webkit-transform:rotateX(0deg);
    }
    100% {
    	-webkit-transform:rotate(360deg);
        /* 水平翻轉 */
        /*-webkit-transform:rotateY(360deg);*/
        /* 垂直翻轉
        -webkit-transform:rotateX(360deg);
        順時針旋轉
        -webkit-transform:rotate(360deg);
        逆時針旋轉
        -webkit-transform:rotate(-360deg);
        */
    }
}
@-moz-keyframes play{
    0%  {
    	-moz-transform:rotate(0deg);
        /*-moz-transform:rotateY(0deg);*/
        /*
        -moz-transform:rotateX(0deg);
        -moz-transform:rotate(0deg);
        -moz-transform:rotate(0deg);
        */
    }
    100% {
    	-moz-transform:rotate(360deg);
        /*-moz-transform:rotateY(360deg);*/
        /*
        -moz-transform:rotateX(360deg);
        -moz-transform:rotate(360deg);
        -moz-transform:rotate(-360deg);
        */
    }
}
@keyframes play{
    0%  {
    	 transform:rotate(0deg);
       /* transform:rotateY(0deg);*/
        /*
        transform:rotateX(0deg);
        transform:rotate(0deg);
        transform:rotate(0deg);
        */
    }
    100% {
    	 transform:rotate(360deg);
       /* transform:rotateY(360deg);*/
        /*
        transform:rotateX(360deg);
        transform:rotate(360deg);
        transform:rotate(-360deg);
        */
    }