HTML5 Audio

Das <audio> Tag

Das <audio> Tag kann direkt in HTML5 eingebunden werden:

Es stehen folgende Attribute zur Verfügung

src - Eine URL für den Inhalt.
autobuffer - Soll direkt mit dem laden/puffern angefangen werden.
autoplay - Soll der Inhalt direkt abgespielt werden, sobald genug geladen ist.
loop - Soll sich der Inhalt wiederholen.
controls - Soll der Browser Steuerungselemente (Play/Pause/Position/Lautstärke) anzeigen.

Der Code

<audio controls autobuffer>
  <source src="thankyou.ogg" />
  <source src="thankyou.mp3" />
  <!-- oder doch Flash?! -->
</audio>

oder per Javascript

Audio Element per Javascript starten

...und pausieren...

...und wieder abspielen...

...und die Lautstärke verändern (z.Z.100% ).

Achtung:

Ein Audio Element kann im FireFox nur abgespielt werden, wenn es im DOM hängt.

Okay cool - welche Steuermöglichkeiten gibt es noch?

play() - Spielt den Inhalt ab.
pause() - Pausiert den Inhalt.
volume - Dezimalzahl zwischen 0..1, welche die Lautstärke steuert.
duration - Wie lange ist der Inhalt.
currentTime - Wo wird gerade abgespielt.

Code

// wir definieren eine Variable welche in allen Closures gilt			
var audioElement;

// start the audio element
$('#start-audio-button').click(function() {
	// Audioelement erstellen
	audioElement = new Audio("");
	
	// im DOM einfügen, sonst wird es nicht abgespielt
	document.body.appendChild(audioElement);
	
	// herausfinden welcher Medientyp abgespielt werden kann
	var canPlayType = audioElement.canPlayType("audio/ogg");
	if(canPlayType.match(/maybe|probably/i)) {
		audioElement.src = 'thankyou.ogg';
	} else {
		audioElement.src = 'thankyou.mp3';
	}
	
	// erst abspielen wenn genug vom mp3 geladen wurde
	audioElement.addEventListener('canplay', function() {
		audioElement.play();
	}, false);

	// Funktionen erst einblenden
	$('#realtime-functions').animate({ opacity : '1.0'}, 400);

	// jetzt die anderen Events binden
	// pause
	$('#pause-button').click(function() {		
		audioElement.pause();
		return false;
	});

	// play
	$('#play-button').click(function() {		
		audioElement.play();
		return false;
	});

	// zufällige Lautstärke
	$('#change-volume-button').click(function() {	
		var volume = Math.random(); // Wert zwischen 0..1
		audioElement.volume = volume;
		$('#volume').text(Math.floor(volume*100));
		return false;
	});

	return false;
});

Daily canPlayType() WTF

Die Funktion canPlayType(), gibt zurück ob ein bestimmter Medientyp gespielt werden kann und welcher nicht. Gültige Anworten sind im schlechtesten Fall "", "no" bis hin zum besten Fall "maybe", "probably".

Typ	FireFox 3.5	Safari
"audio/ogg"	"maybe"	"no"
"audio/mpeg"	""	"probably"

Kann ich meine User warnen, wenn ihr Browser sch**** ist?

Ja mit der wunderbaren Detection von Mark Boas.

try {
    myAudioObj = new Audio(""); 

    audioObjSupport = !!(myAudioObj.canPlayType);
    basicAudioSupport = !!(!audioObjSupport ? myAudioObj.play : false);

	if (myAudio.canPlayType) {
	   // Currently canPlayType(type) returns: "no", "maybe" or "probably"
	    canPlayOgg = ("no" != myAudio.canPlayType("audio/ogg")) && ("" != myAudio.canPlayType("audio/ogg"));
	    canPlayMp3 = ("no" != myAudio.canPlayType("audio/mpeg")) && ("" != myAudio.canPlayType("audio/mpeg"));
	}
} catch (e) {
    audioObjSupport = false;
    basicAudioSupport = false;
}

Ein wenig html5 <audio> foo