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.
(3 Stimmen, durchschnittlich: 4,67 von 5)
Loading...Abgelegt unter: E-Learning / neue Medien,Für Lehrende
11 Kommentare
1. Uwe Seibert | 22. Dezember 2009 um 09:33
Danke für den interessanten Beitrag. Das mit den Rechten ist immer wieder ein Problem. Audiodateien, authentische Texte, Bilder – woher nehmen und nicht stehlen?
Theoretisch kann man natürlich zu einer Datei im Netz verlinken, aber das ist eigentlich auch nicht okay: http://www.haller-mtl.de/homepage/hotlinking/hotlinking.html
Nastürlich gibt es auch rechtefreie Sachen, bzw. mit der erwähnten CC-Lizenz, aber das ist dann nicht immer das, was man gerade bräuchte.
2. Cornelia | 22. Dezember 2009 um 10:43
Glücklicherweise gibt es ja verschiedene Anbieter, die Embedcodes anbieten (Youtube, flickr, slideshare etc) und damit Hotlinking erlauben. Audio-Lingua erlaubt es wie oben erwähnt ja auch ganz explizit.
Dateien, die unter CC lizenziert sind, sollte man (unter beachtung der Lizenzbedingungen) auch auf den eigenen Server kopieren und da verlinken können. Ich habe aber – wenn angeboten – lieber embedcodes, vor allem dann wenn sie die Quellenangaben gleich selber mitliefern.
Allerdings heisst es wiedermal, dass man oft länger recherchieren muss, als man gerne würde und dass das perfekte Material aus urheberrechtlichen Gründen evtl. nicht zugänglich ist.
3. Cornelia | 23. Dezember 2009 um 09:41
… und dann gibt es ja auch noch die Möglichkeit, einfach den Link zu setzen und den Lernenden ein Arbeitsblatt in die Hand zu drücken. Viele lösen Aufgaben sowieso lieber auf Papier.
Natürlich ist auch dieses Verfahren nicht perfekt: die Lernenden finden zum Teil die Audio-Datei auf der verlinkten Seite nicht, je nach Übungstyp (zum Beispiel Zuordnen) ginge es auf dem Computer tatsächlich einfacher etc.
4. Martina Ramsauer | 15. Mai 2010 um 17:06
Liebe Cornelia,
ich habe deinen interessanten und detaillierten Beitrag nun verschiedene Male durchgelesen. So einiges verstehe ich und frage mich nun, warum ich es nicht schaffe meinen Hotpotatoesübungen Fotos beizufügen und embedcodes zu finden. Mit slideshares scheint das nicht zu funktionieren und auf meinem Server die Fotos im gleichen Order abzulegen wie die Übung klappt auch nicht. Vielleicht hast du auch hier einen Tipp.
Wie immer vielen Dank für all deine Informationen und einen schönen Abend.
Es grüss Martina
5. Cornelia | 30. Mai 2010 um 13:24
Liebe Martina
entschuldige, dass ich nicht geantwortet habe, aber ich hatte (und wenn ich ehrlich bin habe ich immer noch) sehr viel Stress und da mussten auch liebe Freizeitbeschäftigungen wie dieses Blog darunter leiden.
Bei hotpotatoes gibt es ein Icon zum Bilder einfügen – es ist für Bilder (wenn du sie selber hochladen kannst). Du musst dann darauf achten, dass die Verzeichnisstruktur auf deinem Compi gleich ist wie die auf dem Netz (gleiche Namen etc.).
Bei Flickr findest du die embedcodes nur, wenn du eingeloggt bist (ich glaube es heisst „blog this“ oder so.
Dann kommt es auch drauf an, wo du die Bilder einfügen willst. Nicht jede hotpot-Übung erlaubt das überall. Sicher geht es immer im Lesetext, aber den gibt es nicht bei jedem Übungsfomat.
Ich weiss nicht, ob dir das wieterhilft, aber aus deinem Kommentar kann ich auch leider nicht ersehen, wo das Problem genau liegen könnte.
6. Martina Ramsauer | 1. Juni 2010 um 18:29
Liebe Cornelia,
ich schreibe dir sofort, weil ich dir wirklich herzlich danken möchte für deine Mühe, die du dir trotz allem immer wieder für mich nimmst,
Zuerst eine gute Nachricht. Habe gestern eine JQuiz-Üebung mit Video gemacht, was sofort geklappt hat.
Wenn ich meine eigenen Fotos mit dem speziellen Icon in 1 Übung einfüge, wie auch du erwähnst, erscheinen die Fotos zwar auf der gespeicherten Datei. Sobald ich die
Datei/Übung aber auf den Server ziehe, oder auch z.B.auf den Desktop verschwinden die Bilder. Gleicher Name auf Compi +Netz beachte ich auch und trotzdem denke ich, dass ich irgend etwas nicht richtig verlinke. Ich hoffe, dass auch du bald ein bisschen Ferien geniessen kannst und grüsse dich herzlich Martina
7. Cornelia | 1. Juni 2010 um 18:42
Herzliche Gratulation zum Erfolg.
Zum Bilderproblem:
Das ist wohl so, weil dann die relativen Pfade für die Bilder nicht mehr stimmen. In einer html Datei wird nicht das Bild gespeichert, sondern der Speicherordner relativ zum Speicherpalatz der Datei (also wie viele Ordner hoch, in welchen Ordner wieder rein …). Dass heisst, dass du auf dem Server die genau gleiche Ordnerstruktur haben musst: wenn das Bild auf deinem Compi in einem Ordner „Bilder“ ist, der neben dem Ordner „Uebungen“ liegt, in dem deine Datei liegt, muss das auf dem Server auch so sein, sonst klappt es nicht.
8. Martina Ramsauer | 7. Juni 2010 um 08:38
Liebe Cornelia,
ich kann es kaum glauben, aber heute hat es wirklich geklappt mit den Fotos in der H.P. Übung.
Das kann ich vor allem dir verdanken!
Ich wünsche auch dir einen guten Tag.
Alles Liebe
Martina
9. Cornelia | 9. Juni 2010 um 06:53
Gratuliere: oder wie in der Installationsanleitung eines Opensourceprogramms am Ende stand: „Do a little dance and feel proud of yourself“.
LIebe Grüsse
Cornelia
10. Virginia | 15. September 2013 um 08:46
Liebe Cornelia,
ich habe mir vor 2 Tagen Hot Potatoes runtergeladen, weil es mich einfach fasziniert, selbst Übungen anzufertigen. Ich habe 2 Blogs, einen fpr DaF und einen für Französisch, wollte daher einige Übungen dort einbinden, aber ich habe es noch nicht geschafft.
Gibt es eine Möglichkeit, dies zu tun, ohne einen Server zu haben?
Danke dir vielmals im Voraus,
Lg, Virginia
11. Cornelia | 15. September 2013 um 10:16
Liebe Virginia
Ich kenne Blogspot nicht so gut. Kannst du da Dateien (wie z.B. pdf, word etc.) hochladen? Wenn ja, kannst du die html-Datei von Hotpotatoes dort hochladen und dann einfach auf die Datei linken.
Einbetten an sich geht mit Hotpotatoes übrigens gar nicht. Das Programm ist zu alt dazu, du musst also einen Link auf die Datei setzen und die Nutzer öffnen dann diese Datei, um die Übung zu machen.
Wenn du Übungen machen willst, die ähnlich sind, die du aber einbetten kannst (wenn dein Bloghost das zulässt) empfehle ich dir learning-apps.ch. Im Notfall kannst du auch auf diese Übungen linken.
Ich hoffe, es klappt.
Liebe Grüsse
Cornelia