JavaScript - HTML5 Audio

2013-02-15T21:33:22Z

79.240.61.89:

Quelle: http://9elements.com/html5demos/audio/ (2013-2)

== HTML Audio Player ==
<pre>
<audio controls autobuffer>
<source src="thankyou.ogg" />
<source src="thankyou.mp3" />

</audio>
</pre>

== Steuerung eines Audio Elements mit JavaScript ==
<pre>
// 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;
});

</pre>

== Abfrage der Fähigkeiten des Userbrowsers ==
<pre>

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;
}
</pre>

== Links ==

http://blogs.msdn.com/b/ie/archive/2011/05/13/unlocking-the-power-of-html5-lt-audio-gt.aspx

Synchronisation, Preloading, Multiple Files

Wikizone - Benutzerbeiträge [de]

JavaScript - HTML5 Audio