multiple audio html : Andere automatisch stoppen, wenn aktuell mit Javascript abgespielt wird
Lesezeit: 4 Minuten
Ich habe 10 Audioplayer mit einfachen HTML-Audio-Tags auf einer HTML5-Seite. Kein Jquery, keine speziellen Audio-JS-Plugins usw.
Hat jemand ein einfaches Skript in js, um alle anderen Spieler anzuhalten, wenn der aktuelle Spieler spielt?
Ich möchte keine js-Plugins verwenden, weil ich einen einfachen Audio-HTML-Code behalten möchte.
Sie können die Ereignisdelegierung verwenden. Hören Sie sich einfach das Wiedergabeereignis in der Aufnahmephase an und pausieren Sie dann alle Videodateien, aber nicht die Zieldatei:
document.addEventListener('play', function(e){
var audios = document.getElementsByTagName('audio');
for(var i = 0, len = audios.length; i < len;i++){
if(audios[i] != e.target){
audios[i].pause();
}
}
}, true);
Kann ich +100 erhöhen? Ich liebe es, wie gebrauchsfertig es einfach kopiert und eingefügt wird 🙂
– Basj
8. Juli 2016 um 13:25 Uhr
perfekte Antwort!
– Blauschöpfung
7. September 2016 um 10:34 Uhr
Danke, ich mache ein kleines Musikprojekt … Funktioniert einfach! 🙂
– Vibhu Tewary
5. Dezember 2016 um 11:33 Uhr
Unglaublich hilfreich.
– rsethc
13. Juli 2018 um 18:21 Uhr
len = audios.length scheint ein unnötiger Schritt zu sein. Du kannst einfach tun i < audios.length.
– Weltschmerz
16. Januar um 9:09 Uhr
Bryc
Anstatt alle Audio-Tags auf einer Seite zu durchlaufen und anzuhalten, können Sie das tun Referenz speichern zum aktuell spielenden Element und haben nur das eine Pause beim Spielen einer anderen.
Ich habe nur eine Sache behoben, um zu verhindern, dass dasselbe Audioelement in eine schlechte Arbeitsschleife gerät, weil Sie das aktuelle überspringen müssen if(window.$_currentlyPlaying && window.$_currentlyPlaying != evt.target). Vielen Dank, ich habe das basierend auf dieser und anderen Fragen erstellt dieses Wesentliche.
– m3nda
14. Juni 2016 um 21:21 Uhr
Geändert zu einer besseren Version, die keine globale Variable verwendet, und behebt den Fehler @m3nda Erwähnungen (Danke).
– Bryc
4. Juli 2021 um 8:45 Uhr
Das Mischen der beiden vorherigen Antworten, die nicht funktionierten, habe ich verwendet. Ich habe gerade hinzugefügt && window.$_currentlyPlaying != evt.target und alles funktioniert. Außerdem habe ich einen Kern mit diesem und anderen Leckereien für Audio-Tags erstellt. Javascript-Audio-Tags
Dieser hat bei mir ohne Probleme funktioniert. Ich habe es einfach unten auf der Seite eingefügt, wo ein ähnliches Audioskript ausgeführt wird.
– Abtekas
6. Juli 2016 um 15:37 Uhr
$("audio").on("play", function() {
var id = $(this).attr('id');
$("audio").not(this).each(function(index, audio) {
audio.pause();
});
});
$("video").on("play", function() {
var id = $(this).attr('id');
$("video").not(this).each(function(index, video) {
video.pause();
});
});
Ich weiß nicht, ob es an Chrome-Updates liegt, aber die vorherigen Antworten haben bei mir nicht funktioniert. Ich habe hier ein bisschen den Code geändert und bin auf folgendes gekommen:
Ich weiß nicht warum, aber die widow.addEventListener funktionierte nicht für mich, aber ich mochte die Idee, die zu haben currentPlaying Variable gespeichert in der window -Element, anstatt es vor der Verwendung außerhalb des Listeners erstellen zu müssen.
Sony Choudhary
Sie können diese Lösung sogar ausprobieren, wenn Sie nicht durchschleifen möchten