Mehrere html5 Hörbeispiele sollen sich gegenseitig stoppen

[chris_blues]

Hallo!
Ich werde der Sache nicht Herr! Ich bin auch absoluter Neuling in Sachen JavaScript und seh vielleicht nur den Wald vor Bäumen nicht. Aber hier ist das Problem:
Per php-while Schleife wird aus einer html Vorlage eine Liste mit u.a. <audio>-tags gebaut. Das funktioniert soweit alles super. Aber wenn ich jetzt einen Titel starte und dann den nächsten, spielt der "alte" natürlich weiter. Wie kann ich jetzt den alten stoppen?
Ich hatte gehofft, ich könnte es ganz einfach über eine "switch" Variable lösen. Also wenn ich einen Song starte, dann wird diese variable(lastplayed) mit der ID des audio-Tags gesetzt. Wenn ich dann den nächsten starte wird die lastplayed gestoppt. Irgendwie will das aber nicht. Hier der Code; die mit %eingeschlossenen% Werte werden per php mit tatsächlichen Kennungen ausgetauscht. In freier Wildbahn kann man das ganze dann hier sehen:
http://folkadelic.de/store.php (auf die Platte clicken!)

get_audio.html:

<tr><td align="left" valign="center">  
<audio id="%id%_%trackid%" class="%id%_%trackid%" onended="document.getElementById('%id%_%trackid%-pp').src='pics/play.png';">  
 <source src="items/audio/%id%/%trackid%.mp3" type="audio/mpeg" />  
 <source src="items/audio/%id%/%trackid%.ogg" type="audio/ogg" />  
</audio>  
<a class="%id%_%trackid%" href="javascript:play_%trackid%();"><img src="pics/play.png" id="%id%_%trackid%-button" border="0"> %trackname%</a>  
<script type="text/javascript">  
   var audio_%trackid% = document.getElementById('%id%_%trackid%');  
   var lastplayed = document.getElementById('%id%_%trackid%');  
   function play_%trackid%()  
     {  
     if (audio_%trackid%.paused)  
       {  // command: Play!  
         lastplayed.pause();  
         lastplayed.currentTime = 0;  
         audio_%trackid%.play();  
         document.getElementById('%id%_%trackid%-button').src = "pics/play_active.png";  
         var lastplayed = document.getElementById('%id%_%trackid%');  
       }  
     else  
       {  // command: Stop!  
         audio_%trackid%.pause();  
         audio_%trackid%.currentTime = 0;  
         document.getElementById('%id%_%trackid%-button').src = "pics/play.png";  
       }  
     }  
</script>  
</td></tr>

Wenn ich jetzt bei diesem Code die Seite aufrufe, finde ich in FF's Fehlerconsole nur, daß mp3 nicht unterstützt wird und jquery irgendwie nicht ganz rund läuft, das ist mir aber Wurscht! :) NUR: wenn ich einen Song starten will, erscheint nur in der Fehlerconsole, daß lastplayed nicht gesetzt ist, und das ganze Script arbeitet nicht mehr (<audio> auch nicht)... Das Fehlverhalten kann man dann hier in der Baustelle sehen:
http://folkadelic.de/baustelle/store.php (auf die Platte clicken!)

Weiß da jemand guten Rat; was ich hier falsch mache? Ohne die lastplayed-Geschichte arbeitet ja alles einwandfrei...

Vielen Dank schonmal! :)

Schöne Grüße,
chris

[chris_blues]

Hmm, schade! Gar kein Feedback hilft auch nicht wirklich weiter...
Hätte gehofft, daß mir jemand mit dieser wahrscheinlich blöden Anfängerfrage helfen kann.
Bitte, falls jemand da irgendeine Idee hat, einen hilfreichen Link, irgendwas... ... dann immer her damit! Ich weiß eben nicht mehr weiter.

chris

[chris_blues]

