下面程式碼是想實(shí)現(xiàn)在微信中頁(yè)面滑動(dòng)到特定的範(fàn)圍播放特定的音訊
目前遇到的問(wèn)題是頁(yè)面滑動(dòng)音訊不播放,但是只要先每個(gè)音訊點(diǎn)擊一下播放再暫停以後就可以滑動(dòng)播放了,請(qǐng)問(wèn)這是為什麼呢?是哪塊程式碼寫的不穩(wěn)嗎?
<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>
可以嘗試將監(jiān)聽(tīng)的事件替換成touchmove。
在某些行動(dòng)端,尤其是ios中,audio不能在沒(méi)有使用者互動(dòng)的情況下自動(dòng)播放或有js直接控製播放。這是系統(tǒng)限制。