Teil von SELFHTML aktuell Teil von Artikel Teil von Grafik/Multimedia

Musik W3C-konform in Webseiten einbinden

nach unten Marc Reichelt
nach unten Einleitung: einfacher Musicplayer für Flash (EMFF)
nach unten Screenshot und Beschreibung zum EMFF
nach unten EMFF auf eigenen Webseiten anbieten
nach unten Fehler des EMFF, Vorschläge zur Verbesserung
nach unten Weitere Links

Marc Reichelt

Homepage-URL: deutschsprachige Seite http://www.marcreichelt.de/

Bei Fragen zu diesem Beitrag bitte den Autor des Beitrags kontaktieren!

nach obennach unten

Einleitung: einfacher Musicplayer für Flash (EMFF)

Nahezu jeder ist schon einmal in die Versuchung geraten, seine Webseite mit einem kleinen Stück Musik zu verschönern - und sei es nur ein kleiner Loop, der wiederholt abgespielt wird.

Ungeachtet der Frage, ob der Benutzer diese Musik überhaupt hören möchte, gibt es unterschiedliche Wege, die Musik dem Benutzer zugänglich zu machen. Die einfachste und "konformste" Lösung ist es, die entsprechende Datei mittels <a>-Tag zu verlinken. Allerdings ist die Datei dann nicht in die Webseite eingebunden. Es bleibt es dem Benutzer überlassen, ob er die Datei herunterlädt und anhört oder nicht.

Will man die Musik jedoch direkt auf der Webseite abspielen lassen, gibt es zuerst einmal Probleme mit den zur Verfügung stehenden HTML-Elementen. Manche Elemente (wie etwa bgsound oder embed) funktionieren nur in manchen Browsern und sind nicht W3C-konform. Ein Element wird immerhin mittlerweile von allen neueren Browsern unterstützt und ist auch W3C-konform: Das object-Element (siehe auch SELFHTML: bereichsübergreifende Seite Objekte einbinden).

Doch die richtige HTML-Einbindung ist nur das eine Problem. Das andere ist der Benutzer bzw. sein Browser und seine übrige Software-Umgebung. Hat der Benutzer überhaupt ein Plugin installiert, das die angebotene Musikdatei lesen und abspielen kann? Wenn nicht, hat er Pech gehabt und hört nichts von der Musik. Und wenn er ein Plugin installiert hat, so kann dies das Aussehen der Seite eventuell stark beeinflussen - schließlich hat nicht jeder das gleiche Plugin installiert.

Eines der verbreitetsten Browser-Plugins überhaupt ist der Macromedia Flash-Player. Flash ist längst etabliert auf Webseiten, und die große Mehrheit der Benutzer kann in Webseiten eingebundene Flashmovies im Browser sehen. Nun ist Flash ein Multimedia-Format, das neben animierter Grafik und Video auch Sound und Musik unterstützt. Von daher bietet sich für Sound und Musik eine Lösung an, die nichts weiter als den weit verbreiteten Flash-Player voraus setzt. Die Lösung ist ein sehr kleiner und dynamisch aufgebauter Flash-Film (SWF-Datei), an den beim Einbinden in HTML eine Variable mit dem Pfad zu einer gewünschten Musikdatei übergeben wird. Und schon wird die Musik so abgespielt, wie der Webdesigner es haben möchte.

Der Flash-Film, der diese Aufgabe erledigt, hat den Namen "Einfacher Musicplayer für Flash" (EMFF) erhalten.

nach obennach unten

Screenshot und Beschreibung zum EMFF

Beschreibung

Beim Design des EMFF wurde darauf geachtet, dass der Player möglichst wenig Platz einnimmt und sich unauffällig in unterschiedlichste Webseiten integrieren lässt. Die Beschränkung auf wenige Funktionen (Abspielen, Stoppen, Wiederholen) sorgt dafür, dass Anwender den EMFF intuitiv bedienen können.

nach obennach unten

EMFF auf eigenen Webseiten anbieten

Wenn Sie den EMFF auf eigenen Webseiten einbinden möchten, müssen Sie sich den EMFF zunächst herunterladen: deutschsprachige Seite englischsprachige Seite Webseite des EMFF
Der EMFF wird noch weiter entwickelt. Schauen Sie deshalb hin und wieder mal auf der Webseite des EMFF vorbei, um gegebenenfalls eine neuere Version herunterzuladen.

