HTML5 Audio - Sound only plays once

Question

I am using Chrome and this is my code:

<audio id="letter_audio" src="audio/bomb.mp3" type="audio/mp3" preload="auto"></audio>

    $('.sound').live('click', function () {

        var sound = $("#letter_audio")[0];  

        sound.pause();
        sound.currentTime = 0;
        sound.play();

        return false;
    });

How come the sound plays the first time I click on play. then when I click again, it pauses, like the code goes. but the it justs stays on pause? i want it to play, then when i click on it again, go back to 0 and play again as in the code?

Answer 1

I've had similar problems replaying audio, but managed to solve it by calling the load() method before the play() call. Try this:

$('.sound').live('click', function () {
    var sound = $("#letter_audio")[0];

    sound.load();
    sound.play();

    return false;
});

I think this is better than resetting the src attribute for two reasons:

1. Keeps the src value in the page content, rather than in the JavaScript

2. Works when you embed multiple <source> elements of different audio formats:

   <audio id="letter_audio">
      <source src="audio/bomb.mp3" type="audio/mp3" preload="auto"/>
      <source src="audio/bomb.ogg" type="audio/ogg" preload="auto"/>
   </audio>
   

Answer 2

try this.. basically, resetting the src attribute should reset the audio as desired.

$('.sound').live('click', function () {

    var sound = $("#letter_audio")[0];  

    sound.src = "audio/bomb.mp3";
    sound.play();

    return false;
});