我想在页面的选定区域中启用音频。如果用户滚动出该元素，音频将停止。
我找到了这种解决方案，但问题是像素值在窗口，监视器，浏览器种类等的顺序上是不同的。
var playing = false;
var audioElm = $('#soundTour').get(0);
$(window).scroll(function() {
var pageScroll = $(window).scrollTop();
if(!playing && pageScroll > 500 && pageScroll < 3000){
audioElm.play();
playing = true;
}else if(pageScroll > 3000 || pageScroll < 500){
audioElm.pause();
playing = false;
}
});
我的一页是这样的:
https://alvarotrigo.com/fullPage/examples/navigationV.html#firstPage
例如，我希望背景声音将在第一页和第二页期间自动播放，并在用户加入第三页时停止播放。
有什么帮助吗？
最佳答案
在下面的代码中，当第三个块的30％可见时，声音开始播放。
<html>
<head>
<meta charset="utf-8" />
<style>
body { margin: 0; padding: 0; }
</style>
</head>
<body>
<audio src="/sound.wav"></audio>
<div style="height: 100%; background: #ff5555">first page</div>
<div style="height: 100%; background: #55ff55">second page</div>
<div id="d3" style="height: 100%; background: #5555ff">third page</div>
<script>
const el = document.querySelector("audio");
let playing = false;
window.addEventListener('scroll', (e) => {
const scroll = e.target.body.scrollTop;
const rect = document.getElementById("d3").getBoundingClientRect();
const top = rect.top;
if (!playing && top > rect.height / 3) {
el.play();
playing = true;
} else if (top < rect.height / 3) {
el.pause();
playing = false;
}
});
</script>
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<style>
body { margin: 0; padding: 0; }
</style>
</head>
<body>
<div id="d1" style="height: 100%; background: #ff5555">first page</div>
<div id="d2" style="height: 100%; background: #55ff55">second page</div>
<div id="d3" style="height: 100%; background: #5555ff">third page</div>
<script>
const soundfiles = ["sound.wav", "sound2.wav", "sound.wav"];
const divIds = ["d1", "d2", "d3"];
const els = soundfiles.map((filename, index) => {
const el = document.createElement("audio");
el.src = "/" + filename;
document.body.appendChild(el);
return el;
})
const playing = new Array(divIds.length).fill(false);
window.addEventListener('scroll', (e) => {
const scroll = e.target.body.scrollTop;
const rects = divIds.map(id => document.getElementById(id).getBoundingClientRect());
const tops = rects.map(rect => rect.top);
tops.forEach((top, ind) => {
if (!playing[ind] && top <= rects[ind].height * 2 / 3 && top > - rects[ind].height * 1 / 3) {
els[ind].play();
playing[ind] = true;
} else if (playing[ind] && (top > rects[ind].height * 2 / 3 || top < -rects[ind].height * 1 / 3)) {
els[ind].pause();
playing[ind] = false;
}
});
});
</script>
</body>
</html>
关于javascript - DIV中的滚动音频，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/64008348/