Ändern des src Attributs im <audio> <source>-Element

[Bernd]

Hallo zusammen,

Ich habe mich heute über Hintergrundmusik auf Webseiten informiert. Mir kam die Idee durch das Verändern des src Attributs und den Einsatz von 2 Buttons eine Art Playlist zu erstellen wo man sich von Titel zu Titel durchklicken kann.
So sieht es grade bei mir aus:

  
var audioSrcListe = new Array();  
audioSrcListe[0] = "C:\\Musik\\track1.mp3";  
audioSrcListe[1] = "C:\\Musik\\track2.mp3";  
audioSrcListe[2] = "C:\\Musik\\track3.mp3";  
  
var trackNumber = 0;  
  
function naechsterTitel()  
{  
elem = document.getElementById('AudioQuelle');  
if (trackNumber == audioSrcListe.length - 1)  
  trackNumber = 0;  
 else  
  trackNumber += 1;  
elem.src = audioSrcListe[trackNumber];  
}  
  
function vorherigerTitel()  
{  
elem = document.getElementById('AudioQuelle');  
if (trackNumber == 0)  
  trackNumber = audioSrcListe.length - 1;  
 else  
  trackNumber -= 1;  
elem.src = audioSrcListe[trackNumber];  
}  

  
<audio controls>  
<source src="C:\Musik\track1.mp3" type="audio/mpeg" id="AudioQuelle" />  
</audio> <br>  
  
<input type="button" value="Naechster Titel" onClick="naechsterTitel()">  
<input type="button" value="Vorheriger Titel" onClick="vorherigerTitel()">  

Also: Ich habe ziemlich viel herumprobiert und hab irgendeinen Fehler gesucht konnte aber nichts verkehrtes finden...
Die Button führen die entsprechenden Funktionen aus - das ist fakt...
Baut man am Ende der Funktionen ein window.alert(elem.src); ein kann man feststellen, dass 'eigentlich' (scheinbar) die Quelle, auf die <source src="#" ...> zugreift, in die gewünschte Quelle, die das Array liefert, geändert wurde.. So hat es zumindest den Anschein. (Es wird folgendes zurück geliefert:  'file:\\C:\Musik\track1.mp3'   Wenn das Lied ein Leerzeichen drin hat also so   'der erste Track.mp3"   wird   'file:\\C:\Musik\der%20erste%20Track.mp3'   zurückgeliefert...)
Dennoch wird der aktuelle Track weitergespielt und ändert sich keineswegs. Ich bin ratlos.
 Mir kam die Idee, dass man vielleicht das <audio controls>-Element neu laden müsste damit die Src-Änderung übernommen werden.  *Zack* gleich mal Google angeschmissen und geschaut wie man 1 Element neu laden kann. Nun, gelinde gesagt: Es ließ sich nur der  (! Ironie !) brilliante Einfall finden man solle doch mal reload() benutzen... Meine Kentnisse sagen mir, dass man mit reload() die gesamte Seite neu laden kann womit wir dann wieder genauso arm im Walde stehen wie zuvor...

Ich hoffe hier kann mir jemand dieses Phänomen erklären warum es bei mir nicht funzt und was ich machen könnte dass es funzt ;)

Einen erschöpften Gruß,
  Bernd