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>

Where do you tell the browser to navigate to a new page? And if you change the page immediately, the user won't hear the sound. — PeterMader, Jul 26 '17 at 15:13
I have created the button that the user clicks to go to the home button, the animatedButton is the button that is supposed to play the sound and then link . — Casey Kusella-Gussin, Jul 26 '17 at 15:17
Because there is no connection between the button and the `` element. To do this you would need to set location.href when the audio completes ([example](https://stackoverflow.com/questions/11103582/detecting-when-html5-audio-is-finished-playing-more-than-once)) - but custom audio like that can be quite annoying. Also do not direct link to soundjay. — Alex K., Jul 26 '17 at 15:18

score 1 · Accepted Answer · answered Jul 26 '17 at 15:18

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>

answered Jul 26 '17 at 15:18

PeterMader

6,987
1
21
31

This seems to be the most simplest and effective answer, also helps me remove the a tag which you aren't supposed to wrap around a button for some reason. Thank you for the help! – Casey Kusella-Gussin Jul 26 '17 at 15:36

score 0 · Answer 2 · answered Jul 26 '17 at 15:19

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>

score 0 · Answer 3 · answered Jul 26 '17 at 15:19

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>

score 0 · Answer 4 · answered Jul 26 '17 at 15:20

0

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

answered Jul 26 '17 at 15:20

Yann Mantelli

17
3

score 0 · Answer 5 · answered Jul 26 '17 at 15:20

0

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>

answered Jul 26 '17 at 15:20

Ana

1
2

Daerik · Answer 6 · 2017-07-26T15:28:30.507

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>

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

6 Answers6