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>