web-dev-qa-db-fra.com

Lire de l'audio et le redémarrer onclick

Je cherche à redémarrer un fichier audio dans un lecteur audio HTML5. J'ai défini un fichier audio et un bouton play.

<audio id="audio1" src="01.wav"></audio>
<button onClick="play()">Play</button>

Lorsque je clique sur le bouton play, la lecture du fichier audio commence, mais lorsque je clique de nouveau sur le bouton, le fichier audio ne s’arrête pas et ne sera pas reproduit tant qu’il n’a pas atteint la fin du fichier.

function play() {
    document.getElementById('audio1').play();
}

Existe-t-il une méthode qui me permettrait de redémarrer le fichier audio lorsque je clique sur le bouton en utilisant onclick plutôt que d’attendre que la chanson s’arrête?

javascripthtmlaudioonclick
12
user2340767

Pour simplement redémarrer la chanson, vous feriez:

function play() {
    var audio = document.getElementById('audio1');
    if (audio.paused) {
        audio.play();
    }else{
        audio.currentTime = 0
    }
}

FIDDLE

Pour basculer, comme dans l'audio s'arrête lorsque vous cliquez à nouveau, et lorsque vous cliquez une autre fois, il recommence depuis le début, vous feriez quelque chose de plus semblable à:

function play() {
    var audio = document.getElementById('audio1');
    if (audio.paused) {
        audio.play();
    }else{
        audio.pause();
        audio.currentTime = 0
    }
}

FIDDLE

25
adeneo
soundManager.setup({
preferFlash: false,
//, url: "swf/"
onready: function () {
    soundManager.createSound({
        url: [
            "http://www.html5rocks.com/en/tutorials/audio/quick/test.mp3", "http://www.html5rocks.com/en/tutorials/audio/quick/test.ogg"
        ],
        id: "music"
    });
    soundManager.createSound({
        url: [
            "http://www.w3schools.com/html/horse.mp3", 
        ],
        id: "horse"
    });
    soundManager.play("music"); 
}

}). beginDelayedInit ();

Et pour démarrer à cheval et mettre en pause tous les autres sons en cours de lecture dans un événement clic:

$("#horse").click(function () {
soundManager.stopAll();
soundManager.play("horse");

});

0
Deepti Gehlot