HTML5 Audio mit jQuery und jPlayer

Home

Blog

Tech

Details: Mittwoch, 02. Juni 2010; by Tappi

Diesen Artikel mit funktionierender Demo auf der alten Seite betrachten.

Update 13.09.2011: Neue Demo mit Video und Audio hier. Tutorial folgt bei Gelegenheit, ansonsten schon mal mit DevTools einen Blick in die letzten Zeilen der 'scripts.js' dieser Site werfen.

Die aktuellen Browser können dank der noch offenen HTML5 Spezifikation audio und video Elemente darstellen. Nützlich ist das allerdings wieder nur bedingt da die breite Masse immernoch mit alten Browsern wie dem Internet Explorer unterwegs ist. In diesem Artikel stelle ich eine einfach zu integrierende Lösung vor, die im Worst Case auf Adobe Flash zurückgreift.

(Multi-)Media?

Ich frage mich immer ob die Leute die das World Wide Web mit dem IE durchkreuzen, sich eine Excel Tabelle mit dem Notepad anschauen!? Es ist ja fast so als wären die auf einer Autobahn mit einem Fahrad unterwegs. Egal! Genug vom Webdeveloperhass auf IE User! Denn:

Viecher User sind Multi!

Die Viecher Besucher stellen natürlich die krasse Ausnahme da! Hier cruist der Löwenanteil der Benutzer im Ferrari(Opera 41%), im Volkswagen(Firefox 31%), im Trabant(Internet Explorer 8 16%) und auf dem Fahrad(Internet Explorer 5/6) kommen immerhin nur 2%. Mit dem Jeep(Safari) fahren 3% der Vekehrsteilnehmer, der Rest verteilt sich über iPhone, iPod und Playstation 3. An die iWhatever und Playstation Surfer: Falls ihr Probleme bei der Darstellung der Seite habt: haut bitte einmal mit dem Kopf auf die Tischkante, dankeschön!

Audio mit jPlayer

Ein wunderbar einfaches PlugIn für jQuery, der jPlayer ermöglicht es, je nach erkanntem Browser Audio über den modernen HTML5 Weg einzubetten oder auf eine Flash Lösung zurück zu fallen. Dabei erfolgt die Steuerung des Players in jedem Fall über zB. Link oder ander HTML Elemente. Der Benutzer sieht also auch im schlimmsten Fall keinen Flash Player.

Hier meine Lösung im Codebeispiel>>

Die aktuelle Lösung auf der Viecher Seite benutzt ein Element mit der Id "play_jPlayer" in dem zwei Attribute "ogg" und "mp3" dir URLs zu den Audiodateien enthalten.

Der HTML Part schaut also so aus:
<head>
<script src="/js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="/js/jquery.jplayer.min.js"></script>
<script src="/js/jplayer_beispiel.js"></script>
</head>
<body>
   <a href="#" id="play_jplayer"
      ogg="/audio/ogg/viehfare.ogg"
      mp3="/audio/mp3/viehfare.mp3">
   Audio Beispiel
   </a>
</body>
Die Beispielhaft angehängte "jplayer_beispiel.js" müsste dann folgendermaßen aussehen:

jplayer_beispiel.js herunterladen<<

jQuery.noConflict();

// CHECK IF SITE IS READY

jQuery(document).ready(function(){

//Play Audio if #play_player element is clicked

jQuery("#play_jplayer").toggle(

function () {

event.preventDefault();

//Retrieve Link to audio files

var ogg_file = jQuery(this).attr("ogg");

var mp3_file = jQuery(this).attr("mp3");

// Create #jplayer element

jQuery(this).after('
J Player
');

jQuery("#jplayer").jPlayer( {

ready: function () {

//Set Audio file paths

this.setFile(mp3_file, ogg_file);

this.play();

},

// Use Ogg were possible, fall back to flash if needed

swfPath: "audio/js", nativeSupport: true, oggSupport: true

});

}, function() {

//Stop the Player

jQuery("#jplayer").jPlayer("stop");

// Remove #jplayer element

jQuery("#jplayer").remove();

}

);// End Play Audio

});//End Doc Ready
Demo:

Keine Demo auf der umgezogenen Seite.. dafür bastel ich gerade ein Tutorial wie man es inkl Skin und mehrfache Instanzen einbindet.

Übrigends schon in AKtion mit zB dem Firebug zu sehen: Audio Viehtures

Die Tools:

jPlayer vom Happyworm jQuery Docs HTML Player Demo W3C HTML5 audio video working draft

Comments