javascript 如何触发音频在滚动条上播放？

cig3rfwq 于 5个月前发布在 Java

关注(0)|答案(2)|浏览(48)

我试图创建一个JavaScript函数，当用户向下滚动页面在某个点（800像素）我的音频文件播放。我不知道如何正确编写的JavaScript，但我相信它需要纳入一个if语句。有人可以请帮助。

window.addEventListener('scroll', () => {
  const play = document.querySelector('.play');

  if (window.scrollY > 800) {
  document.getElementById("playAudio").play();
    }
  });

*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}

section{
    height: 100vh;
    overflow: hidden;
    }

.one{
    background:brown ;
}

.two{
    background: pink;
}

.three{
    background:lightgreen ;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Audio on scroll</title>
  <link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>

  <section class="one"></section>

  <section class="two">
  <div class="play">
    <div id="playAudio">
    <audio autoplay     src="audio/myaudio.mp3"></audio>
     </div>
    </div>
    </section>

  <section class="three"></section>
  
  <script src="index.js"></script>
</body>
</html>

JavaScript

来源：https://stackoverflow.com/questions/77743376/how-do-i-trigger-audio-to-play-on-scroll

2条答案

按热度按时间

cczfrluj1#

你只需要确保if语句在事件侦听器函数中。你需要在audio元素上调用play()方法。比如：

window.addEventListener('scroll', () => {
  const playAudio = document.querySelector("#playAudio audio");
  if (window.scrollY > 800) {
    playAudio.play();
  }
});

字符串
当你向下滚动超过800px时，这将开始播放音频。

赞(0）回复(0）举报 5个月前

ru9i0ody2#

你应该在listener函数中放置一个if语句，并检查当前的滚动量。另外，你应该选择audio元素，而不是它的容器。
在您的示例中，最大滚动可能小于800px，因此我将其更改为200px。

let isPLaying = false;
window.addEventListener('scroll', () => {

  const audio = document.querySelector("#playAudio audio");
  if (!isPLaying && window.scrollY > 200) {
    console.log("play")
    audio.play();
    isPLaying = true
  }
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

section {
  height: 100vh;
  overflow: hidden;
}

.one {
  background: brown;
}

.two {
  background: pink;
}

.three {
  background: lightgreen;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Audio on scroll</title>
  <link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>

  <section class="one"></section>

  <section class="two">
    <div class="play">
      <div id="playAudio">
        <audio autoplay src="audio/myaudio.mp3"></audio>
      </div>
    </div>
  </section>

  <section class="three"></section>

  <script src="index.js"></script>
</body>

</html>

请注意我如何向事件侦听器添加布尔值，以便音乐只播放一次。

赞(0）回复(0）举报 5个月前

我来回答

javascript 如何触发音频在滚动条上播放？

2条答案

相关问题

热门标签

最新问答