Audio cuts out too soon in Javascript/CSS with onmousedown

Question

I'm having an issue where there's a little beep I'd like played when clicking a link and it cuts off unless the click is held down.

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

Apologies if it's not the cleanest. I'm a month into web programming school and we haven't covered Javascript yet so my knowledge is limited.

Edon · Accepted Answer · 2020-10-11T06:33:54.317

For the code you've written that plays the beep onmousedown, you have a href on the same element. This is the cause of your issue.

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

In short, when the user clicks on one of your elements shown above, two things happen. First, the beep begins to play, second the user is redirected to a new page. When the user is redirected to a new page, it will stop the beep from playing (when loading a new page it will not carry over actions that are going on in the current page, like the beep).

There's a few ways to fix this, and it depends on what you want you want to happen. Here are some ideas that I thought you might be trying for:

1.) If you just want the beep to play when you click the tag, just remove the href and it should work fine, e.g.

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

2.) If you want the beep to play, and then redirect the user to another page after the beep is done playing, then you need to remove the href. Instead of an href, we can create a function that will wait the length of the beep, then direct the user to the new page using javascript. The function will look something like:

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.) If you want the beep to play whenever the user loads a new page, you can just run beep.play() in the section of whatever page you want it to play in.

4.) If you want to play the beep sound and have it carry over to the new page seamlessly without a delay, it gets a little more complicated. There is a wide variety of solutions, but something like this seems to be the consensus answer, but the audio will not transition perfectly.

Audio cuts out too soon in Javascript/CSS with onmousedown

1 Answers1