{"id":1787,"date":"2009-12-22T05:45:21","date_gmt":"2009-12-22T04:45:21","guid":{"rendered":"http:\/\/cornelia.siteware.ch\/blog\/wordpress\/?p=1787"},"modified":"2009-12-25T08:34:55","modified_gmt":"2009-12-25T07:34:55","slug":"hot-potatoes-und-audio","status":"publish","type":"post","link":"https:\/\/cornelia.siteware.ch\/blog\/wordpress\/2009\/12\/22\/hot-potatoes-und-audio","title":{"rendered":"Hot-Potatoes und Audio"},"content":{"rendered":"<p>Gestern habe ich ein Beispiel f\u00fcr eine Hot-Potatoes-\u00dcbung mit Audio ver\u00f6ffentlicht. Dazu braucht man<\/p>\n<ul>\n<li>eine Hot-Potatoes erzeugte Html-Datei (zum Beispiel ein L\u00fcckentext, Multiple-Choice etc.)<\/li>\n<li>eine Audio-Datei und<\/li>\n<li>eine M\u00f6glichkeit sie abzuspielen.<\/li>\n<li>evtl. Speicherplatz auf einem Webserver.<\/li>\n<\/ul>\n<p>Zudem w\u00e4re es sch\u00f6n, wenn die Datei im selben Fenster abgespielt w\u00fcrde wie die \u00dcbung. Dazu nehmen wir am besten einen Flash-MP3-Player. Flash ist relativ weit verbreitet und l\u00e4uft (meistens) auf den verbreitetsten Betriebssystemen.<\/p>\n<p>Den Player laden wir gemeinsam mit der Hot-Potatoes-Datei hoch. Die Lernenden, die die \u00dcbung machen, brauchen also nur das installierte Flash-Plugin.<\/p>\n<p>Eine Auswahl von Flash-MP3-Playern findet man bei <a href=\"http:\/\/www.ewbooks.info\/hotpot\/tutorials\/hotpotatoes-tutorials\/flash-mp3-players.html?searched=audio+player&amp;advsearch=oneword&amp;highlight=ajaxSearch_highlight+ajaxSearch_highlight1+ajaxSearch_highlight2\">ewbooks.info\/hotpot\/tutorials\/hotpotatoes-tutorials\/<\/a>. Leider ist nicht angegeben, welche Lizenz die Player haben. Ich habe schliesslich <a href=\"http:\/\/www.alsacreations.fr\/dewplayer-en\">dewplayer<\/a> verwendet. Er steht laut dem Urheber unter einer CC-BY-ND-Lizenz. In der n\u00e4chsten Zeile schr\u00e4nkt er das dann aber wieder ein, indem er sagt, dass man den Player zwar f\u00fcr kommerzielle Zwecke verwenden, aber nicht weiterverkaufen d\u00fcrfe. Das habe ich zwar eh nicht im Sinn, aber solche Spezialeinschr\u00e4nkungen 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\u00e4tte.<\/p>\n<p>Zur\u00fcck zum Thema: Der gew\u00fcnschte Player wird nun also heruntergeladen und entzippt. Am einfachsten erzeugt man einen neuen Ordner\u00a0 und legt alle zum Player geh\u00f6renden Dateien da ab. In denselben Ordner geh\u00f6rt auch die selbst aufgenommene MP3-Datei (test.mp3). Jetzt m\u00fcssen 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.<\/p>\n<p>F\u00fcr den dewplayer sieht das so aus:<\/p>\n<p>&lt;object type=&#8220;application\/x-shockwave-flash&#8220; data=&#8220;<strong>dewplayer.swf<\/strong>&#8220; width=&#8220;200&#8243; height=&#8220;20&#8243; id=&#8220;dewplayer&#8220; name=&#8220;dewplayer&#8220;&gt;<br \/>\n&lt;param name=&#8220;movie&#8220; value=&#8220;dewplayer.swf&#8220; \/&gt;<br \/>\n&lt;param name=&#8220;flashvars&#8220; value=&#8220;mp3=<strong>test.mp3<\/strong>&#8220; \/&gt;<br \/>\n&lt;param name=&#8220;wmode&#8220; value=&#8220;transparent&#8220; \/&gt;<br \/>\n&lt;\/object&gt;<\/p>\n<p>Quelle: <a href=\"http:\/\/\">http:\/\/www.alsacreations.fr\/dewplayer-en<\/a><\/p>\n<p>Jetzt k\u00f6nnen 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\u00e4hnt auch die Playerdateien und die mp3-Datei test.mp3.\u00a0 Die Hot-Potatoes-Orignal-Datei m\u00fcssen wir nicht hochladen. Die Html-Datei reicht.<\/p>\n<p>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.<\/p>\n<p>Wenn wir ein bisschen mehr Ordnung haben wollen, k\u00f6nnen wir f\u00fcr die Playerdaten einen eigenen Ordner (player) anlegen. Da wir schon dabei sind, generieren wir auch f\u00fcr die Audio-Dateien einen Ordner (mp3). Beide Ordner stecken im Ordner hotpot_aufgaben, indem auch noch die html-Datei steckt. Jetzt m\u00fcssen wir den Code von oben aber ein bisschen ver\u00e4ndern:<\/p>\n<p>&lt;object type=&#8220;application\/x-shockwave-flash&#8220; data=&#8220;<strong>player\/dewplayer.swf<\/strong>&#8220; width=&#8220;200&#8243; height=&#8220;20&#8243; id=&#8220;dewplayer&#8220; name=&#8220;dewplayer&#8220;&gt;<br \/>\n&lt;param name=&#8220;movie&#8220; value=&#8220;dewplayer.swf&#8220; \/&gt;<br \/>\n&lt;param name=&#8220;flashvars&#8220; value=&#8220;mp3=<strong>mp3\/test.mp3<\/strong>&#8220; \/&gt;<br \/>\n&lt;param name=&#8220;wmode&#8220; value=&#8220;transparent&#8220; \/&gt;<br \/>\n&lt;\/object&gt;<\/p>\n<p>Wir k\u00f6nnen auch 3 Ordner nebeneinander stellen. In diesem Fall sieht der Code so aus:<\/p>\n<p>&lt;object type=&#8220;application\/x-shockwave-flash&#8220; data=&#8220;<strong>..\/player\/dewplayer.swf<\/strong>&#8220; width=&#8220;200&#8243; height=&#8220;20&#8243; id=&#8220;dewplayer&#8220; name=&#8220;dewplayer&#8220;&gt;<br \/>\n&lt;param name=&#8220;movie&#8220; value=&#8220;dewplayer.swf&#8220; \/&gt;<br \/>\n&lt;param name=&#8220;flashvars&#8220; value=&#8220;mp3=<strong>..\/mp3\/test.mp3<\/strong>&#8220; \/&gt;<br \/>\n&lt;param name=&#8220;wmode&#8220; value=&#8220;transparent&#8220; \/&gt;<br \/>\n&lt;\/object&gt;<\/p>\n<p>..\/ bedeutet, das wir aus dem aktuellen Ordner (hotpot_aufgaben) heraus in die n\u00e4chsth\u00f6here 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.<\/p>\n<p>So weit so gut. In den <a href=\"http:\/\/www.audio-lingua.eu\/spip.php?article103&amp;lang=de\">Nutzungsbedingungen<\/a> von Audio-Lingua steht nun aber, dass man die Audiodateien nicht auf einen fremden Server kopieren darf. Mit der obigen L\u00f6sung m\u00fcssten 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.<\/p>\n<p>Beispiel: &lt;param name=&#8220;flashvars&#8220; value=&#8220;mp3=<strong>http:\/\/www.audio-lingua.eu\/IMG\/mp3\/marion_stundenplan.mp3<\/strong>&#8220; \/&gt;<\/p>\n<p>Vermutlich m\u00fcsst ihr noch diese Zeile erg\u00e4nzen: <strong>&lt;param name=&#8220;allowScriptAccess&#8220; value=&#8220;always&#8220; \/&gt; <\/strong>Damit lasst ihr zu, dass der Player eine Datei abspielt, die sich auf einem anderen Server befindet.<\/p>\n<p>Das ganze sieht dann also zum Beispiel so aus (mit einem Ordner f\u00fcr die Player-Daten):<\/p>\n<p>&lt;object type=&#8220;application\/x-shockwave-flash&#8220; data=&#8220;player\/dewplayer.swf&#8220; width=&#8220;200&#8243; height=&#8220;20&#8243; id=&#8220;dewplayer&#8220; name=&#8220;dewplayer&#8220;&gt;<br \/>\n&lt;param name=&#8220;movie&#8220; value=&#8220;dewplayer.swf&#8220; \/&gt;<br \/>\n&lt;param name=&#8220;flashvars&#8220; value=&#8220;mp3=http:\/\/www.audio-lingua.eu\/IMG\/mp3\/marion_stundenplan.mp3&#8243; \/&gt;<br \/>\n&lt;param name=&#8220;wmode&#8220; value=&#8220;transparent&#8220; \/&gt;<br \/>\n&lt;param name=&#8220;allowScriptAccess&#8220; value=&#8220;always&#8220; \/&gt; &lt;\/object&gt;<\/p>\n<p>Was wir gerade gemacht haben, nennt man auch hotlinking. Viele Webseitenbetreiber m\u00f6gen das gar nicht, weil es ihnen Kosten verursacht. Jedes Mal, wenn jemand die Datei anh\u00f6rt, benutzt er die Kapazit\u00e4t des Servers, vielleicht ohne dass er \u00fcberhaupt weiss, dass er das tut. Audio-lingua w\u00fcnscht aber explizit, dass man die Datei bei ihnen verlinkt (man muss aber nat\u00fcrlich die Quelle nennen).<\/p>\n<p>Lokal hat das Einbinden einer Datei auf einem Server im Netz \u00fcbrigens nie funktioniert (die anfangs beschriebene Variante mit der lokal gespeicherten Datei aber schon). Meine Sicherheitseinstellungen f\u00fcr Flash waren zu streng. Wenn die Dateien im Netz sind (wie im <a href=\"http:\/\/cornelia.siteware.ch\/interaktive_uebungen\/stundenplan_marion.htm\">Beispiel<\/a>) ging&#8217;s dann aber ohne Probleme. Das Hot-Potatoes-Orginal-File zum Beispiel k\u00f6nnt ihr euch <a href=\"http:\/\/cornelia.siteware.ch\/blog\/wordpress\/wp-content\/uploads\/stundenplan.jcl\">hier<\/a> herunterladen.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Gestern habe ich ein Beispiel f\u00fcr eine Hotpotatoes-\u00dcbung mit Audio ver\u00f6ffentlicht. Im Beitrag k\u00f6nnt ihr nachlesen, wie das geht. <\/p>\n","protected":false},"author":24,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,11],"tags":[227,80,224,138,121,265,35],"_links":{"self":[{"href":"https:\/\/cornelia.siteware.ch\/blog\/wordpress\/wp-json\/wp\/v2\/posts\/1787"}],"collection":[{"href":"https:\/\/cornelia.siteware.ch\/blog\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cornelia.siteware.ch\/blog\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cornelia.siteware.ch\/blog\/wordpress\/wp-json\/wp\/v2\/users\/24"}],"replies":[{"embeddable":true,"href":"https:\/\/cornelia.siteware.ch\/blog\/wordpress\/wp-json\/wp\/v2\/comments?post=1787"}],"version-history":[{"count":5,"href":"https:\/\/cornelia.siteware.ch\/blog\/wordpress\/wp-json\/wp\/v2\/posts\/1787\/revisions"}],"predecessor-version":[{"id":1798,"href":"https:\/\/cornelia.siteware.ch\/blog\/wordpress\/wp-json\/wp\/v2\/posts\/1787\/revisions\/1798"}],"wp:attachment":[{"href":"https:\/\/cornelia.siteware.ch\/blog\/wordpress\/wp-json\/wp\/v2\/media?parent=1787"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cornelia.siteware.ch\/blog\/wordpress\/wp-json\/wp\/v2\/categories?post=1787"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cornelia.siteware.ch\/blog\/wordpress\/wp-json\/wp\/v2\/tags?post=1787"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}