HTML5音频-声音只能播放一次

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;
});

Answer 3

it seems that for the time being the currentTime attribute is read-only (and in 2011 it has got a wont-fix status )

however, after setting src on your audio-object (again) - like also proposed by @Lloyd - the currentTime attribute becomes settable (at least on a the current chrome-version for linux (24.0.1312.69)).

this means by adding the strange line

audio.src = audio.src

your example does what it is supposed to.

in full:

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

    var sound = $("#letter_audio")[0];  
    sound.src = sound.src;  
    sound.pause();
    sound.currentTime = 0;
    sound.play();

    return false;
});

as it is enough set the src once, you might want to call it somewhere during the setup process.

Answer 4

you can use php to add a query at the end of the url with time();

<source src="URLtoTrack.mp3?<?php echo time(); ?>" />

works for me.