Ab Firefox 3.5, Chrome 3, Opera 10.5 und Safari 4 können wir viele der neuen HTML 5-Funktionen nutzen, einschließlich der Unterstützung für native Audioqualität, ohne dass Flash erforderlich ist. Wie Sie finden, erstellen wir nur das Neue
Das Audio-Element
Das Audioelement akzeptiert eine Handvoll Attribute, insbesondere:
automatisches Abspielen : Spielt die Datei sofort ab, wenn die Seite geladen wird.
Kontrollen: Zeigt den Player auf der Seite an.
Vorspannung: Beginnt sofort mit der Pufferung der Datei. (Werte = keine, automatisch, Metadaten)
src: Der Pfad zum Dateinamen. Es ist besser, die Datei stattdessen über das untergeordnete "source" -Element zu laden.
Mozilla und Webkit kommen noch nicht ganz aus, was das Audioformat angeht. Firefox möchte eine .ogg-Datei sehen, während Webkit-Browser mit der allgemeinen Erweiterung .mp3 problemlos funktionieren. Das bedeutet, dass Sie mindestens zwei Versionen des Audios erstellen sollten. Ich empfehle Ihnen, ein schnelles und einfaches Online-Tool namens Media.io zu verwenden, um Ihre MP3-Dateien in das ogg-Format zu konvertieren.
Wenn Safari die Seite lädt, erkennt es das .ogg-Format nicht und überspringt es und wechselt entsprechend zur MP3-Version. Bitte beachten Sie, dass der IE dies normalerweise nicht unterstützt, und Opera 10 und niedriger funktionieren nur mit WAV-Dateien.
Audio mit jQuery laden
// Von der Videoversion etwas geändert. $ (document) .ready (function () // Erzeuge ein Audio-Element und setze es auf automatische Wiedergabe, // und zeige den Player, wenn die Seite geladen wird. var audio = $ ('', autoPlay:' autoplay ', steuert:' steuert '); // Rufen Sie unsere addSource-Funktion auf und übergeben Sie das Audioelement // und den Pfad (die Pfade) an Ihr Audio. addSource (Audio, 'audioFile.ogg'); addSource (Audio, 'audioFile.mp3'); // Wenn ein Ereignis ausgelöst wird… $ ('a'). Click (function () // Fügt der Seite die Audio- + Quellelemente hinzu.. Audio.appendTo ('body'); // Verankert das Anker-Tag, das beibehalten werden soll der Benutzer klickt erneut darauf. $ (this) .fadeOut ('slow'); return false;); // Fügt ein Quellelement hinzu und hängt es an das Audioelement an, das // durch elem dargestellt wird. Funktion addSource (elem, Pfad) $ ('') .attr (' src ', Pfad) .appendTo (elem); );
Bitte beachten Sie, dass wir damit noch viel weiter gehen können, z. B. wie Sie den Ton anhalten, die Lautstärke ändern usw. Dieser schnelle, dreiminütige Tipp ist nur etwas für Ihren Appetit. Wenn Sie tiefer eintauchen möchten, lassen Sie es uns wissen, und ich plane ein 30-minütiges Tutorial zu diesem Thema!
Folgen Sie uns auf Twitter oder abonnieren Sie den Nettuts + RSS-Feed für die besten Webentwicklungs-Tutorials im Web.
Share
Accentsconagua
