Fachbeitrag
Gestaltbarer Musikspieler: MP3s mit Flash abspielen

Spätestens seit Flash 7 funktioniert die Integration von Musikdateien in HTML-Webseiten einwandfrei. Das Audio-Streaming-Werkzeug Simplay ermöglicht jetzt jedem Webmaster, eigene MP3s auf seiner Website hörbar zu machen. Flash-Kenntnisse sind dafür nicht erforderlich. Obendrein lässt sich die Anwendung optimal an das eigene individuelle Webdesign anpassen und spätestens nach 5 Minuten ist das Modul einsatzbereit.

HTML-Webseiten sind immer statisch. Sollen multimediale Inhalte wie Videos oder Musik abgespielt werden, müssen Webmaster auf Werkzeuge wie Real Player, Quicktime oder den Windows Media Player zurückgreifen. Das ist meist umständlich und dauert, da die externen Programme erst gestartet werden müssen.

Darum ist die beste Lösung zum Abspielen von Musik das Flash-Plugin. Denn es ist auf den meisten Rechnern installiert und funktioniert sowohl auf Macs als auch auf herkömmlichen PCs. Kein Wunder also, dass sich Flash zum Streamen von Musikdateien und Podcast-Beiträgen immer mehr durchsetzt. Auch bei Music-Websites von Bands und DJs erfreut sich Flash reger Beliebtheit. Besonders hilfreich ist hierbei die Flash-Applikation Netaudio Simplay. Das kleine Werkzeug besteht aus zwei Flash-Dateien, die nicht editiert werden müssen. Für den flotten Einsatz ist lediglich ein wenig HTML-Code nötig und natürlich ein vorliegendes MP3. Das Design von Simplay steuern Sie hierbei einfach über zwei externe XML-Listen, die den Player mit den nötigen Grafiken versorgen.

Download, Konzept und Aufbau

Um Netaudio Simplay zu installieren, öffnen Sie am besten die Internet Intern-CD-ROM oder laden das ZIP-Archiv unter www.phlow.de/netaudio-player/ herunter. Simplay können Sie sowohl für private als auch kommerzielle Zwecke gebrauchen. Lediglich die Nutzung bei kommerziellen Produkten, bei denen Sie Simplay mitsamt einem Produkt weiterverkaufen, ist vom Programmierer Fabien Schivre untersagt. Dazu gehört auch der Vertrieb des Programms.

Individuelles Design für die Vorhörfunktion: Das Plattenlabel earregular bietet Soundproben mittels Simplay an.

Haben Sie die Archiv-Datei auf Ihrem Rechner entpackt, so sollten Sie nun drei Dokumente und einen Ordner vorfinden. Der Ordneraufbau strukturiert sich dabei wie folgt:

simplay_control.swf (Flashdatei)
simplay_player.swf (Flashdatei)
simplay_test.htm (HTML-Datei)
Simplaydata (Ordner)
- controlconfig.xml
- playerconfig.xml
- controlskins (Ordner)
  - default (Ordner)
    - skin.xml
    - JPG-Grafiken
- playerskins (Ordner)
  - default (Ordner)
    - skin.xml
    - JPG-Grafiken

Besteht eine Verbindung zum Internet, können Sie die HTML-Datei simplay_test.htm aufrufen und das Audio-Streaming testen. Da es sich bei den verlinkten Dateien um hochwertige MP3s handelt, ist eine DSL-Verbindung empfehlenswert.

Die Flash-Applikation Simplay können Sie auf zweierlei Weise nutzen. Soll nur eine Musikdatei auf einer Website abgespielt werden, reicht der Einsatz von simplay_player.swf. Entscheiden Sie sich jedoch für mehrere abspielbare MP3s, müssen Sie auch die Datei simplay_control.swf einbauen. Der Controller übernimmt nämlich die Steuerung der Flash-Dateien untereinander. Das verhindert, dass Benutzer zwei oder mehrere MP3s gleichzeitig starten und hören. Außerdem bietet der Controller die Möglichkeit, die Lautstärke zu regulieren und sämtliche Sounds per Button stumm zu schalten.

