DaF-Blog

Hot-Potatoes und Audio

22. Dezember 2009

Gestern habe ich ein Beispiel für eine Hot-Potatoes-Übung mit Audio veröffentlicht. Dazu braucht man

• eine Hot-Potatoes erzeugte Html-Datei (zum Beispiel ein Lückentext, Multiple-Choice etc.)
• eine Audio-Datei und
• eine Möglichkeit sie abzuspielen.
• evtl. Speicherplatz auf einem Webserver.

Zudem wäre es schön, wenn die Datei im selben Fenster abgespielt würde wie die Übung. Dazu nehmen wir am besten einen Flash-MP3-Player. Flash ist relativ weit verbreitet und läuft (meistens) auf den verbreitetsten Betriebssystemen.

Den Player laden wir gemeinsam mit der Hot-Potatoes-Datei hoch. Die Lernenden, die die Übung machen, brauchen also nur das installierte Flash-Plugin.

Eine Auswahl von Flash-MP3-Playern findet man bei ewbooks.info/hotpot/tutorials/hotpotatoes-tutorials/. Leider ist nicht angegeben, welche Lizenz die Player haben. Ich habe schliesslich dewplayer verwendet. Er steht laut dem Urheber unter einer CC-BY-ND-Lizenz. In der nächsten Zeile schränkt er das dann aber wieder ein, indem er sagt, dass man den Player zwar für kommerzielle Zwecke verwenden, aber nicht weiterverkaufen dürfe. Das habe ich zwar eh nicht im Sinn, aber solche Spezialeinschränkungen sind nicht gerade transparent und laufen dem Sinn von CC meines Erachtens zuwider, denn jetzt heisst es ja, dass der Player unter der By-ND-Lizenz stehe, aber nicht ganz. Immerhin ist so klar, was der Urheber will und das ist ja eigentlich das, was ich oft gerne hätte.

Zurück zum Thema: Der gewünschte Player wird nun also heruntergeladen und entzippt. Am einfachsten erzeugt man einen neuen Ordner  und legt alle zum Player gehörenden Dateien da ab. In denselben Ordner gehört auch die selbst aufgenommene MP3-Datei (test.mp3). Jetzt müssen wir in der Hot-Potatoes-Datei angeben, wo der Player ist (bzw. wie die Datei mit dem Player heisst: Meistens endet sie auf swf). Das machen wir mit einem so genannten Embed-Code. Die meisten Player liefern die Angaben in einer .txt-Datei im Zip-File mit.

Für den dewplayer sieht das so aus:

<object type=”application/x-shockwave-flash” data=”dewplayer.swf” width=”200″ height=”20″ id=”dewplayer” name=”dewplayer”>
<param name=”movie” value=”dewplayer.swf” />
<param name=”flashvars” value=”mp3=test.mp3” />
<param name=”wmode” value=”transparent” />
</object>

Quelle: http://www.alsacreations.fr/dewplayer-en

Jetzt können wir die Html-Datei erzeugen (mit dem Spinnennetzsymbol). Wir laden sie in einen Ordner auf dem Netz (z.B. hotpot_aufgaben). In denselben Ordner kommen wie erwähnt auch die Playerdateien und die mp3-Datei test.mp3.  Die Hot-Potatoes-Orignal-Datei müssen wir nicht hochladen. Die Html-Datei reicht.

Dass sich die Dateien im Ordner hotpot_aufgaben befinden, spielt im Prinzip keine Rolle. Der Ordner kann auch irgendwie anders heissen. Mit obigem Code werden Audio-Datei und Player im gleichen Ordner gesucht, in dem auch die generierte Html-Datei steckt.

Wenn wir ein bisschen mehr Ordnung haben wollen, können wir für die Playerdaten einen eigenen Ordner (player) anlegen. Da wir schon dabei sind, generieren wir auch für die Audio-Dateien einen Ordner (mp3). Beide Ordner stecken im Ordner hotpot_aufgaben, indem auch noch die html-Datei steckt. Jetzt müssen wir den Code von oben aber ein bisschen verändern:

