Ä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

[Martin_Online]

Hallo,

schau mal, wenn ich auch keine Ahnung von JavaScript habe, aber dieses ist eine sehr schöne Playlist:

http://jsfiddle.net/WsXX3/33/

vielleicht kannst du dir ja hier abschauen wie die das gemacht haben.

[Bernd]

http://jsfiddle.net/WsXX3/33/

vielleicht kannst du dir ja hier abschauen wie die das gemacht haben.

Hey,
Also 'eigentlich' ist das Klasse.. Auf der Web-Seite funktioniert das makellos. Da ist das selbe Player Layout und wenn man dann auf die Links darunter in der Box klickt dann ändert sich auch der Track den der Player wiedergibt...
So, frei wie ich war habe ich die auf der Web-Seite angegebenen CSS, JavaScript und HTML Codes in meinen Editor kopiert und das ganze als I-net Seite geladen. Resultat: Player und Playlist sehen genauso aus wie auf der Seite  NUR: wenn ich auf diese 'verdammten' Links klicke ändert sich nicht (wie bei dem Player auf der Web-Seite) der Track, den der Player wiedergibt, sondern dann öffnet sich mein Windows Media Player -- der Player läuft weiter als sei nichts gewesen -- ...
Entweder die haben etwas anderes im eigentlichen Quellcode stehen als sie angeben was man eigentlich nur zu kopiern bräuchte oder jemand soll mir erklären was hier wer verbockt hat...
(Ein Indiz dafür, dass die was anderes in ihrem Quellcode haben, als sie ausschreiben ist der Playlist Bereich: auf deren Seite haben die z.B. ul {list-style:none;} eingebaut - aber nicht im CSS Kopier-Bereich eingefügt...)
Soviel zu: Ich will doch nur mal eben --

Entnervte Grüße
  Bernd

[Bernd]

Ich hab's...

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];
}

> ~~~html
  

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

Da hau mir jemand ein Brett vor den Kopf...

Durch die kleine Änderung
<source src="C:\Musik\track1.mp3" type="Audio/mpeg" id="AudioQuelle" />
zu
<source src="C:\Musik\track1.mp3" type="Audio/mpeg" />
und
<Audio controls>
zu
<Audio controls id="AudioQuelle">

macht mein 'verdammter' Player endlich das was ich will!

Ich weiß zwar nicht warum zum Teufel man dem <Audio ...> Tag das src Attribut draufpacken soll (da ich doch eigentlich vermute, dass sich <Audio ...> das src Attribut von <source ...> holt)  aber sei's drum, sei's drum.

Dennoch wäre es wünschenswert wenn mir das mit diesem Player von dieser Web-Seite (siehe Post von Martin_Online) erklären könnte.. Warum ändert sich auf deren Seite beim klicken auf einen dieser Links der Player Track und warum versucht der bei mir den Windows Media Player zu öffnen statt ähnlich wie auf deren Web-Seite zu reagieren?

Freundliche Grüße
  Bernd

[Tom]

Hello,

Da hau mir jemand ein Brett vor den Kopf...

Bitte, sogar mit Durchblick :-)

Liebe Grüße aus dem schönen Oberharz

Tom vom Berg