Wird Simplay in einer HTML-Webseite aufgerufen, sucht die Applikation den Ordner simplaydata. Denn in diesem befinden sich neben den eigentlichen Grafiken für das Abspiel- und Controller-Modul außerdem zwei XML-Steuerungsdateien. In den beiden Unterordnern default/playerskins und default/controlskins finden Sie neben den JPG-Grafiken jeweils eine Datei namens skin.xml. Diese verlinkt die Grafiken und positioniert sie über x- und y-Koordinaten.

Simpler Einbau in die Website

Ist das Archiv entpackt, laden Sie das Verzeichnis samt Flash-Dateien hoch. Die Grafiken in den Verzeichnissen namens fireworksdateien können Sie vorher löschen. Diese unterstützen Sie lediglich beim Erstellen neuer Grafiken, sofern Sie die Software Fireworks nutzen.

Öffnen Sie nun die mitgelieferte HTML-Datei simplay_test.htm oder erstellen Sie ein neues HTML-Dokument. Um das Streaming eines MP3s zu ermöglichen, müssen Sie jeweils jedes MP3 getrennt aufrufen. In Frage kommt dabei entweder ein relativer Link auf eine Musikdatei oder der Aufruf eines MP3s über eine URL. Entscheiden Sie sich für einen relativen Link, muss die MP3-Datei im gleichen Ordner liegen. Der Code lautet dann wie folgt, wenn das MP3 beispiel.mp3 heißt.

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="200" height="20" id="simplay_player" align="left">
<param name="allowScriptAccess" value="sameDomain"/>
<param name="movie" value="simplay_player.swf?audiofile=beispiel.mp3"/>
<param name="quality" value="high"/>
<param name="scale" value="noscale"/>
<param name="salign" value="lt"/>
<param name="bgcolor" value="#ffffff"/>
<embed src="simplay_player.swf?audiofile=beispiel.mp3" quality="high" scale="noscale" salign="lt" bgcolor="#ffffff" width="200" height="20" name="simplay_player" align="left" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"/>
</object>

Noch ein kurzer Hinweis: Wenn Sie sich Tipparbeit sparen wollen, kopieren Sie sich den Code einfach aus der Beispieldatei und ändern lediglich den Link zum MP3. Beachten Sie hierbei, dass Sie das MP3 an zwei Stellen verlinken müssen. Einmal in der Codezeile

<param name="movie" value="simplay_player.swf?audiofile=beispiel.mp3"/>

und ein weiteres Mal über das <embed>-Tag:

<embed src="simplay_player.swf?audiofile=beispiel.mp3" quality="high" scale="noscale" salign="lt" bgcolor="#ffffff" width="200" height="20" name="simplay_player" align="left" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"/>

Da Simplay auch MP3s fremder Server streamen kann, können Sie anstelle einer MP3-Datei auf Ihrem Server auch ein MP3 über eine URL einbinden. Der Code sieht dann so aus:

simplay.swf?audiofile=http://www.website.de/mp3/musik.mp3

Wenn Sie weitere MP3s verlinken wollen, verfahren Sie wie oben beschrieben und fügen einfach ein weiteres <object>-Element samt der <param>-Tags ein. Damit das Streaming bei mehreren Sounddateien einwandfrei klappt, müssen Sie außerdem den Controller einfügen. Dieser übernimmt die Kommunikation zwischen allen integrierten Simplay-Modulen. Der Code-Schnipsel lautet wie folgt – auch dieser befindet sich in der HTML-Beispieldatei:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="100" height="20" id="simplay_control" align="left">
<param name="allowScriptAccess" value="sameDomain"/>
<param name="movie" value="simplay_control.swf"/>
<param name="quality" value="high"/>
<param name="scale" value="noscale"/>
<param name="salign" value="lt"/>
<param name="bgcolor" value="#ffffff"/>
<embed src="simplay_control.swf" quality="high" scale="noscale" salign="lt" bgcolor="#ffffff" width="100" height="20" name="simplay_control" align="left" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"/>
</object>

Den Hintergrund beider Module passen Sie übrigens mittels

<param name="bgcolor" value="#ffffff"/>

und

<embed src="simplay_control.swf" quality="high" scale="noscale" salign="lt" bgcolor="#ffffff" width="100" height="20" name="simplay_control" align="left" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"/>

