5202

ein Blog über technische Fragen zu Blogger

Ein jQuery Audio-Player für Blogger

von

Update

Funktioniert jetzt auch im FF!!

Früher haben viele Blogger zum Abspielen von Musik den Youtube-Player bis auf eine Höhe von 25px verkleinert und den Player quasi als "Audio-Player" benützt. Youtube war das wohl ein Dorn im Auge und heute leitet der Link auf die YouTube Seite weiter, das macht also keinen Sinn mehr - ich habe nach einer Möglichkeit gesucht, wie man eigene Audio-Dateien in Blogger abspielt und das ist alles andere als einfach.
Es gibt zwar ein HTML5 <audio> Tag, der wird aber von Firefox nicht im MP3-Format unterstützt - genial, oder? Flash halte ich für den größten Mist den es gib - vor allem funktioniert der nicht auf mobilen Geräten, bleibt also nur jQuery. Ich habe verschiedene jQuery-Player ausprobiert und im Grunde funktioniert nur ein einziger Player wirklich, nämlich der jplayer. Der ist technisch eindrucksvoll, aber vom Aussehen her eine Katastrophe. Ich habe im Endeffekt einen schönen Skin gefunden und den dann auch noch auf Blogger zum Laufen gebracht - vielleicht kann ja jemand was damit anfangen :=).

Demo


Achtung

Ihr dürft nur eigene oder gemeinfreie Musik auf euren Blog stellen - alles andere ist illegal und kann zu hohen Abmahnkosten führen. Das Urheberrecht ist völlig Schwachsinnig - okay - aber macht keinen Unsinn.

Hosting

Die Beispieldatei ist auf Dropbox gehostet. Das legendäre Google Drive ist leider unfähig, eine Musik-Datei auszuliefern - shame on it! Außer Dropbox ist mir keine Dienst bekannt, der .mp3 Dateien ausliefert.

jQuery

Der Player arbeitet mit jQuery, d.h. ihr müsst das Framework in euren Blog zuvor einbauen. Wie das geht, habe ich schon an anderer Stelle beschrieben.

HTML

Das ist das HTML von dem Player, der kommt in der HTML-Ansicht vom Editor in den Post:
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
       <div class="jp-audio-container">
   <div class="jp-audio">
    <div class="jp-type-single">
     <div id="jp_interface_1" class="jp-interface">
      <ul class="jp-controls">
       <li><a href="#" class="jp-play" tabindex="1">play</a></li>
       <li><a href="#" class="jp-pause" tabindex="1">pause</a></li>
       <li><a href="#" class="jp-mute" tabindex="1">mute</a></li>
       <li><a href="#" class="jp-unmute" tabindex="1">unmute</a></li>
      </ul>
      <div class="jp-progress-container">
       <div class="jp-progress">
        <div class="jp-seek-bar">
         <div class="jp-play-bar"></div>
        </div>
       </div>
      </div>
      <div class="jp-volume-bar-container">
       <div class="jp-volume-bar">
        <div class="jp-volume-bar-value"></div>
       </div>
      </div>
     </div>
    </div>
   </div>
  </div>
Die id jquery_jplayer_1 müsst ihr für jedes einzelne Lied um eins hochzählen, also jedes Lied braucht ein eigene id.

CSS/Script

Die CSS und das Script kommen in's HTML vom Blog und zwar unmittelbar _oberhalb_ vom </head> Tag. Bitte verwechselt nicht </head> und <head> Tag - das sind zwei verschiedene Tags.
<link href="http://db.tt/NXnrIW7f" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://db.tt/RGjD4cNZ"></script>

Starterscript

Das Script wird mit diesem Aufruf gestartet - der Aufruf kommt unmittelbar oberhalb vom HTML:
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){

 $("#jquery_jplayer_1").jPlayer({
  ready: function () {
   $(this).jPlayer("setMedia", {
    mp3: "http://dl.dropbox.com/u/12178319/Musik/Asperges%20me%20Domine%2C%20Antifona%20gregoriana.mp3",
    oga: "http://dl.dropbox.com/u/12178319/Musik/Asperges%20me%20Domine%2C%20Antifona%20gregoriana.ogg",
   }).jPlayer("pause");
  },
  swfPath: "js",
  supplied: "mp3, oga"
 });

});
//]]>
</script>
Ihr könnt mit diesem Aufruf auch .m4a Dateien starten, dazu müsst ihr die .mp3 Werte gegen .m4a austauschen. Für ein zweites oder drittes Lied müsst ihr die entsprechende HTML schreiben und im Aufruf die id anpassen, also statt $("#jquery_jplayer_1") $("#jquery_jplayer_2") schreiben usw. Verständlich?
Update
Firefox kann weder mp3 noch m4a Dateien wiedergeben - um den Player auch im FF lauffähig zu machen, müsst ihr die Datei in .ogg konvertieren und zusätzlich angeben! Das macht Freude ...

Kommentare

Der Player sollte in allen Browser arbeiten, auch im IE und FF. Wer andere Erfahrungen macht, kann mir ja eine kurze Nachricht hinterlassen, würde mich sehr interessieren, wenn was nicht klapt.