Mozilla Audio Data API

Mozilla Audio Data APIMartin 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 *.oggI 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ändigI 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

audio = document.getElementById( ap );I Properties * · audio.currentSrc · audio.volume · audio.duration · audio.currentTime · audio.mozChannels · audio.mozSampleRate · audio.mozFrameBufferLengthI * nicht vollständigI Quellen: https://developer.mozilla.org/En/HTML/Element/Audio https://dev.mozilla.jp/localmdc/localmdc_2212.html Mayflower GmbH I 10

audio.mozChannelsI Anzahl der genutzten KanäleI Mögliche Werte: ·1 Mono ·2 Stereo ·6 Surround Sound 5.1 Mayflower GmbH I 11

audio.mozSampleRateI Samplingrate oder AbtastfrequenzI Bsp.: ·44,1 kHz für CD Qualität (44100 Hz) Mayflower GmbH I 12

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

audio = document.getElementById( ap );I Events * ·loadedmetadata ·timeupdate ·pause ·play ·ended ·MozAudioAvailable ·I * nicht vollständigI Quelle: https://developer.mozilla.org/En/HTML/Element/Audio Mayflower GmbH I 14

MozAudioAvailableI MozAudioAvailable · Wird gefeuert wenn genügend Samples decodiert wurdenI audio.addEventListener(MozAudioAvailable, _someFct_, false); ·Übergabeparameter an _someFct_: FrameBuffer (Rohdaten, als Float32Array) TimeI Quelle: https://developer.mozilla.org/en/JavaScript_typed_arrays Mayflower GmbH I 15

… jetzt aber mal los Demo! Mayflower GmbH I 16

LinksI http://haptic-data.com/sketches/html5/fft1.htmlI http://blog.dt.in.th/stuff/audiodata/I http://www.nihilogic.dk/labs/pocket_full_of_html5/#presets/void.jsI http://niiden.com/simplesynth/simplesynth.htmlI http://vocamus.net/dave/?p=1074I http://www.youtube.com/watch?v=8qME7_Eza54&feature=youtu.beI http://aim.johnkeston.com/im2490/p5jsDemo/ostraka_visualization.htmlI 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ünchen15.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

by Mayflower GmbH on Apr 15, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

2 Embeds 38

Statistics

Mozilla Audio Data API — Presentation Transcript

http://blog.mayflower.de	37
url_unknown	1