Gestern nacht kam mir noch die Idee, man könnte all den audio-Blöcken einheitliche Namen geben, also vielmehr den selben. Die Unterscheidung untereinander läuft ja über die ID's. Wenn ich jetzt immer dem audio den selben Namen mitgebe, also z.Bsp. "audioplayer", dann kann ich doch über document.getElementByName('audioplayer').stop(); ALLE playbacks stoppen oder? Das hätte ja auch den gewünschten Effekt, oder?
Und wenn man denn in der nächsten Zeile play(); startet, könnte das doch funktionieren...

Na mal sehen, zurück zum trial&error...

[chris_blues]

Puh! Es ist vollbracht!
Es scheint mir nicht sehr elegant jedesmal diese große Schleife aller <audio>-Elemente durchzugehen, aber immerhin tut es den verlangten Job!
Der Knackpunkt war, daß "getElementByName" und "getElementByTagName" wie ein Array arbeiten. Das wußte ich vorher nicht...

Ich hoffe, das erspart jemandem irgendwann diese zeitraubende Stöberei...

<audio id="%id%_%trackid%" class="%id%_%trackid%" onended="document.getElementById('%id%_%trackid%-button').src='pics/play.png';">  
 <source src="items/audio/%id%/%trackid%.mp3" type="audio/mpeg" />  
 <source src="items/audio/%id%/%trackid%.ogg" type="audio/ogg" />  
</audio>  
<a class="%id%_%trackid%" href="javascript:play_%trackid%();"><img src="pics/play.png" id="%id%_%trackid%-button" border="0" name="playbutton"> %trackname%</a>

<script type="text/javascript">  
   var audio_%trackid% = document.getElementById('%id%_%trackid%');  
   var playbacks = document.getElementsByTagName("audio");  
   function play_%trackid%()  
     {  
     if (audio_%trackid%.paused)  
       {  // command: Play!  
         for (var i = 0; i < playbacks.length; i++)  
           {  
            document.getElementsByTagName("audio")[i].pause();  
            document.getElementsByTagName("audio")[i].currentTime = 0;  
            document.getElementsByName("playbutton")[i].src = "pics/play.png";  
           }  
         audio_%trackid%.play();  
         document.getElementById('%id%_%trackid%-button').src = "pics/play_active.png";  
         var lastplayed = document.getElementById('%id%_%trackid%');  
       }  
     else  
       {  // command: Stop!  
         audio_%trackid%.pause();  
         audio_%trackid%.currentTime = 0;  
         document.getElementById('%id%_%trackid%-button').src = "pics/play.png";  
       }  
     }  
</script>

[Der Martin]

Hallo,

Der Knackpunkt war, daß "getElementByName" und "getElementByTagName" wie ein Array arbeiten. Das wußte ich vorher nicht...

tja, ein bisschen Dokumentation lesen kann wahre Wunder wirken ...

Wenn du der Nachwelt nun vielleicht noch erklären magst, was die Myriaden von Prozent-Zeichen in deinem Codeauszug bedeuten sollen - HTML oder Javascript ist das jedenfalls nicht ...

Ciao,
 Martin

[Matthias Apsel]

Om nah hoo pez nyeetz, Der Martin!

Wenn du der Nachwelt nun vielleicht noch erklären magst, was die Myriaden von Prozent-Zeichen in deinem Codeauszug bedeuten sollen - HTML oder Javascript ist das jedenfalls nicht ...

lt. OP handelt es sich lediglich um Platzhalter: "die mit %eingeschlossenen% Werte werden per php mit tatsächlichen Kennungen ausgetauscht."

Matthias

[chris_blues]

tja, ein bisschen Dokumentation lesen kann wahre Wunder wirken ...

Wenn das Leben so einfach wär, gäbs diesen Thread nicht! Ist nicht so leicht, im Netz was zu finden, wenn man nicht weiß wonach man sucht!

Wenn du der Nachwelt nun vielleicht noch erklären magst, was die Myriaden von Prozent-Zeichen in deinem Codeauszug bedeuten sollen - HTML oder Javascript ist das jedenfalls nicht ...

Das sind wie gesagt Platzhalter, die per str_replace(); mit etwas sinnvollem ersetzt werden...

Jruß
chris