Home Blog HTML5 Audio mit jQuery und jPlayer

HTML5 Audio mit jQuery und jPlayer

Geschrieben von: Tappi   
Mittwoch, den 02. Juni 2010 um 00:12 Uhr
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!

Viecher Analytics May 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:

Mouseklick spielt Audio ab, erneuter klick stopt(toogle).


Audio Beispiel

 

Die Tools:

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

Kommentare  

 
+1 #1 2011-03-31 00:26
Hallo Tappi,

sehr coole Methode die Mp3-Files direkt über das -element zu verknüpfen.
Offen gestanden kriege ich es aber mit dem Bespielscript und der jquery-1.4 + und dem jplayer 2.0 nicht hin. U.a. zeigt mir dreamweaver einen Syntaxfehler beim audio.js an.

Hast Du einen Tipp bzw. eine aktualisierte Version?

Besten Dank im Voraus,
Obewanadobe
Zitieren
 
 
0 #2 Tappi 2011-03-31 14:02
Hi Obewanadobe,

danke für den Hinweis! Da hatte mir warscheinlich mein Content Editor einen Streich gespielt. Manchmal entfernt der JCE einfach Sachen aus den pre Tags.

Um ganz sicher zu gehen habe ich das Script nochmal als JS File im Artikel verlinkt:
http://file.ilikeviecher.com/jplayer_beispiel.js

Das enthält keine Syntaxfehler mehr.

Gruß
Zitieren
 

Kommentar schreiben


Sicherheitscode
Aktualisieren