Mozilla Audio Data API

Mozilla Audio Data API

Martin Ruprecht I 14. April 2011

© Mayflower GmbH 2011

Firefox 4 only!
Mayflower GmbH I 2

<audio>

Mayflower GmbH I 3

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 4

+
<audio>

=
Zugriff und Erzeugen von Audio-Rohdaten
Mayflower GmbH I 5

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 6

audio.mozSetup();

I mozSetUp(channels, sampleRate)
·Übergabeparameter:
Anzahl der Kanäle, z.B. 2 bei Stereo
Abtastfrequenz in Hz, z.B. 44100
·Muss vor mozWriteAudio bzw. mozCurrentSampleOffset
aufgerufen werden

Mayflower GmbH I 7

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 8

audio.mozCurrentSampleOffset();

I mozCurrentSampleOffset()
·Liefert die aktuelle Position (der Samples) des Audiostreams

Mayflower GmbH I 9


I Properties *
· audio.currentSrc
· audio.volume
· audio.duration
· audio.currentTime
· audio.mozChannels
· audio.mozSampleRate
· audio.mozFrameBufferLength

I Quellen:
https://developer.mozilla.org/En/HTML/Element/Audio
https://dev.mozilla.jp/localmdc/localmdc_2212.html

Mayflower GmbH I 10

audio.mozChannels

I Anzahl der genutzten Kanäle
I Mögliche Werte:
·1 Mono
·2 Stereo
·6 Surround Sound 5.1

Mayflower GmbH I 11

audio.mozSampleRate

I Samplingrate oder Abtastfrequenz
I Bsp.:
·44,1 kHz für CD Qualität (44100 Hz)

Mayflower GmbH I 12

audio.mozFrameBufferLength

I Anzahl der Samples in allen Kanälen die genutzt
werden um die Audio-Daten zu empfangen.
I reine Information zu Beginn
I Bsp:
·2048 (1024 pro Kanal bei Stereo)

Mayflower GmbH I 13


I Events *
·loadedmetadata
·timeupdate
·pause
·play
·ended
·MozAudioAvailable
·

I Quelle: https://developer.mozilla.org/En/HTML/Element/Audio

Mayflower GmbH I 14

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 15

… jetzt aber mal los

Demo!
Mayflower GmbH I 16

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_MozAudioA
vailable_event

Mayflower GmbH I 17

Vielen Dank für Ihre Aufmerksamkeit!

Kontakt Martin Ruprecht
martin.ruprecht@mayflower.de
+49 89 24 20 54 1 16
1

Mayflower GmbH
Mannhardtstrasse 6
80538 München

15.04.2011 Mayflower GmbH 18

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 19

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 20

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>

Mayflower GmbH I 21

Mozilla Audio Data API

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Mozilla Audio Data API

Semelhante a Mozilla Audio Data API (12)

Mais de Mayflower GmbH

Mais de Mayflower GmbH (20)

Mozilla Audio Data API