Wiedergabe verschiedener Audios auf Knopf klicken Angular

Question

Ich mache gerade eine Art Funkzentrale. Ich habe alle Stationsinformationen in einem Dienst. Ich liste alles in der HTML-Datei auf, nachdem ich es durch die Komponente bekommen habe.

Auf Knopfdruck wird die Sender-URL in eine Variable geschrieben, die dann in eine Audio-Quelle geladen wird. Diese Audioquelle ist geladen und beginnt mit der Wiedergabe.

Ich habe ein paar Probleme, obwohl alles in 1 Taste. Wenn ich die URL in der Variablen zuerst mit 1 Schaltfläche lade und mit einer anderen aktiviere, funktioniert es. Aber wenn ich versuche, beide in 1-Taste zu setzen, scheint es die Variable nicht zu aktualisieren.

Meine Komponente:

audio: any= new Audio(); 
    audios: any[]; 
    audiosource: string = ''; 

    //methods 
    GetStation() 
    { 
     console.log('works'); 
     this.audio.src = this.audiosource; 
     this.audio.load(); 
     this.audio.play(); 
    } 

    //constructor 
    constructor(private soundwaveService: SoundwaveService) 
    { 
     this.audios = soundwaveService.getStations(); 
    } 

Mein html:

<div *ngFor="let audio of audios, let i = index"> 
    <div (click)="audiosource=audio.url"> 
     <button (click)="GetStation()">{{audio.station}}</button> 
    </div> 
</div> 
--- {{audiosource}} --- 

Answer 1

in Ihrer Vorlage HTML Beachten Sie, dass Sie die GetStation() Funktion auf click() auslösen, aber sie sind vorbei keine Bezugnahme auf diese audio die Sie möchte gespielt werden. Außerdem ist der (click) Handler auf der div eigentlich nutzlos.

den Code dieses ändern:

<div *ngFor="let audio of audios, let i = index"> 
    <div> 
     <!--pass the audio you want to play in the click event's handler--> 
     <button (click)="GetStation(audio)">{{audio.station}}</button> 
    </div> 
</div> 

nun in Ihrer Komponentenklasse:

GetStation(audio) 
    { 
     this.audio.src = audio.src; 
     this.audio.load(); 
     this.audio.play(); 
    } 

Dies wird Ihre Audio-Track spielen, die angeklickt wurde.