The following code wants to realize that the page slides to a certain range to play 11.mp3 and then slides to a certain range to play 22.mp3. At this time, 11.mp3 pauses and plays. When sliding back, 22.mp3 pauses and 11.mp3 plays.

The current code cannot be implemented without actively clicking once to play during the first load. How to solve the problem?

ps: There is no problem with Android and PC browsers, but this problem will occur in iOS WeChat

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

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
function autoPlayAudio() {
    wx.config({
        // 配置信息, 即使不正确也能使用 wx.ready
        debug: false
        , appId: ''
        , timestamp: 1
        , nonceStr: ''
        , signature: ''
        , jsApiList: []
    });
    wx.ready(function () {
        var a1 = document.getElementById('a1'), 
            a2 = document.getElementById('a2');
        $(window).on('scroll', function () {
            var x = $('.audio2').offset().top - $(window).scrollTop();
            if (x < 4500 && x > 4000) {
                a1.play();
                a2.pause();
            }
            else if (x < 4000 && x > 3500) {
                a2.play();
                a1.pause();
            }
        })
    });
}
autoPlayAudio();
</script>