下面代码想实现页面滑动到一定范围内播放11.mp3然后再滑动到一定范围播放22.mp3,这个时候11.mp3暂停播放,滑动回去的时候22.mp3暂停,11.mp3播放.

目前代码如果不在首次加载中主动点击一次播放的话是无法实现的,请问如何解决呢?

ps:android和PC浏览器没问题,iOS的微信中会出现这个问题

<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>