(EMFF=Einfacher Musikplayer für Flash unter GPL-Lizenz*)
Der schnellste Weg, Musikdateien auf der Homepage anzubieten, ist die direkte Verlinkung nach folgendem Muster:
<a href="cschumann.mp3>C. Schumann – Scherzo</a>
Ergebnis ist ein Link, der so aussehen könnte: Scherzo von Schuman http://stellatest.de/audio/cschumann.mp3 (Musikbeispiel: C. Schumann - Scherzo in C minor Op. 14 / Felipe Sarro in: http://freemusicarchive.org/ )
Der Nachteil dieser Verlinkung besteht darin, dass der Benutzer die Datei herunterladen und einen geeigneten Player besitzen muss, wenn er die Datei hören will.
Je nach Voraussetzung, öffnet sich bei jedem Benutzer ein anderer Player oder er bekommt eine Fehlermeldung, wenn er zum Beispiel gar keinen Player besitzt.
Homepagebesucher, die auf Ihrem PC den kostenlosten VLC-Player installiert haben, sehen zum Beispiel im Firefox zunächst das Downloadfenster (siehe Abbildung) und wenn sie auf "Öffnen mit" klicken, das Fenster des VLC-Player.
Der Homepagegestalter hat bei dieser Lösung keinen Einfluss auf das Aussehen und die Funktion des Players. Da viele Anwender diesen Zusammenhang nicht kennen, werden Fehlfunktionen und verunglückte Darstellungen dem Webdesigner angelastet.
Eine Lösung für viele Fälle ist ein eigener Flash-Player in Form des "Einfachen Musikplayers für Flash" (EMFF) von Marc Reichelt. Es gibt in diesem Paket eine Auswahl an fertigen Lösungen, die sowohl privat als auch kommerziell genutzt werden dürfen, solange sich der Benutzer an die Lizenzregeln hält. Flash-Filme können in allen Browsern abgespielt werden, solange dese Funktion vom Benutzer nicht gesperrt wurde.
Sie sehen im folgenden Kasten drei Beispiele, die mit der EMFF-Entwicklungsumgebung erstellt wurden.
Flash-Player spielen neben animierten Grafiken, Videos und eben auch Audiodateien ab. Der Player ist ein kleiner Flash-Film (SWF-Datei), an den eine Variable mit der Pfadinformation zur abzuspielenden Audiodatei übergeben wird. Da dieser Flashplayer auf dem Server des Homepagebetreibers liegt, wird das Abspielen der Audiodatei so dargestellt, wie der Webdesigner es haben möchte.
Audiodatei im MP3-Format: Die Audiodatei, die Sie einbinden wollen, muss im MP3-Format vorliegen. Die eingangs verwendete Testdatei, das Scherzo von Clara Schumann, können Sie hier unter (http://stellatest.de/audio/cschumann.mp3) herunterladen.
Speichern Sie die Datei im oben angelegten Verzeichnis "emff" ab unter dem Namen "cschumann.mp3"
Diese Audiodatei dürfen Sie auf Ihrer Website anbieten, wenn Sie den Namen des Interpreten nennen. Auf der sicheren Seite sind Sie, wenn Sie auf Ihrer Homepage auf die Seite verweisen, auf der die Nutzungsfreigabe nachzulesen ist. In diesem Fall unter http://freemusicarchive.org/music/Felipe_Sarro/.... Auf dieser Seite finden Sie einen Code, der auf einen Flashplayer zurückgreift. Mit diesem Code können Sie das Klavierstück von Schumann auf Ihrer Seite einbinden. Der Player lautet "trackplayer.swf" und liegt auf der Internetseite "freemusicarchive.org".
Hier der Code einer HTML-Seite mit dem Code zur Einbindung des genannten Musikstückes. Kopieren Sie diesen Code in einen Text-Editor und speichern Sie die Datei zum Beispiel unter dem Namen cschumann.html ab. Öffnen Sie diese Datei mit Ihrem Internetbrowser, sehen Sie den Player und können das Scherzo abspielen.
Hier nur der Code ohne die umgebende HTML-Seite und anschließend die Darstellung des Players:
Nutzungsrechte: Beachten Sie bei Verwendung fremder Musikstücke unbedingt die Nutzungsrechte. Viele legal erworbene Musikdateien erlauben z.B. nur den persönlichen Musikgenuss, nicht aber die Wiederveröffentlichung auf Webseiten. Auch die GEMA erhebt bei vielen Musikveröffentlichungen Ansprüche. Eine Webseite, die sich mit dieser Problematik befasst und auch eine Reihe rechtlich unbedenklicher Musikstücke im MP3-Format zum Download anbietet, ist mp3-gema-frei.de/. Unter: http://www.stellaplan.de/audio finden Sie weitere Quellen. Mehr zum Thema finden Sie auch unter www.lehrerfortbildung-bw.de/sueb/recht/urh/musik/
Der abgebildete Player (emff_lila_info.swf) lässt sich unauffällig und elegant in Webseiten einbauen. Die Beschränkung auf wesentliche Funktionen und eine Darstellung, die jeder von einem CD-Player her kennt, ermöglicht eine intuitive Bedienung.
(Die Anzeige von Titel und Komponist in der abgebildeten Lösung setzt die Einbindung einer XML-Playerliste voraus. Ein Generator der XML-Playerliste wird im Verlauf dieser Dokumentation vorgestellt.)
Wenn Sie weitere EMFF-Player nutzen oder gestalten wollen, müssen Sie sich das EMFF-Paket zunächst von der EMFF-Website herunterladen: http://emff.sourceforge.net/. Nach dem Entpacken finden Sie im Ordner "skins" weitere SWF-Dateien mit vielen Playerdateien. (Andere Player können Sie einbinden, indem Sie diese in den Ordner "skins" laden und den entsprechenden Dateinamen in dem abgebildeten Quellcode anpassen.)
Im Feld URL zur MP3 Datei geben Sie den Pfad zur Audio-Datei ein. Da die HTML-Datei im selben Ordner liegt wie das Audiofile, können Sie hier eingeben: "cschumann.mp3" Liegt die Datei in einem anderen Ordner ode eventuell sogar auf einer anderen Seite, müssen Sie den kompletten Pfad (inklusive http://...) eingeben.
Damit auch der Autor und der Titel in der Kopfzeile des Players angezeigt werden, benötigen Sie eine Playlist. Diese erzeugen Sie mit dem "Playlistengenerator". Die aktuelle (englischsprachige) Version finden Sie unter http://emff.sourceforge.net/playlistgenerator/. (Auch hier gibt es eine nicht ständig aktualisierte deutschsprachige Version
(Playlistgeneratorhttp://www.stellatest.de/anleitungen/ton/emff/tools/playlistgenerator/index.html). Dieser Generator erzeugt den Code für die Playlistdatei.
So gehen Sie vor: 1. Klicken Sie auf Playlistgenerator und füllen Sie die Tabelle aus. 2. Erstellen Sie mit einem einfachen Texteditor eine leere Seite. 3. Kopieren Sie den Code des Playlistgenerators in die leere Datei und speichern Sie diese unter dem Namen "playlist.xml" im Ordner "emff" ab. In diesem Ordner befindet sich damit inzwischen:
-
die Datei playlist.xml,
-
die Seite test.html,
-
die Audiodatei schumann.mp3,
-
der Ordner skins darin
- die
Datei emff_lila_info.swf,
Die Checkbox HTML bzw. XHTML legt den HTML-Standard fest, nach dem der Code-Generator arbeiten soll. Wenn Sie XHTML statt HTML verwenden, werden die leeren <param>-Tags automatisch mit einem "/" geschlossen (<param ... />).
Die Checkbox Audiodatei startet automatisch veranlasst den Player, die Musikdatei beim Öffnen oder Aktualisieren einer HTML-Seite automatisch zu starten.
Die Checkbox Audiodatei wird ständig wiederholt veranlasst den Player, die Musikdatei endlos zu wiederholen.
Unter Skin können Sie ein Design auswählen. Eine Vorschau wird darunter angezeigt.
Im Auswahlmenü Hintergrundfarbe können Sie eine der vordefinierten Hintergrundfarben auswählen oder im Textfeld daneben Ihre eigene Farbe eingeben. Sogar ein transparenter Hintergrund ist möglich. Bei den Farben gibt es ebenfalls eine Vorschaufunktion (Im IE erst ab Version 8.0).
Im Textfeld "Alternativer Inhalt im HTML-Code" können Sie einen HTML-Code eingeben, der angezeigt wird, falls der Benutzer in seinem Browser das Abspielen von Flashfilmen unterbunden hat.
Erweiterte Optionen:
Die Checkbox Erste Musikdatei automatisch laden bewirkt, dass die Musikdatei schon während des Downloads abgespielt wird. Im anderen Fall muss erst die gesamte Musikdatei übertragen sein, bevor das Abspielen möglich ist.
Tastaturkürzel werden eingefügt, wenn Sie diese Funktion wählen.
Der generierte Code wird im unteren Teil des Generators angezeigt. Sie brauchen ihn nur noch über die Zwischenablage in den Quelltext Ihrer Webseite einfügen – und schon haben Sie einen fertigen kleinen Musikplayer, dessen Design Sie selbst bestimmen können!
Bevor Sie das oben genannte Beispiel testen, fügen Sie den Code für den Player in den body-Bereich (<body>...</body>) des HTML-Quelltextes der Testseite "test.html" ein:
<object data="skins/emff_lila_info.swf" type="application/x-shockwave-flash" style="height:70px; width:200px;"
<param name="movie" value="skins/emff_lila_info.swf">
<param name="FlashVars" value="src=cschumann.mp3&autostart=no">
<param name="FlashVars" value="playlist=playlist.xml" />
</object>
Der Code für die bereits erstellte Playlist mit dem Dateinamen "playlist.xml" lautet:
<?xml version="1.0" encoding="UTF-8"?>
<playlist version="1" xmlns="http://xspf.org/ns/0/">
<trackList>
<track>
<location>http://stellatest.de/audio/cschumann.mp3</location>
<title>Scherzo in C minor Op. 14</title>
<creator>C. Schumann</creator>
<trackNum>1</trackNum>
</track>
<track>
<location>http://stellatest.de/audio/cschumann.mp3</location>
<title>Scherzo</title>
<creator>Schumann2</creator>
<trackNum>2</trackNum>
</track>
</trackList>
</playlist>
wird beim Seitenaufruf angezeigt. Klickt man darauf, wird die Audiodatei abgespielt und das Symbol für "Player off" 
erscheint. Ein Klick auf "Player off" bendet das Abspielen der Audiodatei. soll in 
, das Symbol "Player stopp" in 
geändert werden.
Inhalt des EMFF-Ordners
Beim Entpacken entstehen gelegentlich mehrere Unterordner. Kopieren Sie den Inhalt des letzten EMFF-Ordners (dieser lautet z.B. "emff_0.5.8" in den bereits erstellten Ordner "EMFF". In diesem befinden sich anschließend die links abgebildeten Ordner und Dateien. (Skins, die sich bereits dort befinden können Sie überschreiben.)
Der neue EMFF (ab Version 0.5) hat eine einfaches Skin-System. Jedes Skin besitzt sein eigenes Verzeichnis innerhalb des Verzeichnisses "skins". Alle Quell-Dateien für das Skin "standard" sind im Verzeichnis "standard" zu finden und so weiter.
Entpacken Sie die Zipdatei von MTASC (mtasc-1.14.zip) und legen Sie die Dateien in den schon vorhandenen Ordner "Tools" des Flashplayerverzeichnisses EMFF.
Zusätzlich zu den bereits vorhandenen Dateien des EMFF enthält der Ordner Tools jetzt nebenstehende Ordner und Dateien.
Entpacken Sie die Zip-Datei (swfmill-0.3.1-win32.zip) und legen Sie den Inhalt des Ordners in den Ordner Tools des EMFF-Players.Die Dateien, die sich jetzt zusätzlich in dem Ordner Tools befinden, sehen Sie in der Abbildung.
(Sollten Sie keinen Zugriff auf die Konsole besitzen, können Sie den Test mit der weiter unten beschriebenen Batch-Datei durchführen.)
Sie können jetzt Ihre eigenen Skins erstellen. Das Javaprogramm "CreateSkin" liest die Dateien im jeweiligen skin-Verzeichnis und ruft die Programme mtasc.exe und swfmill.exe auf, die nach den Einstellungen die SWF-Dateien erzeugen. Folgende Schritte werden ausgeführt:
Bei größeren Änderungen im EMFF-Code können Sie mit einem Befehl alle SWF-Dateien neu erzeugen: java -cp . CreateSkin ALL
Wollen Sie ein existierendes Skin überarbeiten, ändern Sie im ersten Schritt die Dateien im Verzeichnis des ensprechenden skins und starten dann den Befehl mit dem Ordner-Namen des bearbeiteten Skins: java -cp . CreateSkin <OrdnernameDesSkins>
Bevor Sie ein eigenes Skin erstellen, kopieren Sie den Ordner eines existierendes Skins und geben Sie diesem Verzeichnis einen beliebigen Namen (nur Kleinbuchstaben, Zahlen und das Zeichen "_" sind erlaubt). Bearbeiten Sie die "SKIN"-Datei nach Ihren Bedürfnissen.
Kopieren Sie im Ordner skins, wie beschrieben, den Ordner "silk_button" und fügen die Kopie unter dem neuen Ordnernamen "silk_button_neu" hinzu.
Öffnen Sie in dem Unterordner library mit einem Grafikprogramm die Dateien player_play.png und player_stop.png. Wollen Sie die Buttongrafiken ändern, sollten Sie beim ersten Versuch die Grafikeigenschaften sowie die Namen und Schreibweise der Bilddateien beibehalten. Untersuchen Sie Größe und Auflösung der Dateien und speichern Sie neue Grafikelemente unter der gleichen Einstellung. Wollen Sie die Größe der Bilddatei ändern, sollten Sie dies auch in der dazugehörigen XML-Datei (skin.xml) tun.
(Im Downloadpaket zu dieser Anleitung finden Sie einen Ordner "silk_button_neu" mit zwei neue Grafiken. Die Größe unterscheidet sich von der Buttongröße der Vorlage. In der XML-Datei skin.xml muss diese Größe daher entsprechend geändert werden.)
Im Anschluss an die Grafikbearbeitung starten Sie den Befehl zur Neugenerierung aller Skins. Den aktuellen Skin starten Sie, in dem Sie den Ordnernamen im Befehl ausführen: java -cp . CreateSkin silk_button_neu . Es wird jetzt eine neue SWF-Datei, mit dem Namen "emff_silk_button_neu.swf" erstellt und in den Ordner skins geschrieben.
Es sind weitergehende Programmkenntnisse notwendig, wenn Sie auch die Funktion eines Skins ändern wollen.
Links: Die folgende weiterführende Links könnten hilfreich sein:
Flash Documentation http://www.adobe.com/support/documentation/en/flash/ (wichtig: EMFF benutzt ActionScript 2.0, nicht 3.0!)
Using swfmill http://swfmill.org/doc/using-swfmill.html (für die Datei "skin.xml")
EMFF und alle anderen Inhalte (der Code Generator und diese Dokumentation) stehen unter GPL-Lizenz.
Sie können die Lizenzbedingungen unter http://www.gnu.org/licenses/gpl.html einsehen.Eine nicht offiziell deutsche Übersetzung können Sie einsehen unter: http://www.gnu.de/documents/gpl-3.0.de.htmlSie dürfen EMFF in kommerziellen und nicht kommerziellen Projekten nutzen (solange Sie EMFF selbst nicht verändern).
johannes.bucka@t-online.de. Diese Anleitung steht unter Creative Commons Lizenz: Namensnennung | Keine kommerzielle Nutzung | Weitergabe unter gleichen Bedingungen (http://de.creativecommons.org/).