javascript - 音频与onmousedown一起在Javascript/CSS中切出过早

Question

我遇到的问题是，单击链接时我想播放一声哔哔声，除非单击被按住，否则它将中断。

<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>

抱歉，如果不是最干净的。我要上一个Web编程学校一个月，而我们还没有介绍Javascript，所以我的知识有限。

Answer 1

对于您编写的播放哔哔声onmousedown的代码，您在同一元素上具有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似乎是共识，但音频不会完美过渡。