<object type=”application/x-shockwave-flash” data=”player/dewplayer.swf” width=”200″ height=”20″ id=”dewplayer” name=”dewplayer”>
<param name=”movie” value=”dewplayer.swf” />
<param name=”flashvars” value=”mp3=mp3/test.mp3” />
<param name=”wmode” value=”transparent” />
</object>

Wir können auch 3 Ordner nebeneinander stellen. In diesem Fall sieht der Code so aus:

<object type=”application/x-shockwave-flash” data=”../player/dewplayer.swf” width=”200″ height=”20″ id=”dewplayer” name=”dewplayer”>
<param name=”movie” value=”dewplayer.swf” />
<param name=”flashvars” value=”mp3=../mp3/test.mp3” />
<param name=”wmode” value=”transparent” />
</object>

../ bedeutet, das wir aus dem aktuellen Ordner (hotpot_aufgaben) heraus in die nächsthöhere Ebene gehen (dort befinden sich die Ordner hotpot_aufgaben, mp3 und player). Der Pfad gibt weiter an, in welchem Ordner sich die Datei befindet, und wie sie heisst.

So weit so gut. In den Nutzungsbedingungen von Audio-Lingua steht nun aber, dass man die Audiodateien nicht auf einen fremden Server kopieren darf. Mit der obigen Lösung müssten wir aber genau das tun. Man kann aber auch direkt auf eine Mp3-Datei im Netz verlinken. Dazu geben wir die Adresse der Datei bei Audiolingua ein.

Beispiel: <param name=”flashvars” value=”mp3=http://www.audio-lingua.eu/IMG/mp3/marion_stundenplan.mp3” />

Vermutlich müsst ihr noch diese Zeile ergänzen: <param name=”allowScriptAccess” value=”always” /> Damit lasst ihr zu, dass der Player eine Datei abspielt, die sich auf einem anderen Server befindet.

Das ganze sieht dann also zum Beispiel so aus (mit einem Ordner für die Player-Daten):

<object type=”application/x-shockwave-flash” data=”player/dewplayer.swf” width=”200″ height=”20″ id=”dewplayer” name=”dewplayer”>
<param name=”movie” value=”dewplayer.swf” />
<param name=”flashvars” value=”mp3=http://www.audio-lingua.eu/IMG/mp3/marion_stundenplan.mp3″ />
<param name=”wmode” value=”transparent” />
<param name=”allowScriptAccess” value=”always” /> </object>

Was wir gerade gemacht haben, nennt man auch hotlinking. Viele Webseitenbetreiber mögen das gar nicht, weil es ihnen Kosten verursacht. Jedes Mal, wenn jemand die Datei anhört, benutzt er die Kapazität des Servers, vielleicht ohne dass er überhaupt weiss, dass er das tut. Audio-lingua wünscht aber explizit, dass man die Datei bei ihnen verlinkt (man muss aber natürlich die Quelle nennen).

Lokal hat das Einbinden einer Datei auf einem Server im Netz übrigens nie funktioniert (die anfangs beschriebene Variante mit der lokal gespeicherten Datei aber schon). Meine Sicherheitseinstellungen für Flash waren zu streng. Wenn die Dateien im Netz sind (wie im Beispiel) ging’s dann aber ohne Probleme. Das Hot-Potatoes-Orginal-File zum Beispiel könnt ihr euch hier herunterladen.

Verwandte Beiträge (automatisch generiert)

• Audio-Dialoge ordnen (3)
• Videos in Hot-Potatoes-Übungen (3)
• Stundenplan (0)
• Anleitung: Audioordnungsübungen (1)
• Schweizer Kinderreime (5)

(3 Stimmen, durchschnittlich: 4.67 von 5)

 Laden ...

Abgelegt unter: E-Learning / neue Medien, Für Lehrende

Tags:Anleitungen, Audio, audio-lingua, Autorensoftware, Creative Commons, Hotpotatoes, technische Tipps