Diese Methode funktioniert:
audio.pause();
audio.currentTime = 0;
Wenn Sie diese beiden Codezeilen jedoch nicht jedes Mal schreiben müssen, wenn Sie ein Audio stoppen, können Sie eines von zwei Dingen tun. Das zweite ist meiner Meinung nach das passendere und ich bin mir nicht sicher, warum die "Götter der Javascript-Standards" diesen Standard nicht gemacht haben.
Erste Methode: Erstellen Sie eine Funktion und übergeben Sie das Audio
function stopAudio(audio) {
audio.pause();
audio.currentTime = 0;
}
//then using it:
stopAudio(audio);
Zweite Methode (bevorzugt): Erweitern Sie die Audio-Klasse:
Audio.prototype.stop = function() {
this.pause();
this.currentTime = 0;
};
Ich habe dies in einer Javascript-Datei namens "AudioPlus.js", die ich in mein HTML vor jedem Skript einbinde, das sich mit Audio befasst.
Dann können Sie die Stoppfunktion für Audioobjekte aufrufen:
audio.stop();
ENDLICH CHROM AUSGABE MIT "canplaythrough":
Ich habe dies nicht in allen Browsern getestet, aber dies ist ein Problem, auf das ich in Chrome gestoßen bin. Wenn Sie versuchen, currentTime für ein Audio festzulegen, an das ein Ereignis-Listener "Durchspielen" angehängt ist, lösen Sie dieses Ereignis erneut aus, was zu unerwünschten Ergebnissen führen kann.
Ähnlich wie in allen Fällen, in denen Sie einen Ereignis-Listener angehängt haben, um sicherzustellen, dass er nicht erneut ausgelöst wird, besteht die Lösung darin, den Ereignis-Listener nach dem ersten Aufruf zu entfernen. Etwas wie das:
//note using jquery to attach the event. You can use plain javascript as well of course.
$(audio).on("canplaythrough", function() {
$(this).off("canplaythrough");
// rest of the code ...
});
BONUS:
Beachten Sie, dass Sie der Audio-Klasse (oder einer beliebigen nativen Javascript-Klasse) noch mehr benutzerdefinierte Methoden hinzufügen können.
Wenn Sie beispielsweise eine "Neustart" -Methode wünschen, mit der das Audio neu gestartet wird, könnte dies folgendermaßen aussehen:
Audio.prototype.restart= function() {
this.pause();
this.currentTime = 0;
this.play();
};