Why won't my button play my sound and go to the link?

Question

This looks like a basic problem but failed to find the answer.. Is there anything I need to add for the button to bring a user to the home page and play the sound? At the moment it only plays the sound. I want it to play the sound immediately then go to the homepage.

 function playBeep() { var sound = document.getElementById("Sound") sound.play() } 

 <div class="animatedButton"> <audio id="Sound" src="https://www.soundjay.com/button/sounds/beep-07.mp3"></audio> <a href="Home.html"> </a> <button id="aButton" onclick="playBeep()"> <img src="img/Home.png"> </button> </div> 

Answer 1

You should wait until the <audio> element is done playing, then tell the browser to navigate to a new page:

 function playBeep() { var sound = document.getElementById("Sound"); sound.play(); sound.addEventListener('ended', function () { location.href = 'Home.html'; }); } 

 <div class="animatedButton"> <audio id="Sound" src="https://www.soundjay.com/button/sounds/beep-07.mp3"></audio> <button id="aButton" onclick="playBeep()"> <img src="img/Home.png"> </button> </div> 

Answer 2

just need to add your link window.location = "http://stackoverflow.com";

 function playBeep() { var sound = document.getElementById("Sound") sound.play(); window.location = "http://stackoverflow.com"; } 

 <div class="animatedButton"> <audio id="Sound" src="https://www.soundjay.com/button/sounds/beep-07.mp3"></audio> <a href="Home.html"> </a> <button id="aButton" onclick="playBeep()"> <img src="img/Home.png"> </button> </div> 

Answer 3

 function playBeep() { var sound = document.getElementById("Sound") sound.play(); window.location.href = '/'; //Go to HomePage } 

 <div class="animatedButton"> <audio id="Sound" src="https://www.soundjay.com/button/sounds/beep-07.mp3"></audio> <a href="Home.html"> </a> <button id="aButton" onclick="playBeep()"> <img src="img/Home.png"> </button> </div> 

Answer 4

<a href="Home.html"> </a>

Your button is not in the <a> tag Maybe this will work :

<a href="Home.html"> 
  <button id="aButton" onclick="playBeep()">
    <img src="img/Home.png">
  </button>
</a>

Answer 5

Your problem is the closing tag of a. the tag "a" has to wrap the whole button.

<a href="Home.html">
  <button id="aButton" onclick="playBeep()">
    <img src="img/Home.png">
  </button>
 </a>

Answer 6

You could always use jQuery to listen for the sound to end and redirect the user.

 /* Bind Ended Event to Sound */ $('#Sound').on('ended', function(){ console.log('User Redirected'); }); /* Bind Click Event to Button */ $('#aButton').on('click', function() { $('#Sound')[0].play(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="animatedButton"> <audio id="Sound" src="https://www.soundjay.com/button/sounds/beep-07.mp3"></audio> <a href="Home.html"></a> <button id="aButton"> <img src="http://findicons.com/files/icons/1580/devine_icons_part_2/128/home.png"> </button> </div> 

Or you could use just JavaScript to listen for the sound to end and redirect the user.

 /* Variable Defaults */ var sound = document.getElementById('Sound'); var button = document.getElementById('aButton'); /* Bind Ended Event to Sound */ sound.addEventListener('ended', function(){ console.log('User Redirected'); }); /* Bind Click Event to Button */ button.addEventListener('click', function() { sound.play(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="animatedButton"> <audio id="Sound" src="https://www.soundjay.com/button/sounds/beep-07.mp3"></audio> <a href="Home.html"></a> <button id="aButton"> <img src="http://findicons.com/files/icons/1580/devine_icons_part_2/128/home.png"> </button> </div>