[JavaScript] Überprüfen, ob Audiodatei abgespielt ist

[yoursmilie]

Hallo,

Ich habe folgendes Problem: ich habe einen Audioplayer, den ich mit zwei Buttons bedienen kann:

1:
2:
3:
4:
<audio style="display:none;" id="audio" src="/datei.ogg" controls preload> </audio>

<img src="/pfeil.jpg" name="max" onClick="document.getElementById('audio').play()">
<img src="/pause.jpg" onClick="document.getElementById('audio').pause()">

Klappt auch soweit ganz gut. Jetzt möchte ich allerdings, dass sich die Farbe des Pfeils ändert, wenn ich auf Play drücke:

1:
2:
3:
4:
5:
6:
7:
8:
function toggleImage(imgObj, url1, url2) {
 if (imgObj) imgObj.src = imgObj.src.indexOf(url1) != -1 ? url2 : url1;
 }

<audio style="display:none;" id="audio" src="/datei.ogg" controls preload> </audio>

<img src="/pfeil.jpg" name="max" onClick="document.getElementById('audio').play(); toggleImage(this,'/pfeil_rot.jpg','pfeil.jpg')">
<img src="/pause.jpg" onClick="document.getElementById('audio').pause()">

Funktioniert auch. Allerdings sollte der Pfeil wieder die ursprüngliche Farbe annehmen, wenn die Datei zu Ende ist bzw. auf "Pause" gedrückt wurde. Genau da liegt mein Problem und die Internetrecherche hat mich auch nicht schlauer gemacht.
Es scheint über folgende Anweisungen lösbar zu sein:

1:
2:
3:
4:
5:
//laufende Zeit
audio.currentTime

//gesamte Laufzeit
getElementById('audio').duration

Kann mir jemand dabei helfen? Es wäre sogar noch besser, wenn man bloß einen Button hätte und der bei Klick startet, beim zweiten Klick pausiert usw. Jeweils mit Bildwechsel. Falls mir jemand verraten kann, wie das geht, wäre das sehr nett.
Bitte nehmt Rücksicht auf mich, ich habe nicht all zu viel Ahnung von der Materie. Gruß Smilie

[ice-breaker]

1:
2:
3:
document.getElementById('audio').addEventListener('ended', function () {
  // mach irgendwas
});

[yoursmilie]

Zitat von ice-breaker

Danke ich habe es geschafft. Allerdings fehlte da noch ein false:

1:
2:
3:
document.getElementById('audio').addEventListener('ended', function () {
  //Anweisungen 
}, false);

Dankende Grüße