selektierten Song aus der ListBox abspielen

[matti]

hi,

also ich habe zwei WebSeiten: Auf der ersten werden verschiedene Musiker angezeigt von denen Links zur zweiten Seite führen und in der url jeweils die entsprechende ID zum musiker haben. Somit werden dann in der zweiten webseite je nach dem Parametervalue die entsprechenden verfügbaren Songs zu dem Musiker angezeigt. Jetzt möchte ich aber noch neben der ListBox einen play und stop button haben. Das heißt wenn der user auf play klickt wird das selektierte Lied von der ListBox abgespielt. Das was ich an JavaScript bis jetzt habe sieht so aus:

  
    <script language="javascript" type="text/javascript">  
      <!--  
       var formular = new Array(0);  
       decode();  
  
    /* Diese Funktion decodiert die Angaben im Pfad */  
  
      function decode()  
       {  
        var url   = window.location.search;  
        if (url != "")  
         {  
          url = url.substring(1,url.length);                      // Die Daten werden aus der  
                                                                  // Url extrahiert und in  
          liste = url.split("&");                                 // Wertepaare am & getrennen  
          for (i=0;i<=liste.length-1;i++)  
           {  
            temp = liste[i].split("=");                           // Feld und Daten jedes  
            formular.splice(formular.length,2,temp[0],temp[1]);   // Paares werden zerlegt  
           }  
          for (i=0;i<=formular.length-1;i++)  
          {  
           formular[i] = formular[i].replace(/\+/g," ");  
              // Ersetzen des + durch Blank  
           formular[i] = unescape(formular[i]);                   // Escapesequenzen rekonstruieren  
          }  
         }  
       }  
  
        <!--  
         for (var i=0;i<formular.length;i++)  
         {  
       var musician = formular[++i];  
         }  
        //-->  
  
             if (musician == "mozart")  
       {  
        document.write("<select name=\"Auswahl\" size=\"8\" onchange=\"CheckAuswahl(this.value)\">");  
      document.write("<option>Lied1</option>");  
      document.write("<option>Lied2</option>");  
      document.write("</select>");  
     }  
       </script>  

Also mit dem onChange und der Übergabe des Song-titles ist das kein problem. Aber ich möchte jetzt gerne neben der Listbox einen Play-Button erstellen und wenn man auf diesen klickt wird das lied das in der listbox selektiert ist abgespielt.

Mit <embed src="...> kann ich ja ein audio-file einbinden, nur sind da bei mir leider noch zwei Unklarheiten:

a) Wie kann ich im embed src="..." das jeweils selektierte Lied aus der ListBox angeben?

b) Kann man das definieren, dass das lied dann erst anfängt zu spielen, wenn man auf den play-button klickt?

wäre super, wenn mir da jemand weiterhelfen könnte!

mfg matti

[matti]

hi,

