Ändern des Audioplayer-Symbols bei Beendigung der Wiedergabe

Question

Ich verwende einen Code, den ich auf einem Codepen gefunden habe, der das audio-Tag formatiert, um Symbole zu verwenden.

Der ursprüngliche Code arbeitete nur mit einem Spieler, also habe ich geändert, damit es mit mehreren Spielern auf der gleichen Seite funktioniert. Dies funktioniert und es spielt die richtige WAV-Datei ab, je nachdem, auf welches Symbol Sie klicken.

Mein Problem ist, sobald die Wiedergabe einer bestimmten WAV-Datei abgeschlossen ist, kehrt das Symbol nicht zu seinem ursprünglichen play Zustand zurück.

Ich habe hier eine FIDDLE erstellt, die zeigt was ich meine.

Dies ist jquery ich benutze, wenn das Spiel wieder beendet:

$('#player' + id).on('ended', function() { 
     console.log ('ended') 
    $('#speaker' + id).removeClass('speakerplay'); 
    /*When the audio has finished playing, remove the class speakerplay*/ 
    audiostatus = 'off'; 
    /*Set the status back to off*/ 
    }); 

Ich denke, die Frage zu id nicht sein Know fällig ist oder es könnte einer der Spieler

niemandes ID sein Irgendeine Idee, wie ich das lösen kann?

Dank

Answer 1

Sieht aus wie ich es behoben habe.

$('[id^="player"]').on('ended', function() { 
    id = this.id.replace('player','') 
    $('#speaker' + id).removeClass('speakerplay'); 
    audiostatus = 'off'; 
}); 

neue FIDDLE es zeigt, zu arbeiten.