极客观点
项目管理
HarmonyOS
iOS微信中打开页面自动播放11.mp3
当audio2的层距离顶部小于4500的时候停止播放11.mp3然后播放22.mp3
但是停止播放11.mp3后不播放22.mp3请问这是为什么呢?
android中测试可以...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="http://ln.qq.com/css/c/base.css">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
~ function () {
function e() {
r.innerText = "html{font-size:" + (a.style.fontSize = a.getBoundingClientRect().width / o * d + "px") + " !important;}"
}
var t = navigator.userAgent
, n = (t.match(/(iPhone|iPad|iPod)/), t.match(/Android/i), window)
, i = document
, a = i.documentElement
, o = (n.devicePixelRatio || 1, 375)
, d = 100
, r = (i.head.querySelector('[name="viewport"]'), i.createElement("style"));
r.innerText = "html{font-size:100px !important}", i.head.appendChild(r), e(), n.addEventListener("resize", e, !1), a.className += t.match(/ucbrowser/i) ? " app-uc " : ""
}();
</script>
<style>
.audio2 {
position: absolute;
top: 5000px;
}
</style>
</head>
<body> <a href="javascript:;" class="pause">pause</a>
<div class="wrap" id="wp">
<div class="audio2"></div> <img src="http://img1.gtimg.com/ln/pics/hv1/133/63/2205/143396323.jpg" alt="" width="100%"> </div>
<audio id="a1" src="http://mat1.gtimg.com/ln/images/mp3/11.mp3" loop></audio>
<audio id="a2" src="http://mat1.gtimg.com/ln/images/mp3/22.mp3" loop></audio>
<audio id="a3" src="http://mat1.gtimg.com/ln/images/mp3/33.mp3" loop></audio>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
//一般情况下，这样就可以自动播放了，但是一些奇葩iPhone机不可以
//document.getElementById('car_audio').play();
//必须在微信Weixin JSAPI的WeixinJSBridgeReady才能生效
var a1 = document.getElementById('a1')
, a2 = document.getElementById('a2')
, a3 = document.getElementById('a3');
$('.pause').on('click', function () {
a1[0].play();
})
document.addEventListener("WeixinJSBridgeReady", function () {
a1.play()
$(window).scroll(function () {
var x = $('.audio2').offset().top - $(window).scrollTop();
console.log(x)
if (x < 4500 && x > 4000) {
a1.pause();
a2.play();
console.log(a2.play());
}
else if (x < 4000 && x > 3500) {
a2.pause();
a3.play();
}
else {
a1.play()
}
});
}, false);
</script>
</body>
</html>
html5