hat keiner wenigstens eine Idee...? :(

mfg
matti

[Marc Reichelt]

Hallo matti,

hat keiner wenigstens eine Idee...? :(

Also, ich würde den EMFF über JavaScript einbinden. Wenn du dir den Quelltext dieser Seite mal anschaust und von dort die entsprechende SWF-Datei kopierst, kannst du recht einfach einen simplen Play/Stop-Knopf zum Abspielen erzeugen.
Der EMFF spielt natürlich nur MP3s ab, was aber weniger das Problem sein sollte.
Weitere Lektüre: "Musik W3C-konform in Webseiten einbinden"

Grüße

Marc Reichelt || http://www.marcreichelt.de/

[matti]

hi,

vielen Dank für den Hinweis, das sieht nach einer guten Lösung aus, nur kann ich das jetzt auch definieren, dass wenn ich beim EMFF auf Play klicke, dass diese Datei abgespielt wird, die gerade in der ListBox selektiert ist...? :(

lg matti

[matti]

hi,

ich habe es so versucht:

  
var adresse;  
  
function sound() {  
  
for (var i=0;i<document.getElementsByTagName("select")[0].options.length;i++)  
{  
if (document.getElementsByTagName("select")[0].options[i].selected == true)  
{  
adresse = document.getElementsByTagName("select")[0].options[i].value;  
return adresse;  
}  
  
}  

  
<object type="application/x-shockwave-flash" data="emff_wooden.swf?src=javascript:sound()" width="120" height="60">  
   <param name="movie" value="emff_wooden.swf?src=javascript:sound()" />  
   <param name="quality" value="high" />  
</object>  

das funktioniert aber nicht, die sound-funktion wird zwar aufgerufen, aber der player startet nicht.

gibts dafür eine lösung??

lg matti

[matti]

Geht das wirklich nicht, dass man dem EMFF player eine mp3-datei als variable übergibt? - muss man wirklich gleich immer die mp3-datei selbst angeben...?? :(((

lg matti

[Marc Reichelt]

Hallo matti,

<object type="application/x-shockwave-flash" data="emff_wooden.swf?src=javascript:sound()" width="120" height="60">
   <param name="movie" value="emff_wooden.swf?src=javascript:sound()" />
   <param name="quality" value="high" />
</object>

>   
> das funktioniert aber nicht, die sound-funktion wird zwar aufgerufen, aber der player startet nicht.  
  
Natürlich funktioniert das nicht - sollte es auch nicht. Bei src kann eine normale URL übergeben werden, aber doch kein JavaScript-Code. (OK, er kann doch übergeben werden, aber damit wird nichts sinnvolles angestellt).  
Ich meinte damit dass du beispielsweise ein <div>-Element hast (hier mit einem id-Attribut id="mydivelement", dessen Inhalt du via JavaScript ändern kannst. Dort schreibst du dann - via JavaScript! - den entsprechenden HTML-Code für das Objekt hinein.  
  
Aufruf beispielsweise folgendermaßen:  
  
~~~javascript
  
var musikDatei = "eins.mp3";  
document.getElementById("mydivelement").innerHTML = "<object ... data=\"emff_wooden.swf?src=" + musikDatei + "\" ... ";  

Grüße

Marc Reichelt || http://www.marcreichelt.de/

[matti]

Hi,

das habe ich eben leider auch schon probiert, im html-code habe ich:

  
<div id="mydivelement">  
</div>  

und dann in javascript:

  
<script>  
var musikDatei = "example.mp3";  
document.getElementById("mydivelement").innerHTML = "<object ... data=\"emff_wooden.swf?src=" + musikDatei + "\" width=\"120\" height=\"60\">";  
document.getElementById("mydivelement").innerHTML = "<param name=\"movie\" value=\"emff_wooden.swf?src=" + musikDatei + "\" />";  
document.getElementById("mydivelement").innerHTML = "<param name=\"quality\" value=\"high\"/>";  
document.getElementById("mydivelement").innerHTML = "</object>";  
</script>  

und auch so hab ich es probiert:

  
<script>  
 var adresse = "example.mp3";  
 document.write("<object type=\"application/x-shockwave-flash\" data=\"emff_wooden.swf?src=\" + adresse + \" width=\"120\" height=\"60\">");  
 document.write("<param name=\"movie\" value=\"emff_wooden.swf?src=\" + adresse + \" />");  
 document.write("<param name=\"quality\" value=\"high\"/>");  
 document.write("</object>");  
  
</script>  

Bei beiden Varianten wird nicht mal der Player angezeigt.
Kannst du mir noch einaml weiterhelfen um dieses Problem noch zu lösen??

lg matti

[Marc Reichelt]

Hallo matti,

Bei beiden Varianten wird nicht mal der Player angezeigt.
Kannst du mir noch einaml weiterhelfen um dieses Problem noch zu lösen??

Ich glaube, du solltest dich generell ein wenig mit JavaScript beschäftigen, bevor du ständig nichtfunktionalen Code produzierst und dann hier im Forum fragst, warum dieser nicht funktioniert.

Ich nehme deinen Code einmal Stück für Stück auseinander:

<script>

Ist schon mal falsch. Es heißt:
<script type="text/javascript">

Weiter geht's:

var musikDatei = "example.mp3";  
document.getElementById("mydivelement").innerHTML = "<object ... data=\"emff_wooden.swf?src=" + musikDatei + "\" width=\"120\" height=\"60\">";

Da hast du wohl einfach meinen Code kopiert, ohne dir dabei zu denken, dass die Pünktchen als Platzhalter gedacht sind. Richtig heißt es:

var musikDatei = "example.mp3";  
document.getElementById("mydivelement").innerHTML = "<object type=\"application/x-shockwave-flash\"  data=\"emff_wooden.swf?src=" + musikDatei + "\" width=\"120\" height=\"60\">";

Und weiter geht's:

document.getElementById("mydivelement").innerHTML = "<param name=\"movie\" value=\"emff_wooden.swf?src=" + musikDatei + "\" />";  
document.getElementById("mydivelement").innerHTML = "<param name=\"quality\" value=\"high\"/>";  
document.getElementById("mydivelement").innerHTML = "</object>";

</script>

Hier scheint soweit alles korrekt zu sein.

Allerdings gibt es noch einen Fehler, der sich durch den ganzen Quellcode zieht: Mit innerHTML = "HTML-Text"; überschreibst du stets die Variable innerHTML.

Wenn du am Ende folgende Zeile aufrufst:
alert(document.getElementById("mydivelement").innerHTML);
dürfte im darauf erscheinenden Meldefenster nur "</object>" erscheinen - klar, dass das Objekt nicht angezeigt werden kann.

Schau dir mal den folgenden Code (ungetestet) an - der sollte genau das machen, was du möchtest:

// im Beispiel verwenden wir die Musikdatei "example.mp3" - die Variable wird später logischerweise geändert  
var musicfile = "example.mp3";  
// für einen kürzeren Zugriff speichern wir uns den Container ab  
var container = document.getElementById("mydivelement");  
  
container.innerHTML = "<object type=\"application/x-shockwave-flash\" data=\"emff_wooden.swf?src="  
                    + musicfile + "\" width=\"120\" height=\"60\">\n"  
                    + "  <param name=\"movie\" value=\"emff_wooden.swf?src=" + musicfile + "\" />\n"  
                    + "  <param name=\"quality\" value=\"high\" />\n"  
                    + "</object>";

Um JavaScript zu lernen empfehle ich dir das entsprechende SELFHTML-Kapitel.

Grüße

Marc Reichelt || http://www.marcreichelt.de/

[matti]

hi,

danke für deine ausführliche antworte, habe jetzt auch mich bisschen weiter vertieft in javascript leider ist noch ein problem aufgetreten.

Ich habe ganz oben auf der seite diese variable definiert:

  
var musicfile;  

Weiter unten habe ich dann den player eingefügt:

  
<script type="text/javascript">  
musicfile = sound();  
var container = document.getElementById("mydivelement");  
  
container.innerHTML = "<object type=\"application/x-shockwave-flash\" data=\"emff_standard.swf?src="  
+ musicfile + "\" width=\"120\" height=\"60\">\n"  
+ "  <param name=\"movie\" value=\"emff_standard.swf?src=" + musicfile + "\" />\n"  
+ "  <param name=\"quality\" value=\"high\" />\n"  
+ "</object>";  
</script>  

und die sound()-funktion sieht folgendermaßen aus:

  
function sound() {  
  
for (var i=0;i<document.getElementsByTagName("select")[0].options.length;i++)  
{  
if (document.getElementsByTagName("select")[0].options[i].selected == true)  
{  
adresse = document.getElementsByTagName("select")[0].options[i].value;  
   var adresse1 = "audio/" + adresse + ".mp3";  
   musicfile = adresse1;  
   return adresse1;  
}  
  
}  
}  

wenn ich auf die seite dann gehe, wird das erste lied auch angespielt, nur wenn ich dann ein anderes lied aus der listbox auswähle und wieder auf play klicke, dann wird wieder nur das erste lied angespielt. ich habe auch in der select anweisung ein onchange drinnen, das dann die sound() funktion aufruft.

ist da noch ein kleiner denkfehler drinnen...?

lg matti

[Marc Reichelt]

Hallo matti,

ist da noch ein kleiner denkfehler drinnen...?

Allerdings. Mit der return-Anweisung wird die Funktion abgebrochen und der entsprechende Wert zurückgegeben. Da nützt auch eine Schleife nichts - der erste Wert (bei i=0) wird zurückgegeben.
Du könntest beispielsweise der Funktion sound() einen Parameter übergeben, etwa so:

sound(var i) {  
  // weiterer Code, ohne for-Schleife  
}

Da brauchst du auch keine for-Schleife mehr, sondern du rufst von der entsprechenden Stelle sound() mit der Nummer des Sounds auf, den du haben möchtest, also beispielsweise sound(0) für den ersten Sound, etc.
Eine Variablenübergabe ist dann natürlich auch möglich:
musicfile = sound(selectedIndex);

Grüße

Marc Reichelt || http://www.marcreichelt.de/

[matti]

hi,

hmm...ich brauche doch die for-Schleife, sonst weiß ich ja nicht, welche titel in der listbox selektiert wurde, wenn ich auf den play button klicke...wie meinst du das, welchen wert soll ich als parameter übergeben der variable sound? - den index des selektierten titels der listbox? - aber ich weiß ja erst welcher titel in der listbox selektiert wurde, wenn die for-schleife durchlaufen wurde...?

mfg
matti

[Marc Reichelt]

Hallo matti,

hmm...ich brauche doch die for-Schleife, sonst weiß ich ja nicht, welche titel in der listbox selektiert wurde, wenn ich auf den play button klicke...wie meinst du das, welchen wert soll ich als parameter übergeben der variable sound? - den index des selektierten titels der listbox? - aber ich weiß ja erst welcher titel in der listbox selektiert wurde, wenn die for-schleife durchlaufen wurde...?

Nein, du weißt das schon vorher:
var musicfile = sound(document.Testform.Auswahl.selectedIndex);

Das setzt in diesem Fall voraus, dass dein Formular den Namen "Testform" und dein <select>-Objekt den Namen "Auswahl" bekommen hat - du kannst es ja entsprechend ändern.

Siehe SELFHTML: JavaScript / Objektreferenz / options => selectedIndex.

Im Übrigen könntest du dir es noch viel leichter machen, wenn du deinem <select>-Element (bzw. den Options darin) Werte vergibst:

  
<form name="soundform">  
  <select name="soundchoice">  
    <option value="lied1.mp3">Lied 1</option>  
    <option value="lied2.mp3">Lied 2</option>  
    <option value="lied3.mp3">Lied 3</option>  
  </select>  
</form>

Auf den aktuell selektierten Wert lässt sich hierbei nämlich ganz einfach folgendermaßen zugreifen:

var i = document.soundform.soundchoice.selectedIndex;  
var musicfile = document.soundform.soundchoice.options[i].value;

Siehe auch SELFHTML: JavaScript / Objektreferenz / options => value.

Grüße

Marc Reichelt || http://www.marcreichelt.de/

[matti]

hi,

das ist klar, aber das komische ist folgendes: ich habe es nochmal bisschen umgebaut: ich habe ja musicfile global definiert ganz oben. und wenn in der auswahl ein neuer titel selektiert wird, wird im onChange des select-tags die Methode refresh(this.value) aufgerufen, die dann folgendermaßen aussieht:
[code lang=javascript]
function refresh(value)
{
  musicfile = "audio/" + value + ".mp3";
}
das heißt im musicfile wird der neu selektierte titel gespeichert (Die Variable musicfile wird ja als Argument für den Songtitel im EMFF-Player verwendet). Aber wenn ich dann auf play gehe im EMFF-player wird trotzdem nur der selektierte Titel gespielt der zu Beginn bei Aufruf der Seite selektiert war (der code vom EMFF-player sieht gleich aus, wie den den du vorher gepostet hast.)

Aber der code stimmt ja jetzt oder? - kann man dem EMFF-player dynamisch keinen neuen Wert zuweisen bzw. kann man dem EMFF-Player nur zu Beginn bei Aufruf der Seite einmalig einen Wert zuweisen?

lg matti

[Marc Reichelt]

Hallo matti,

[code lang=javascript]
function refresh(value)
{
  musicfile = "audio/" + value + ".mp3";
}
das heißt im musicfile wird der neu selektierte titel gespeichert (Die Variable musicfile wird ja als Argument für den Songtitel im EMFF-Player verwendet). Aber wenn ich dann auf play gehe im EMFF-player wird trotzdem nur der selektierte Titel gespielt der zu Beginn bei Aufruf der Seite selektiert war (der code vom EMFF-player sieht gleich aus, wie den den du vorher gepostet hast.)

Du gehst also davon aus, dass wenn du die Variable "musicfile" änderst auch gleich das Objekt neu geschrieben wird? Nein, das musst du schön von Hand mittels innerHTML erledigen.

Grüße

Marc Reichelt || http://www.marcreichelt.de/

[matti]

hi,

oh, so muss ich einfach diesen code:

  
var container = document.getElementById("mydivelement");  
  
container.innerHTML = "<object type=\"application/x-shockwave-flash\" data=\"emff_wooden.swf?src="  
+ musicfile + "\" width=\"120\" height=\"60\">\n"  
+ "  <param name=\"movie\" value=\"emff_wooden.swf?src=" + musicfile + "\" />\n"  
+ "  <param name=\"quality\" value=\"high\" />\n"  
+ "</object>";  

auch in die refresh-funktion mit reinnehmen, oder?

lg matti

[Marc Reichelt]

Hallo matti,

oh, so muss ich einfach diesen code:
[...]
auch in die refresh-funktion mit reinnehmen, oder?

Wieso probierst du es nicht selbst aus?
Ich gebe dir mal Tipps, wie du selbst (ohne Rückfragen) fehlerfreie Skripte in JavaScript schreiben kannst:

1. Aufgabenstellung erfassen (möglichst immer in kleine Teilaufgaben unterteilt).
2. Für jede Teilaufgabe eine Lösung finden. Das geht vor allem mit der SELFHTML-Dokumentation zu JavaScript sehr gut.
3. Jede Teilaufgabe durch einen möglichst kurzen JavaScript-Code bearbeiten. Die SELFHTML Doku hilft dabei mit kurzen Beispielen. Dabei jede Teilaufgabe auf Funktionalität prüfen - ob sie auch das macht, was du möchtest. Die JavaScript-Konsole des Browsers Firefox könnte dir dabei extrem hilfreich zur Seite stehen.
4. Jede Teilaufgabe mit einen kurzen Kommentar versehen, damit du später auch noch weißt, was die Teilaufgabe ist.
5. Nachdem alle Teilprobleme gelöst sind, das Gesamtwerk testen. Wieder hilft dir die JavaScript-Konsole dabei.

Grüße

Marc Reichelt || http://www.marcreichelt.de/