html5音頻audio對象處理以及ios微信端自動播放和息屏后喚醒的判斷---可供參考(功能都完整實現了,只是細節還沒處理的很好)

//  html模版中的 此處結合了weui樣式整合的微信手機端片段代碼（不可直接粘貼復制進行使用）里面含有一些php的寫法，可直接略過。。###重點參考js代碼###
<div>
    <div class="weui-cells weui-cells_form">
        <div class="weui-cell weui-cell_switch">
            <div class="weui-cell__bd">語音播報</div>
            <div class="weui-cell__ft">
                <input class="weui-switch" type="checkbox" id="set_voice" @if($voice) checked="checked" @endif/>
            </div>
        </div>
    </div>
    {{--語音播放標簽--}}
    <div>
        {{--http://storetest.beikelin.com/wechat/order/0.mp3  // 開場白必須保證0.mp3為有效語音 防止后面調用音頻對象播放時 $audio.play() 報錯--$audio對象請參考下面的js代碼}}
        <audio src="/wechat/order/0.mp3" id="audio"></audio>
    </div>
</div>

{{--引入微信內置jsapi 方便在ios 微信端處理 音頻自動播放的問題-此項必不可少的--}}
 <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
    <script type="text/javascript">
        document.addEventListener('visibilitychange', function() {
            // 監聽網頁是否進行喚起活動頁面的操作 釋義：用戶進行息屏和滅屏或者切換到了其他應用后重新回到了當前頁面
            if(!document.hidden)  // 如果用戶重新回到了當前頁面，馬上執行刷新當前網頁
            {
                window.location.reload(); // 刷新
            }
        });

        var $request_init; // 接收setTimeout() 返回的 ID 值
        var $audio = document.getElementById("audio"); // 音頻播放對象標簽
        var $order_id = 0; // 初始化訂單id
        $.ajaxSettings.async = false; // 禁止異步請求必須為同步請求,防止ios微信端不能進行自動播放和修改某些js全局變量不生效的問題

        var initOrderId = function () {  // 自己封裝的請求訂單id的方法，在這里的演示意義並不大，你可以忽悠不看
            $.ajax({
                url: "{{url('/wechat/order/voice')}}",
                async: false,
                data: {},
                type: "GET", //請求方式
                success: function($data) {
                    $order_id = $data.order_id; // 更改全局變量
                },
                error: function() {  // 如果當前網頁請求出現了問題也繼續請求，如：斷網等。。。
                    initOrderId();
                }
            });
        }
        var playVoice = function(){
            $.ajax({
                url: "{{url('/wechat/order/voice')}}",
                async: false,
                data: {order_id: $order_id},
                type: "GET", //請求方式
                success: function($data) {
                    if ($data != '' && $data != undefined && $data.voice) {  // 判斷是否有對象和語音 如果有語音的情況處理
                        $order_id = $data.order_id;
                        $audio.src = $data.voice; // 更改播放源
                        $audio.play(); // 播放
                        $audio.onended = function () { // 監聽當前語音播放完畢，才進行下一步操作
                            if ($set_voice.checked){ // 如果上面的checkbox對象 被選中的情況下才執行
                                $request_init = setTimeout("playVoice()", 2000);
                            }
                        }
                    } else { // $data為空則繼續每2秒請求一次
                        $request_init = setTimeout("playVoice()", 2000);
                    }
                },
                error: function() { // 出現錯誤的情況下也要繼續執行請求 ，如：斷網等情況。。。
                    $request_init = setTimeout("playVoice()", 2000);
                }
            });
        }

        // 獲取語音的開關checkbox對象
        var $set_voice = document.getElementById('set_voice');
        // 加載頁面開始初始化判斷
        if ($set_voice.checked) {
            // 使用微信內置的js 對象實現ios 微信端中啟動音頻自動播放
            document.addEventListener("WeixinJSBridgeReady", function () {
                $audio.play();
            }, false);

            initOrderId(); // 請求id，可忽悠不看
            playVoice(); // 必用的要請求的函數
        }

        // 開關改變事件 ---用戶是否開啟或關閉語音的行為進行保存
        $set_voice.onchange = function () {
            var $this=this; // 先接收好this對象，方便下面調用
            if ($this.checked) {     // 判斷是否選中(表示開啟語音)
                $this.checked=false; // 在回調未成功之前不能改變按鈕的狀態  --這里可以自行判斷優化處理
                // 再次取最新的訂單號
                $.get("{{url('/wechat/voice/edit')}}", {type: "{{$type}}", status: 1},function (data) {
                    if(data==1){ // 后台返回1表示成功，0表示失敗，這里只做1的判斷
                        $this.checked=true; // 在回調成功之后改變按鈕的狀態
                        initOrderId();
                        playVoice();
                    }
                },'text');
            } else { // 關閉
                $audio.pause();// 停止播放
                $this.checked=true; // 在回調未成功之前先不更改
                $.ajax({
                    url: "{{url('/wechat/voice/edit')}}",
                    async: false,
                    data: {type: "{{$type}}", status: 2},
                    type: "GET", //請求方式
                    success: function($data) {
                        if($data==1){
                            clearTimeout($request_init); // 此處銷毀setTimeout意義其實並不是很大了，可自行看着處理，因為上面是在onended事件中調用,通過checked判斷是否調用請求函數 
                            $this.checked=false; // 回調成功后才執行更改
                        }
                    },
                    error: function(){ // 如果出現錯誤情況進行處理，可自己編寫處理，我這里就不再處理了

                    }
                });
            }
        };
    </script>