Über mich

Startseite arrow Tipps & Tricks arrow Schlanker Flash-Player für MP3

Schlanker Flash-Player für MP3

Dienstag, 16. Dezember 2008
Geschrieben von Armin Vieweg
Möchte man Musik oder Sprache auf die eigene Website bringen ist ein kompletter Videoplayer wie der "Flowplayer" manchmal zu überdimensioniert. Es geht auch einfacher.

In meinem vorherigen Beitrag habe ich ein wenig über den Flowplayer berichtet, mit dem Videos im FLV-Format auf die eigene Website bannen kann.



Diesen Beitrag widme ich einem viel schlankeren Player, der ebenfalls kostenlos erhältlich ist und mit dem man "nur" MP3-Audio-Dateien abspielen kann.


Demonstration




Bestehend aus nur einem Play-Button in seinem Ursprungszustand, öffnet er sich bei Klick und erweitert sich so zu einem vollständigen MP3-Player, mit Lautstärkeregelung, Trackanzeige und Fortschrittsanzeige über die man das Lied beliebig vor- und zurückspulen kann.

Der Player trägt den Namen "WordPress Audio Player" und wie der Titel bereits vermuten lässt handelt es sich hierbei um ein Plugin für das CMS Wordpress.


Wordpress-Version
Das Plugin, dass man sich einfach herunterladen und installieren kann, wartet mit einer einfachen Konfigurationsmöglichkeit auf, um die Farben des Players nach Belieben abzuändern.


Wordpress MP3 Player Konfiguration

Die MP3-Dateien lassen sich über den normalen Content-Bereich eines Artikels beliebig einfügen und platzieren.



Standalone-Version
Dieser Player ist nicht schlecht und so wird dessen Nutzung glücklicherweise nicht nur auf Wordpress beschränkt, sondern es gibt auch eine Standalone-Version des Players, die über die Einbindung von JavaScript und Flash funktioniert.

Farben können nun nicht mehr über einen einfachen Editor angepasst werden, man hat jedoch vielfältige Möglichkeiten über das Abändern von Variablen ein entsprechendes Ergebnis zu erzielen.

Während der Player im Head-Bereich so eingebunden wird

<script type="text/javascript"> 
  AudioPlayer.setup("http://domain.de/player.swf", { 
    width: 290 
  }); 
</script>



kann man im Body beliebig viele Instanzen des Players definieren.

   <p id="audioplayer_1">Der Text ist sichtbar, wenn Flash fehlt.</p> 
   <script type="text/javascript"> 
     AudioPlayer.embed("audioplayer_1",
     {soundFile: "http://domain.de/song.mp3"}); 
   </script> 



Die Konfiguration der Farben und diverser anderer Einstellungen, wie das Deaktivieren der Animationen oder das Einstellen der voreingestellten Lautstärke werden als entsprechende Parameter im JavaScript im Head-Bereich vorgenommen.

Das JavaScript und die Flash-Datei vom Player nehmen jeweils 10,5 KiloByte des Ladevolumens in Anspruch.
Durch das schlanke Design des Players ist er in praktisch jedes Layout integrierbar.



Entdeckt hatte ich den Player auf der Website des kommerziellen Radios RPR1, jedoch erst dank eines Kollegen (Danke Tim! :)) fand ich auch die entsprechende Website zum Player.

Auf der Website gibt es im Übrigen eine umfangreiche Dokumentation und Code-Beispiele, die bei der Einbindung helfen.

Link

Wordpress Audio-Player Plugin


Wordpress Standalone-Audio-Player





  Kommentare (6)
 1 Geschrieben von: Tim, am 16.12.2008 um 14:49
Gern geschehen ;)
 2 Geschrieben von: Peter, am 21.02.2009 um 12:53
Super Tipp, Danke ;-)
 3 Geschrieben von: Rico, am 13.08.2009 um 15:15
Wie bau ich den in meine Website ein? Das geht nicht verdammt!
 4 Geschrieben von: Armin Vieweg, am 13.08.2009 um 16:02
Hallo Rico, 
 
im Prinzip steht oben wie man ihn einbindet. Schick mir doch eine E-Mail (über Kontakt) mit dem Link zur Seite, wo es nicht funktioniert. Dann schaue ich es mir gerne an. 
 
Gruß 
Armin Vieweg
 5 Geschrieben von: Jan, am 13.05.2010 um 23:04
Hey Armin, bin grad über Deinen Artikel gestolpert... Das ist der Player den ich immer gesucht habe! : ) 
Anyway, ich bekomme das Schmuckstück als Standalone auf einer simplen HTML Seite nicht zum laufen... : | 
 
Ich habe Dein Angebot an meinen Vorgänger in den Kommentaren gesehen, und wollte fragen ob Du mir evtl. auch behilflich sein würdest.
 6 Geschrieben von: Armin Vieweg, am 14.05.2010 um 23:59
Klaro. Das Angebot gilt für alle :) 
Aber bitte per Mail, danke. 
 
Gruß 
Armin
Letzte Aktualisierung ( Dienstag, 16. Dezember 2008 )
 
< Zurück   Weiter >