Nachdem Sie die Download-Datei (Zip-Format) entpackt haben, finden Sie eine Datei emff_standard.swf (oder ähnlich, je nach Bezeichnung des Skins) im Ordner "skins" vor. Kopieren Sie diese Datei am besten in den gleichen Ordner wie die Webseite, die später die Musikdatei laden soll.

Nun brauchen Sie nur noch eine Musikdatei. Diese muss im MP3- vorliegen. Andere Typen unterstützt der Flash-Player derzeit nicht. Weiterführende Informationen zu das Musikformat erhalten Sie z.B. im Wikipedia-Artikel zu deutschsprachige Seite MP3. 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 deutschsprachige Seite 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 deutschsprachige Seite mp3-gema-frei.de/.

Zum W3C-konformen Einbinden des EMFF in HTML können Sie wie schon erwähnt das object-Element verwenden. Um Ihnen das Einbinden zu erleichtern, sollten Sie dabei den englischsprachige Seite Code Generator benutzen, der den Code für Ihren persönlich angepassten EMFF erstellt. Ab Version 0.03 steht er ebenso wie der EMFF unter der GPL (General Public License) und wird gleich mit der entsprechenden Datei mitgeliefert. Das nachfolgende Bild zeigt einen Screenshot des Code-Generators (der in zukünftigen Versionen auch anders aussehen könnte):

Der Code Generator in Version 0.03

Im Feld name of musicfile geben Sie den Pfad zur entsprechenden Datei an.

Folgende Optionen stehen (in der Version 0.03) zur Verfügung:

Aus den Beispieleingaben im oben abgebildeten Screenshot Beispiel erzeugt der Code-Generator nach Anklicken von Generate my code! z.B. folgenden HTML-Code:

<object type="application/x-shockwave-flash" data="emff_wooden.swf?src=example.mp3&amp;autostart=yes" width="120" height="60">
 <param name="movie" value="emff_wooden.swf?src=example.mp3&amp;autostart=yes">
 <param name="quality" value="high">
 <param name="bgcolor" value="#ff8000">
</object>

Der generierte Code wird im Browser ausgegeben. Sie brauchen ihn nur noch über die Zwischenablage in den Quelltext Ihrer Webseite einfügen - und schon haben Sie einen fertigen kleinen Musicplayer, dessen Design Sie selbst bestimmen können!

nach obennach unten

Fehler des EMFF, Vorschläge zur Verbesserung

Einigen Leuten ist es passiert, dass der EMFF bestimmte MP3-Dateien viel zu schnell abspielt, obwohl gewöhnliche MP3-Player die gleichen Dateien ohne Probleme wiedergibt.
Dieser Fehler ist bekannt - es ist jedoch kein Fehler des EMFF, sondern ein Fehler in der Programmierung für die Funktion loadSound im Flash-Player selbst.
Der Bug ist bereits an Macromedia gemeldet, es kann aber noch einige Zeit vergehen bis dieser Fehler in einer neuen Version des Flash-Players beseitigt ist (und natürlich muss sich die neue Version ebenfalls erst verbreiten).
Bis dahin können Sie das Problem umgehen, indem Sie die gleiche Datei mit einem MP3-Encoder in anderen Bitraten codieren lassen - meist wird man auf diese Art recht schnell fündig. Bedenken Sie dabei auch, dass Sie als Quelldatei für den Codiervorgang die beste Ihnen zur Verfügung stehende Qualität nehmen sollten, denn bei diesem Prozess entstehen stets Verluste.
Eine kurze und eine ausführliche Anleitung zum Erstellen von MP3-Dateien gibt es im Wikipedia-Artikel über MP3 unter den deutschsprachige Seite Weblinks.

Falls Sie Verbesserungsvorschläge zum EMFF haben sollten nimmt der nach oben Autor des EMFF diese sehr gerne entgegen. Geplant für die nächsten Versionen sind unter anderem eine eine umfassende mehrsprachige Dokumentation, Unterstützungen für Blinde und das Ändern der Farben des Players zur Ladezeit. Neue Skins werden ebenfalls sehr gerne angenommen!

nach obennach unten

Weitere Links

englischsprachige Seite Downloadseite bei SourceForge.net
englischsprachige Seite Projektzusammenfassung bei SourceForge.net
deutschsprachige Seite Beispielseiten, die den EMFF verwenden

Teil von SELFHTML aktuell Teil von Artikel Teil von Bereich

© 2007 bereichsübergreifende Seite Impressum