mozilla audio data api
DESCRIPTION
Die Mozilla Audio Data-API erlaubt neue Interaktionen mit Audiodateien, die über HTML 5 in Webseiten eingebettet sind. So ist etwa eine Spektrum-Anzeige im Browserfenster und in Echtzeit möglich. Auch das erzeugen von Audio-Daten durch den Browser sind durch die Schnittstelle möglich.TRANSCRIPT
© Mayflower GmbH 2011
Mozilla Audio Data API
Martin Ruprecht I 14. April 2011
Mayflower GmbH I 2
Firefox 4 only!
Mayflower GmbH I 3
<audio>
Mayflower GmbH I 4
Beispiel
<audio id="ap" src="t1.ogg" controls="true"></audio>
I Unterstützt *.wav und *.ogg
I Security: Musikdatei auf gleichem Server!
Quelle: https://developer.mozilla.org/En/Media_formats_supported_by_the_audio_and_video_elements
Mayflower GmbH I 5
<audio>
+
=Zugriff und Erzeugen von Audio-Rohdaten
Mayflower GmbH I 6
audio = document.getElementById( ' ap ' );
I Functions *· audio.load();· audio.play();· audio.pause();· audio.mozSetup();· audio.mozWriteAudio();· audio.mozCurrentSampleOffset();
I * nicht vollständig
I Quelle: https://developer.mozilla.org/En/HTML/Element/Audio
Mayflower GmbH I 7
audio.mozSetup();
I mozSetUp(channels, sampleRate)· Übergabeparameter:
Anzahl der Kanäle, z.B. 2 bei StereoAbtastfrequenz in Hz, z.B. 44100
· Muss vor mozWriteAudio bzw. mozCurrentSampleOffset aufgerufen werden
Mayflower GmbH I 8
audio.mozWriteAudio();
I mozWriteAudio(buffer)· Wird nach mozSetup() aufgerufen· Übergabeparameter:
buffer (Rohdaten, gleiches Format wie FrameBuffer)· Erzeugt die Audio-Daten· Gibt die Anzahl der bereits erzeugten Samples zurück
Mayflower GmbH I 9
audio.mozCurrentSampleOffset();
I mozCurrentSampleOffset()· Liefert die aktuelle Position (der Samples) des Audiostreams
Mayflower GmbH I 10
audio = document.getElementById( ' ap ' );
I Properties *· audio.currentSrc· audio.volume· audio.duration· audio.currentTime· audio.mozChannels· audio.mozSampleRate· audio.mozFrameBufferLength
I * nicht vollständig
I Quellen:https://developer.mozilla.org/En/HTML/Element/Audio
https://dev.mozilla.jp/localmdc/localmdc_2212.html
Mayflower GmbH I 11
audio.mozChannels
I Anzahl der genutzten Kanäle
I Mögliche Werte:· 1 Mono· 2 Stereo· 6 Surround Sound 5.1
Mayflower GmbH I 12
audio.mozSampleRate
I Samplingrate oder Abtastfrequenz
I Bsp.:· 44,1 kHz für CD Qualität (44100 Hz)
Mayflower GmbH I 13
audio.mozFrameBufferLength
I Anzahl der Samples in allen Kanälen die genutztwerden um die Audio-Daten zu empfangen.
I reine Information zu Beginn
I Bsp:· 2048 (1024 pro Kanal bei Stereo)
Mayflower GmbH I 14
audio = document.getElementById( ' ap ' );
I Events *· loadedmetadata· timeupdate· pause· play· ended· MozAudioAvailable·
I * nicht vollständig
I Quelle: https://developer.mozilla.org/En/HTML/Element/Audio
Mayflower GmbH I 15
MozAudioAvailable
I MozAudioAvailable· Wird gefeuert wenn genügend Samples decodiert wurden
I audio.addEventListener('MozAudioAvailable', _someFct_, false);· Übergabeparameter an _someFct_:
FrameBuffer (Rohdaten, als Float32Array)Time
I Quelle: https://developer.mozilla.org/en/JavaScript_typed_arrays
Mayflower GmbH I 16
… jetzt aber mal los
Demo!
Mayflower GmbH I 17
Links
I http://haptic-data.com/sketches/html5/fft1.html
I http://blog.dt.in.th/stuff/audiodata/
I http://www.nihilogic.dk/labs/pocket_full_of_html5/#presets/void.js
I http://niiden.com/simplesynth/simplesynth.html
I http://vocamus.net/dave/?p=1074
I http://www.youtube.com/watch?v=8qME7_Eza54&feature=youtu.be
I http://aim.johnkeston.com/im2490/p5jsDemo/ostraka_visualization.html
I https://developer.mozilla.org/en/Introducing_the_Audio_API_Extension#The_MozAudioAvailable_event
15.04.2011 Mayflower GmbH 18
Vielen Dank für Ihre Aufmerksamkeit!
Kontakt Martin Ruprecht
+49 89 24 20 54 1116
Mayflower GmbH
Mannhardtstrasse 6
80538 München
Mayflower GmbH I 19
Code-Beispiele: Lesen einer Audio-Datei
<!DOCTYPE html><html>
<head><title>Einfaches Lesen einer Audio-Datei</title><body>
<audio id="ap" src="tracks/1.ogg" controls="true"></audio>
<pre id="raw"></pre>
<script>
function loadedMetadata() {channels = audio.mozChannels;rate = audio.mozSampleRate;frameBufferLength = audio.mozFrameBufferLength;
}
function audioAvailable(event) {var frameBuffer = event.frameBuffer;var t = event.time;
var text = "Samples at: " + t + "\n" + frameBuffer[0] + " " + frameBuffer[1];raw.innerHTML = text;
}
var raw = document.getElementById('raw')var audio = document.getElementById('ap');
audio.addEventListener('MozAudioAvailable', audioAvailable, false);audio.addEventListener('loadedmetadata', loadedMetadata, false);
</script></body>
</html>
Mayflower GmbH I 20
Code-Beispiele: grafische Darstellung einer Audio-Datei
<!DOCTYPE html><html>
<head><title>Wellen-Darstellung mit Canvas-Element</title>
</head><body>
<audio id="audio_wave" src="tracks/1.ogg" controls></audio><canvas id="canvas_wave" width="512" height="200"></canvas><script>
var audio4 = document.getElementById("audio_wave");var canvas4 = document.getElementById("canvas_wave");var context4 = canvas4.getContext('2d');context4.strokeStyle = "#FFFFFF";context4.lineWidth = 2;audio4.addEventListener("MozAudioAvailable", writeSamples, false);audio4.addEventListener("loadedmetadata", getMetadata, false);
var fbLength, channels;function getMetadata() {
channels = audio4.mozChannels;fbLength = audio4.mozFrameBufferLength;
}function writeSamples (event){ // render element
var data = event.frameBuffer;var samples = 512;var step = (fbLength / channels) / samples;context4.fillRect(0, 0, 512, 200);context4.beginPath();context4.moveTo(0, 100 - data[0]*100);for(var i=1; i< samples; i++){
context4.lineTo(i, 100-data[i*step]*100);}context4.stroke();
}</script>
</body></html>
Mayflower GmbH I 21
Code-Beispiele: Erzeugen von Tönen
<!DOCTYPE html><html>
<head><title>Alle meine Entchen</title><script type="text/javascript">
function playTone(frequency) {var output = new Audio();var sampleRate = 44100;output.mozSetup(2,sampleRate);
var samples = new Float32Array(sampleRate);var len = samples.length;
var k = 2 * Math.PI * frequency / sampleRate;
var currentSoundSample = 0;for (var i=0; i<len; i++) {
samples[i] = Math.sin(k * currentSoundSample++);}
output.mozWriteAudio(samples);}
</script></head><body>
<button onclick="playTone(130.813);">C</button><button onclick="playTone(146.832);">D</button><button onclick="playTone(164.814);">E</button><button onclick="playTone(174.614);">F</button><button onclick="playTone(195.998);">G</button><button onclick="playTone(220.000);">A</button>
</body></html>