Heim > Fragen und Antworten > Hauptteil
Der folgende Code möchte erkennen, dass die Seite zu einem bestimmten Bereich gleitet, um 11.mp3 abzuspielen, und dann zu einem bestimmten Bereich gleitet, um 22.mp3 abzuspielen. Zu diesem Zeitpunkt wird 11.mp3 angehalten und beim Zurückgleiten 22. mp3 pausiert und 11.mp3 spielt.
Der aktuelle Code kann nicht implementiert werden, ohne beim ersten Laden einmal aktiv zum Abspielen zu klicken?
ps: Es gibt kein Problem mit Android- und PC-Browsern, aber dieses Problem wird in WeChat von iOS auftreten
<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>