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直接控制播放。这是系统限制。