javascript - 如何在iOS微信中透過條件觸發音訊播放?

Question

下面程式碼想實現頁面滑動到一定範圍內播放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>

Answer 1

ios系統安全限制

Answer 2

IOS 現在限制了自動播放音效或視頻，需要用戶至少點擊一次才行，
這也是現在瀏覽器的一種趨勢，盡可能的考慮其他的解決方案吧。