an. Das wird dann nötig, wenn Sie eigene Grafiken mit einer anderen Hintergrundfarbe als Weiß benutzen.

Skinning: Ein eigenes Design für Netaudio Simplay

Das Design des Flash-Players wird für beide Module separat über eine Datei namens skin.xml gesteuert. Dort verlinken Sie die JPG-Grafiken, die der Player für die angezeigten Buttons und den Hintergrund verwenden soll. Außerdem bestimmen Sie über skin.xml die Position, Größe und Farbe des Streaming-Balkens. Die Größe der Grafiken bestimmen allein Sie.

Der MP3-Flash-Player basiert auf externen JPG-Grafiken, die sich austauschen und an die Website anpassen lassen.

Innerhalb der skin.xml-Datei kommen folgende Tags zum Einsatz:

background: Link zum Hintergrundbild
playbutton: Links für den Abspielknopf
- up_pic: Grafik für den Normalmodus
- over_pic: Grafik, wenn der Mauszeiger über den Knopf fährt
- down_pic: Grafik, wenn der Button geklickt wird
- x: Koordinate für die x-Position
- y: Koordinate für die y-Position
pausebutton: Links für den Pauseknopf
- up_pic: Grafik für den Normalmodus
- over_pic: Grafik, wenn der Mauszeiger über den Knopf fährt
- down_pic: Grafik, wenn der Button geklickt wird
- x: Koordinate für die x-Position
- y: Koordinate für die y-Position
statusbar: Parameter für die Gestaltung des Streaming-Balkens
- backcolor: Hintergrundfarbe
- streamcolor: Statusfarbe für den erfolgten Download des Musikstückes
- poscolor: Positionsfarbe des bereits abgespielten Musikstückes
- x: Koordinate für die x-Position
- y: Koordinate für die y-Position
- w: Breite des Streaming-Balkens
- h: Höhe des Streaming-Balkens

Die gesamte skin.xml-Datei für simplay.swf ist dann wie folgt aufgebaut:

<?xml version='1.0' encoding='UTF-8'?>
<GUI>
<background back_pic="simplay/skins/background.jpg"/>
<controls>
<playbutton up_pic="simplay/skins/play_up.jpg" over_pic="simplay/skins/play_over.jpg" down_pic="simplay/skins/play_down.jpg" x="2" y="2"/>
<pausebutton up_pic="simplay/skins/pause_up.jpg" over_pic="simplay/skins/pause_over.jpg" down_pic="simplay/skins/pause_down.jpg" x="2" y="2"/>
<statusbar backcolor="DDDDDD" streamcolor="CCCCEE" poscolor="9999FF" x="24" y="6" w="170" h="10"/>
</controls>
</GUI>

Mit weniger Grafiken kommt der Controller aus, dessen skin.xml übersichtlicher gehalten ist:

<?xml version='1.0' encoding='UTF-8'?>
<GUI>
<background pic="simplaydata/controlskins/default/background.jpg"/>
<faderhandle pic="simplaydata/controlskins/default/handle.jpg" x="30" y="5" w="54"/>
<onbutton pic="simplaydata/controlskins/default/on.jpg" x="2" y="3"/>
<offbutton pic="simplaydata/controlskins/default/off.jpg" x="2" y="3"/>
</GUI>

Neben Simplay finden Sie einen weiteren komplexen Flash-Musicplayer zum freien Download unter www.phlow.de/netaudio-player/

Die beiden Steuerungsdateien

Eigentlich brauchen Sie keinerlei Hand an die beiden Steuerungsdateien controlconfig.xml und playerconfig.xml zu legen. Sie seien hier jedoch trotzdem kurz erwähnt, denn mit ihnen legen Sie die Verzeichnisse der Skinning-Daten fest. Wenn Sie also die Verzeichnisse mit den Grafiken anders benennen möchten, legen Sie jeweils den neuen Ordner für den Controller über controlconfig.xml und den Ordner für die Player-Grafiken über playerconfig.xml fest.

Download-URL

Neben dem einfachen Modulbaukasten des Netaudio Simplays hat Fabien Schivre auch einen komplexen Flash-Player programmiert, der zahlreiche unterschiedliche Playlists verwalten kann. Diesen als auch Simplay finden Sie auf der Website www.phlow.de/netaudio-player/.