如何实现页面滚动到800px位置时触发音频播放？

原代码存在的问题 #

1. 元素选择错误：你把id="playAudio"加在了div标签上，而play()是audio元素专属方法，div调用这个方法会直接报错。
2. 重复触发播放：scroll事件会随滚动频繁触发，每次滚动超过800px都会执行播放逻辑，会导致音频重复播放甚至抛出错误。
3. 未处理浏览器自动播放限制：现代浏览器对自动播放有严格限制，无用户交互的情况下可能无法直接播放音频。

修正后的完整代码 #

HTML

<!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">
      <!-- 将id移到audio标签上 -->
      <audio id="playAudio" src="audio/myaudio.mp3"></audio>
    </div>
  </section>
  <section class="three"></section>
  
  <script src="index.js"></script>
</body>
</html>

CSS（无需修改）

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

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

.one{
    background:brown ;
}

.two{
    background: pink;
}

.three{
    background:lightgreen ;
}

JavaScript

// 标记音频是否已播放，避免重复触发
let hasPlayed = false;

window.addEventListener('scroll', () => {
  const audioElement = document.getElementById("playAudio");
  
  // 满足滚动条件且音频未播放时执行播放
  if (window.scrollY > 800 && !hasPlayed) {
    // 使用then/catch处理播放状态，兼容浏览器自动播放政策
    audioElement.play()
      .then(() => {
        hasPlayed = true; // 播放成功后标记为已播放
      })
      .catch(error => {
        console.error('音频播放失败:', error);
        // 若播放失败，可提示用户点击页面触发播放
        // 比如：alert('请点击页面后再滚动以播放音频');
      });
  }
});

关键说明 #

• 修正元素选择：确保获取的是audio元素，才能调用play()方法。
• 添加播放标记：hasPlayed变量确保音频只在第一次滚动到800px时播放一次。
• 处理播放异常：通过catch捕获播放失败的情况，应对浏览器的自动播放限制（部分浏览器要求用户先和页面交互才能播放媒体）。

内容的提问来源于stack exchange，提问作者Jen