Premature audio cutoffs in Javascript/CSS when using onmousedown event

Question

Premature audio cutoffs in Javascript/CSS when using onmousedown event

One issue I'm facing is that a small beep sound should play when clicking on a link, but it gets cut 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>

I apologize if the code looks messy. I've only been in web programming school for a month and we haven't covered JavaScript yet, so my understanding is limited.

javascript html css audio dom-events

Answer 1

Answer №1

It appears that the issue stems from having a href attribute in the same element as the code that triggers the beep onmousedown.

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

Essentially, when the user clicks on one of the above elements, the beep plays and then the user is redirected to a new page. However, loading a new page interrupts the beep from playing further.

To address this issue, there are several solutions based on what outcome you are looking for:

1.) If you want the beep to play only upon clicking the tag without redirecting, simply remove the href attribute like so:

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

2.) If you wish for the beep to play first and then redirect the user after it finishes, utilize a timer function instead of href to control the redirection timing:

function handlePageChange() {
    beep.play(); // initiate beep
    
    setTimeout(function() {
        document.location.href = "made.html"; // redirect after beep
    }, 3000); // Adjust time for beep duration
}

3.) To have the beep play upon loading a new page, include beep.play() in the section of the desired page.

4.) For a seamless transition of the beep sound to the new page without delay, consider more advanced techniques such as those recommended here, though perfect audio continuity may not be achieved.

Answer 2

It appears that the issue stems from having a href attribute in the same element as the code that triggers the beep onmousedown.

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

Essentially, when the user clicks on one of the above elements, the beep plays and then the user is redirected to a new page. However, loading a new page interrupts the beep from playing further.

To address this issue, there are several solutions based on what outcome you are looking for:

1.) If you want the beep to play only upon clicking the tag without redirecting, simply remove the href attribute like so:

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

2.) If you wish for the beep to play first and then redirect the user after it finishes, utilize a timer function instead of href to control the redirection timing:

function handlePageChange() {
    beep.play(); // initiate beep
    
    setTimeout(function() {
        document.location.href = "made.html"; // redirect after beep
    }, 3000); // Adjust time for beep duration
}

3.) To have the beep play upon loading a new page, include beep.play() in the section of the desired page.

4.) For a seamless transition of the beep sound to the new page without delay, consider more advanced techniques such as those recommended here, though perfect audio continuity may not be achieved.

Premature audio cutoffs in Javascript/CSS when using onmousedown event

Answer №1

Similar questions

Dynamic creation of HTML/Ionic checkbox leads to ng-change not binding properly

Is there a way to incorporate GIFs into a Node.js art generation script that anyone knows of?

Establishing a color palette for various CSS classes using a gradient color spectrum

I encountered difficulty displaying a list of documents in the view while working with derbyjs

Is it possible to delete an element from a JSON file by solely utilizing the element's ID?

Webpack Error: SyntaxError - an unexpected token found =>

The HTML form must be able to determine the number of records in the database

What is the best way to include a .AVI file in an HTML document?

What is the best way to position multi-line text alongside an image without it wrapping below the image?

How can I attach events to newly generated elements without using jQuery?

Tips for generating an interactive collapse effect with the simple click of a button

When importing OrbitControls in main.js, THREE.js does not include the EventDispatcher export

Remove the click event once the sorting process has been completed

Is there a more efficient method for incorporating artists' animations in ThreeJS?

Issue with Bootstrap NavBar collapsing properly on first element

What's causing my Bootstrap cards to overlap on smaller screens?

"Utilizing the mongodb deleteOne function to remove an email within a document

Creating a table that adapts to different screen sizes using

Passing data from a card component to a tab component in ReactJS

Is there a way to iterate through objects and add new properties to them?