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>
ios系统安全限制
IOS 现在限制了自动播放音效或者视频,需要用户至少点击一次才行,
这也是现在浏览器的一种趋势,尽可能的考虑其他的解决方案吧。