realtime audio on ze web @ hhjs
DESCRIPTION
A brief overview of current direct audio APIs in modern browsers and what to build with it.TRANSCRIPT
![Page 1: realtime audio on ze web @ hhjs](https://reader034.vdocument.in/reader034/viewer/2022051323/547e9696b47959b1508b4b7b/html5/thumbnails/1.jpg)
realtime audio on ze web
APIs, Demos, AnwendungenJan Krutisch <[email protected]>für #hhjs, 21.Februar 2011
Montag, 21. Februar 2011
![Page 2: realtime audio on ze web @ hhjs](https://reader034.vdocument.in/reader034/viewer/2022051323/547e9696b47959b1508b4b7b/html5/thumbnails/2.jpg)
Moi.
Montag, 21. Februar 2011
![Page 3: realtime audio on ze web @ hhjs](https://reader034.vdocument.in/reader034/viewer/2022051323/547e9696b47959b1508b4b7b/html5/thumbnails/3.jpg)
Realtime audio?
Montag, 21. Februar 2011
![Page 4: realtime audio on ze web @ hhjs](https://reader034.vdocument.in/reader034/viewer/2022051323/547e9696b47959b1508b4b7b/html5/thumbnails/4.jpg)
In/Out
Montag, 21. Februar 2011
![Page 5: realtime audio on ze web @ hhjs](https://reader034.vdocument.in/reader034/viewer/2022051323/547e9696b47959b1508b4b7b/html5/thumbnails/5.jpg)
Status Quo.
Montag, 21. Februar 2011
![Page 6: realtime audio on ze web @ hhjs](https://reader034.vdocument.in/reader034/viewer/2022051323/547e9696b47959b1508b4b7b/html5/thumbnails/6.jpg)
nada.
Montag, 21. Februar 2011
![Page 7: realtime audio on ze web @ hhjs](https://reader034.vdocument.in/reader034/viewer/2022051323/547e9696b47959b1508b4b7b/html5/thumbnails/7.jpg)
flash.
Montag, 21. Februar 2011
![Page 8: realtime audio on ze web @ hhjs](https://reader034.vdocument.in/reader034/viewer/2022051323/547e9696b47959b1508b4b7b/html5/thumbnails/8.jpg)
horizont.
Montag, 21. Februar 2011
![Page 9: realtime audio on ze web @ hhjs](https://reader034.vdocument.in/reader034/viewer/2022051323/547e9696b47959b1508b4b7b/html5/thumbnails/9.jpg)
Montag, 21. Februar 2011
![Page 10: realtime audio on ze web @ hhjs](https://reader034.vdocument.in/reader034/viewer/2022051323/547e9696b47959b1508b4b7b/html5/thumbnails/10.jpg)
Audio Data API
Montag, 21. Februar 2011
![Page 11: realtime audio on ze web @ hhjs](https://reader034.vdocument.in/reader034/viewer/2022051323/547e9696b47959b1508b4b7b/html5/thumbnails/11.jpg)
<audio/>
Montag, 21. Februar 2011
![Page 12: realtime audio on ze web @ hhjs](https://reader034.vdocument.in/reader034/viewer/2022051323/547e9696b47959b1508b4b7b/html5/thumbnails/12.jpg)
10 beta
Montag, 21. Februar 2011
![Page 13: realtime audio on ze web @ hhjs](https://reader034.vdocument.in/reader034/viewer/2022051323/547e9696b47959b1508b4b7b/html5/thumbnails/13.jpg)
Montag, 21. Februar 2011
![Page 14: realtime audio on ze web @ hhjs](https://reader034.vdocument.in/reader034/viewer/2022051323/547e9696b47959b1508b4b7b/html5/thumbnails/14.jpg)
Montag, 21. Februar 2011
![Page 15: realtime audio on ze web @ hhjs](https://reader034.vdocument.in/reader034/viewer/2022051323/547e9696b47959b1508b4b7b/html5/thumbnails/15.jpg)
Montag, 21. Februar 2011
![Page 16: realtime audio on ze web @ hhjs](https://reader034.vdocument.in/reader034/viewer/2022051323/547e9696b47959b1508b4b7b/html5/thumbnails/16.jpg)
Web Audio API
Montag, 21. Februar 2011
![Page 17: realtime audio on ze web @ hhjs](https://reader034.vdocument.in/reader034/viewer/2022051323/547e9696b47959b1508b4b7b/html5/thumbnails/17.jpg)
AudioContext
Montag, 21. Februar 2011
![Page 18: realtime audio on ze web @ hhjs](https://reader034.vdocument.in/reader034/viewer/2022051323/547e9696b47959b1508b4b7b/html5/thumbnails/18.jpg)
Das wars.
Montag, 21. Februar 2011
![Page 19: realtime audio on ze web @ hhjs](https://reader034.vdocument.in/reader034/viewer/2022051323/547e9696b47959b1508b4b7b/html5/thumbnails/19.jpg)
Ja, sorry, ey.
Montag, 21. Februar 2011
![Page 20: realtime audio on ze web @ hhjs](https://reader034.vdocument.in/reader034/viewer/2022051323/547e9696b47959b1508b4b7b/html5/thumbnails/20.jpg)
Code, or it didn‘t happen
Montag, 21. Februar 2011
![Page 21: realtime audio on ze web @ hhjs](https://reader034.vdocument.in/reader034/viewer/2022051323/547e9696b47959b1508b4b7b/html5/thumbnails/21.jpg)
<!DOCTYPE html><html> <head> <title>JavaScript Audio Write Example</title> </head> <body> <input type="text" size="4" id="freq" value="440"><label for="hz">Hz</label> <button onclick="start()">play</button> <button onclick="stop()">stop</button>
<script type="text/javascript"> function AudioDataDestination(sampleRate, readFn) { // Initialize the audio output. var audio = new Audio(); audio.mozSetup(1, sampleRate);
var currentWritePosition = 0; var prebufferSize = sampleRate / 2; // buffer 500ms var tail = null;
// The function called with regular interval to populate // the audio output buffer. setInterval(function() { var written; // Check if some data was not written in previous attempts. if(tail) { written = audio.mozWriteAudio(tail); currentWritePosition += written; if(written < tail.length) { // Not all the data was written, saving the tail... tail = tail.slice(written); return; // ... and exit the function. } tail = null; }
// Check if we need add some data to the audio output. var currentPosition = audio.mozCurrentSampleOffset(); var available = currentPosition + prebufferSize - currentWritePosition; if(available > 0) { // Request some sound data from the callback function. var soundData = new Float32Array(available); readFn(soundData);
// Writting the data. written = audio.mozWriteAudio(soundData); if(written < soundData.length) { // Not all the data was written, saving the tail. tail = soundData.slice(written); } currentWritePosition += written; } }, 100); }
// Control and generate the sound.
var frequency = 0, currentSoundSample; var sampleRate = 44100;
function requestSoundData(soundData) { if (!frequency) { return; // no sound selected }
var k = 2* Math.PI * frequency / sampleRate; for (var i=0, size=soundData.length; i<size; i++) { soundData[i] = Math.sin(k * currentSoundSample++); } }
var audioDestination = new AudioDataDestination(sampleRate, requestSoundData);
function start() { currentSoundSample = 0; frequency = parseFloat(document.getElementById("freq").value); }
function stop() { frequency = 0; } </script>
Montag, 21. Februar 2011
![Page 22: realtime audio on ze web @ hhjs](https://reader034.vdocument.in/reader034/viewer/2022051323/547e9696b47959b1508b4b7b/html5/thumbnails/22.jpg)
[...]
var audio = new Audio(); audio.mozSetup(1, sampleRate);
[...]
written = audio.mozWriteAudio(tail);
[...]
Montag, 21. Februar 2011
![Page 23: realtime audio on ze web @ hhjs](https://reader034.vdocument.in/reader034/viewer/2022051323/547e9696b47959b1508b4b7b/html5/thumbnails/23.jpg)
https://wiki.mozilla.org/Audio_Data_API#Writing_Audio
Montag, 21. Februar 2011
![Page 24: realtime audio on ze web @ hhjs](https://reader034.vdocument.in/reader034/viewer/2022051323/547e9696b47959b1508b4b7b/html5/thumbnails/24.jpg)
context = new webkitAudioContext();
var jsNode = context.createJavaScriptNode(8192, 0, 2);
jsNode.connect(context.destination);
jsNode.onaudioprocess = requestSoundData;
Montag, 21. Februar 2011
![Page 25: realtime audio on ze web @ hhjs](https://reader034.vdocument.in/reader034/viewer/2022051323/547e9696b47959b1508b4b7b/html5/thumbnails/25.jpg)
Anwendungen
Montag, 21. Februar 2011
![Page 26: realtime audio on ze web @ hhjs](https://reader034.vdocument.in/reader034/viewer/2022051323/547e9696b47959b1508b4b7b/html5/thumbnails/26.jpg)
Musik
Montag, 21. Februar 2011
![Page 27: realtime audio on ze web @ hhjs](https://reader034.vdocument.in/reader034/viewer/2022051323/547e9696b47959b1508b4b7b/html5/thumbnails/27.jpg)
Spiele
Montag, 21. Februar 2011
![Page 28: realtime audio on ze web @ hhjs](https://reader034.vdocument.in/reader034/viewer/2022051323/547e9696b47959b1508b4b7b/html5/thumbnails/28.jpg)
(Build and they will come)
Montag, 21. Februar 2011
![Page 29: realtime audio on ze web @ hhjs](https://reader034.vdocument.in/reader034/viewer/2022051323/547e9696b47959b1508b4b7b/html5/thumbnails/29.jpg)
Meine kleine Ecke
Montag, 21. Februar 2011
![Page 30: realtime audio on ze web @ hhjs](https://reader034.vdocument.in/reader034/viewer/2022051323/547e9696b47959b1508b4b7b/html5/thumbnails/30.jpg)
http://webloop.pixelpoke.de
Montag, 21. Februar 2011
![Page 31: realtime audio on ze web @ hhjs](https://reader034.vdocument.in/reader034/viewer/2022051323/547e9696b47959b1508b4b7b/html5/thumbnails/31.jpg)
http://github.com/halfbyte/soundbridge.js
Montag, 21. Februar 2011
![Page 32: realtime audio on ze web @ hhjs](https://reader034.vdocument.in/reader034/viewer/2022051323/547e9696b47959b1508b4b7b/html5/thumbnails/32.jpg)
soundbridge = SoundBridge(2, 44100, '..');
[...] soundbridge.setCallback(calc); soundbridge.play();}, 1000);
Montag, 21. Februar 2011