Tutorial: Audio Player von 1 Pixel Out

Hervorragend geeignet zum Abspielen von Audio-Dateien (.wav, .mp3) auf Websiten ist der in Flash geschriebene Audio Player von "1 Pixel Out".

Der Player ist eigentlich als Wordpress-Plugin konzipiert. Im Folgenden erfahren Sie, wie der Player korrekt von Hand ohne Wordpress eingebunden werden kann. Diese Lösung funktioniert fehlerfrei mit folgenden Browsern: Firefox 3, Safari 4, Internet Explorer (IE5.5, IE6, IE7).

Laden Sie sich den Player herunter

Laden Sie sich die audio-player.zip von der 1 Pixel Seite herunter und entpacken Sie das Archiv. Benötigt wird nur die Datei "player.swf".
Laden Sie die Player-Datei und Ihre MP3s per FTP auf Ihren Webspace hoch.

Binden Sie den Player in Ihre Seite ein

Um den Player korrekt einzubinden benötigen sie die Pfadangaben zum "player.swf" und zur Audio Datei. Die Pfadangaben können dabei relativ (z.B. /audio_player/player.swf) oder auch absolut mit http (z.B. http://www.ihre_domain.de/audio_player/player.swf). Des weiteren wird noch für jeden Player, den Sie auf einer HTML-Seite einbinden eine einmalige ID in form einer Zahl benötigt (1, 2, 3, 4, ...).

Der HTML-Code sieht dann folgendermaßen aus:


<object id="audioplayer4" width="290" height="24" data="http://www.demo.php-webwork.de/audio_player/player.swf" type="application/x-shockwave-flash">
<param name="data" value="http://www.demo.php-webwork.de/audio_player/player.swf" />
<param name="FlashVars" value="playerID=4&soundFile=http://www.demo.php-webwork.de/audio_player/test.mp3" />
<param name="quality" value="high" />
<param name="menu" value="false" />
<param name="wmode" value="transparent" />
<param name="src" value="http://www.demo.php-webwork.de/audio_player/player.swf" />
</object>


Die ID (hier 4) muss an zwei Stellen eingefügt werden.
Die Pfadangabe zur player.swf muss drei Mal eingefügt werden.
Die Pfadangabe zum Audiofile muss einmal eingefügt werden.

Demo


Farben anpassen

Der Audio Player lässt sich in seiner Farbe und Größe wunderbar an das Layout Ihrer Website anpassen. Lesen Sie dazu dieses Tutorial.

Kategorien: