javascript - html5 audio在微信中需要先點選播放然後才能用.play().pause()控制為什麼呢?

Question

下面程式碼是想實現在微信中頁面滑動到特定的範圍播放特定的音訊
目前遇到的問題是頁面滑動音訊不播放,但是只要先每個音訊點擊一下播放再暫停以後就可以滑動播放了,請問這是為什麼呢?是哪塊程式碼寫的不穩嗎?

    <audio id="a1" src="http://mat1.gtimg.com/ln/images/mp3/11.mp3" loop controls  preload="load"></audio>
    <audio id="a2" src="http://mat1.gtimg.com/ln/images/mp3/22.mp3" loop controls  preload="load"></audio>

    <p class="wrap" id="wp">
        <p class="audio2"></p> <img src="http://img1.gtimg.com/ln/pics/hv1/133/63/2205/143396323.jpg" alt="" width="100%"> </p>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script>
        function autoPlayAudio1() {
            wx.config({
                // 配置信息, 即使不正确也能使用 wx.ready
                debug: false
                , appId: ''
                , timestamp: 1
                , nonceStr: ''
                , signature: ''
                , jsApiList: []
            });
            wx.ready(function () {
                var mp3 = document.getElementById('bgmusic')
                    , a1 = document.getElementById('a1')
                    , a2 = document.getElementById('a2');
                //a1.play();
                console.log('ok')
                $(window).scroll(function () {
                    var x = $('.audio2').offset().top - $(window).scrollTop();
                    console.log(x)
                    if (x < 4500 && x > 4000) {
                        a1.play();
                        a2.pause();
                    }
                    else if (x < 4000 && x > 3500) {
                        a2.play();
                        a1.pause();
                    }
                });
            });
        }
        autoPlayAudio1();
    </script>

Answer 1

可以嘗試將監聽的事件替換成touchmove。
在某些行動端，尤其是ios中，audio不能在沒有使用者互動的情況下自動播放或有js直接控製播放。這是系統限制。