javascript – Warum muss in WeChat auf die Wiedergabe von HTML5-Audio geklickt werden, bevor es mit .play().pause() gesteuert werden kann?
Der folgende Code soll es der Seite ermöglichen, in WeChat zu einem bestimmten Bereich zu gleiten, um bestimmte Audiodaten abzuspielen.
Das derzeit auftretende Problem besteht darin, dass die Audiodaten nicht abgespielt werden, wenn die Seite verschoben wird, sondern solange auf die einzelnen Audiodaten geklickt wird, um sie abzuspielen und dann pausiert, kann ich fragen, warum das so ist?
<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>
