Stoppen Sie dynamisch erstellte Audios

Question

Ich spiele ein Audio von einem Dienst in Angular, aber ich kann es nicht stoppen. Hier ist meine play() Methode:

play(item: string): void { 
    const audio = new Audio(); 
    audio.src = item; 
    audio.load(); 
    audio.play(); 
} 

Dann in meiner Komponente Ich habe eine mute() Methode, wo Ich mag würde, um alle Audios zu stoppen aktuell abgespielten:

mute(): void { 
    const sounds = document.getElementsByTagName('audio'); 
    console.log(sounds); 
    for (let i = 0; i < sounds.length; i++) { 
    sounds[i].pause(); 
    } 
} 

Aber es zeigt keine Geräusche in meinem console.log und daher wird keiner von ihnen pausiert.

Answer 1

document.getElementsByTagName('audio') findet die Audio-Tags nicht, weil sie nicht zum Dokument hinzugefügt wurden.

Sie können die Audioelemente in das Dokument mit dieser Codezeile am Ende Ihres play() -Methode hinzu: document.getElementsByTagName("body")[0].appendChild(audio);

Alternativ Sie das Audio-Objekt in einem Array halten und das Array zur Verfügung stellen, um Ihr Komponente anstelle von document.getElementsByTagName('audio'). Dieser Ansatz wird gegenüber direkter DOM-Manipulation in Angular-Anwendungen bevorzugt.

Answer 2

In Ihrer play Methode erstellt eine Instanz von Audio und lassen Sie es spielt, aber niemand anders als der Browser über dieses Beispiel weiß ...

Abfrage des DOM wird in Ihren Audio Fällen nicht dazu führen, ... Sie MÜSSEN eine Liste aller Audiodateien abspielen. und auf stumm sie zu stoppen.