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

Benutzer-Avatar
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.

document.addEventListener("play", function(evt) {
    if(this.$AudioPlaying && this.$AudioPlaying !== evt.target) {
        this.$AudioPlaying.pause();
    }
    this.$AudioPlaying = evt.target;
}, true);

  • 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

window.addEventListener("play", function(evt)
{
    if(window.$_currentlyPlaying && window.$_currentlyPlaying != evt.target)
    {
        window.$_currentlyPlaying.pause();
    } 
    window.$_currentlyPlaying = evt.target;
}, true);

  • 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:

document.addEventListener("play", function(evt)
{
    if(window.$_currentlyPlaying && window.$_currentlyPlaying != evt.target)
    {
        window.$_currentlyPlaying.pause();
    } 
    window.$_currentlyPlaying = evt.target;
}, true);

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.

Benutzer-Avatar
Sony Choudhary

Sie können diese Lösung sogar ausprobieren, wenn Sie nicht durchschleifen möchten

var previuosAudio;
document.addEventListener('play', function(e){
    if(previousAudio && previousAudio != e.target){
        previousAudio.pause();
    }
    previousAudio = e.target;
}, true);

Benutzer-Avatar
Joe Powell

Ich habe unten einen Player erstellt und den src jedes Mal geändert, wenn der Benutzer auf Play klickt. Dies ist nur eine Möglichkeit, dies zu tun

HTML

<audio src="tracks/track1.mp3" type="audio/mp3" class="audios"></audio>
  <i class="fas fa-play"></i>
  <i class="far fa-pause-circle"></i>
  <i class="fas fa-stop"></i>
<audio src="tracks/track2.mp3" type="audio/mp3" class="audios"></audio>
  <i class="fas fa-play"></i>
  <i class="far fa-pause-circle"></i>
  <i class="fas fa-stop"></i>
<audio src="tracks/track3.mp3" type="audio/mp3" class="audios"></audio>
  <i class="fas fa-play"></i>
  <i class="far fa-pause-circle"></i>
  <i class="fas fa-stop"></i>

  <audio class="main-audio" controls>
     <source src="#" type="audio/mp3">
  </audio>

JavaScript

const audios_with_src = document.querySelectorAll('.audios')
const play = document.querySelectorAll('.fa-play')
const pause = document.querySelectorAll('.fa-pause-circle')
const stop = document.querySelectorAll('.fa-stop')
const main_player = document.querySelector('.main-audio')

for(let i =0; i < audios_with_src.length; i++) {
 play[i].addEventListener('click', (e) => {
    main_player.src = audios_with_src[i].src;
    main_player.play()   
    })

pause[i].addEventListener('click', () => {
    main_player.pause()
})

stop[i].addEventListener('click', () => {
    main_player.pause()
    main_player.currentTime = 0;  // there is no stop() function so had to do this
})


}

1017290cookie-checkmultiple audio html : Andere automatisch stoppen, wenn aktuell mit Javascript abgespielt wird

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy