javascript - Why does html5 audio need to be clicked on play in WeChat before it can be controlled with .play().pause()?

Question

The following code is to enable the page to slide to a specific range in WeChat to play specific audio
The problem currently encountered is that the audio does not play when the page slides, but as long as each audio is clicked to play and then paused, it can be Sliding playback, why is this? Which piece of code is not written securely?

    <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

You can try to replace the monitored event with touchmove.
In some mobile terminals, especially ios, audio cannot automatically play without user interaction or have js to directly control playback. This is a system limitation.