javascript – Warum muss in WeChat auf die Wiedergabe von HTML5-Audio geklickt werden, bevor es mit .play().pause() gesteuert werden kann?

Question

Der folgende Code soll es der Seite ermöglichen, in WeChat zu einem bestimmten Bereich zu gleiten, um bestimmte Audiodaten abzuspielen.
Das derzeit auftretende Problem besteht darin, dass die Audiodaten nicht abgespielt werden, wenn die Seite verschoben wird, sondern solange auf die einzelnen Audiodaten geklickt wird, um sie abzuspielen und dann pausiert, kann ich fragen, warum das so ist?

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