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 gleich...
+   <audio>                  =Zugriff und Erzeugen von Audio-Rohdaten                                  Mayflower GmbH I 5
audio = document.getElementById(  ap  );I   Functions *    · audio.load();    · audio.play();    · audio.pause();    · aud...
audio.mozSetup();I mozSetUp(channels, sampleRate)   ·Übergabeparameter:      Anzahl der Kanäle, z.B. 2 bei Stereo      A...
audio.mozWriteAudio();I mozWriteAudio(buffer)   ·Wird nach mozSetup() aufgerufen   ·Übergabeparameter:      buffer (Rohda...
audio.mozCurrentSampleOffset();I mozCurrentSampleOffset()   ·Liefert die aktuelle Position (der Samples) des Audiostreams ...
audio = document.getElementById(  ap  );I    Properties *     · audio.currentSrc     · audio.volume     · audio.duration  ...
audio.mozChannelsI   Anzahl der genutzten KanäleI   Mögliche Werte:    ·1 Mono    ·2 Stereo    ·6 Surround Sound 5.1      ...
audio.mozSampleRateI   Samplingrate oder AbtastfrequenzI   Bsp.:    ·44,1 kHz für CD Qualität (44100 Hz)                  ...
audio.mozFrameBufferLengthI   Anzahl der Samples in allen Kanälen die genutzt    werden um die Audio-Daten zu empfangen.I ...
audio = document.getElementById(  ap  );I   Events *    ·loadedmetadata    ·timeupdate    ·pause    ·play    ·ended    ·Mo...
MozAudioAvailableI MozAudioAvailable    ·    Wird gefeuert wenn genügend Samples decodiert wurdenI audio.addEventListener(...
… 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/lab...
Vielen Dank für Ihre Aufmerksamkeit!     Kontakt   Martin Ruprecht               martin.ruprecht@mayflower.de             ...
Code-Beispiele: Lesen einer Audio-Datei<!DOCTYPE html><html>  <head>    <title>Einfaches Lesen einer Audio-Datei</title>  ...
Code-Beispiele: grafische Darstellung einer Audio-Datei<!DOCTYPE html><html>    <head>        <title>Wellen-Darstellung mi...
Code-Beispiele: Erzeugen von Tönen<!DOCTYPE html><html>    <head>        <title>Alle meine Entchen</title>        <script ...
Upcoming SlideShare
Loading in …5
×

Mozilla Audio Data API

3,626 views

Published on

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.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Mozilla Audio Data API

  1. 1. Mozilla Audio Data APIMartin Ruprecht I 14. April 2011 © Mayflower GmbH 2011
  2. 2. Firefox 4 only! Mayflower GmbH I 2
  3. 3. <audio> Mayflower GmbH I 3
  4. 4. 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
  5. 5. + <audio> =Zugriff und Erzeugen von Audio-Rohdaten Mayflower GmbH I 5
  6. 6. 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
  7. 7. 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
  8. 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 8
  9. 9. audio.mozCurrentSampleOffset();I mozCurrentSampleOffset() ·Liefert die aktuelle Position (der Samples) des Audiostreams Mayflower GmbH I 9
  10. 10. 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
  11. 11. audio.mozChannelsI Anzahl der genutzten KanäleI Mögliche Werte: ·1 Mono ·2 Stereo ·6 Surround Sound 5.1 Mayflower GmbH I 11
  12. 12. audio.mozSampleRateI Samplingrate oder AbtastfrequenzI Bsp.: ·44,1 kHz für CD Qualität (44100 Hz) Mayflower GmbH I 12
  13. 13. 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
  14. 14. 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
  15. 15. 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
  16. 16. … jetzt aber mal los Demo! Mayflower GmbH I 16
  17. 17. 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
  18. 18. 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
  19. 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 19
  20. 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 20
  21. 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> Mayflower GmbH I 21

×