在 Javascript/CSS 中使用 onmousedown 时音频过早中断

Question

我遇到了一个问题，我想在单击 link 时播放一点蜂鸣声，但除非按住点击，否则它会停止。

<script>
  var beep = new Audio();
  beep.src = "audio/select.mp3";
  </script>
  <div class="frame">
    <div class="upperband">
  <img src="images\Upper bar.png" alt="Upper overlay">
</div>
  <div class="outer">
    <div class="header">Maddie's School Site_</div>
      <div class="wrapper">
        <nav>
        - home<br>
        <a href="made.html" onmousedown="beep.play()">- Stuff I Made<br></a>
        <a href="wrote.html" onmousedown="beep.play()">- Stuff I wrote<br></a>
        <a href="whothehell.html" onmousedown="beep.play()">- Who the hell am I?<br></a>
        </nav>
        <div class="right">
          <div class="shadowFX">
          <img src="images\Website_Sprite_ghost.svg" alt="avatar">
        </div>
        </div>
      </div>
    </div>
  </div>

如果不是最干净的，我们深表歉意。我进入网络编程学校一个月了，我们还没有涉及 Javascript 所以我的知识有限。

Answer 1

对于您编写的在鼠标按下时发出蜂鸣声的代码，您在同一元素上有一个 href。这就是您遇到问题的原因。

    <a href="made.html" onmousedown="beep.play()">- Stuff I Made<br></a>
    <a href="wrote.html" onmousedown="beep.play()">- Stuff I wrote<br></a>

简而言之，当用户点击上面显示的元素之一时，会发生两件事。首先，哔哔声开始播放，其次，用户被重定向到一个新页面。当用户被重定向到一个新页面时，它将停止播放蜂鸣声（加载新页面时它不会继续当前页面中正在进行的操作，如蜂鸣声）。

有几种方法可以解决这个问题，这取决于您希望发生什么。以下是我认为您可能正在尝试的一些想法：

1.) 如果您只想在点击标签时发出哔哔声，只需删除 href 即可，它应该可以正常工作，例如

    <a onmousedown="beep.play()">- Stuff I Made<br></a>

2.) 如果你想播放哔哔声，然后在哔哔声播放完毕后将用户重定向到另一个页面，那么你需要删除href。代替 href，我们可以创建一个函数来等待哔哔声的长度，然后使用 javascript 将用户引导至新页面。该函数看起来像：

function handlePageChange() {
    beep.play(); // start playing the beep
    
    // wait (timeout) for three seconds while the beep plays
    setTimeout(function() {
        // then load the new page
        document.location.href = "made.html"; // the new page you want to open
    }, 3000); // 3000 is three seconds. Update it to however long your beep is
}

3.) 如果您希望每当用户加载新页面时都播放哔哔声，您可以在您希望它播放的任何页面的部分中运行 beep.play() .

4.) 如果你想播放哔声并让它无缝地转移到新页面而没有延迟，它会变得有点复杂。解决方案多种多样，但something like this似乎是公认的答案，但音频不会完美过渡。

在 Javascript/CSS 中使用 onmousedown 时音频过早中断

Audio cuts out too soon in Javascript/CSS with onmousedown

html

javascript

css

audio

dom-events