realtime audio on ze web @ hhjs

1,774 views

Published on

A brief overview of current direct audio APIs in modern browsers and what to build with it.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,774
On SlideShare
0
From Embeds
0
Number of Embeds
67
Actions
Shares
0
Downloads
3
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

realtime audio on ze web @ hhjs

  1. 1. realtime audio on ze web APIs, Demos, Anwendungen Jan Krutisch <jan.krutisch@mindmatters.de> für #hhjs, 21.Februar 2011Montag, 21. Februar 2011
  2. 2. Moi.Montag, 21. Februar 2011
  3. 3. Realtime audio?Montag, 21. Februar 2011
  4. 4. In/OutMontag, 21. Februar 2011
  5. 5. Status Quo.Montag, 21. Februar 2011
  6. 6. nada.Montag, 21. Februar 2011
  7. 7. flash.Montag, 21. Februar 2011
  8. 8. horizont.Montag, 21. Februar 2011
  9. 9. Montag, 21. Februar 2011
  10. 10. Audio Data APIMontag, 21. Februar 2011
  11. 11. <audio/>Montag, 21. Februar 2011
  12. 12. 10 betaMontag, 21. Februar 2011
  13. 13. Montag, 21. Februar 2011
  14. 14. Montag, 21. Februar 2011
  15. 15. Montag, 21. Februar 2011
  16. 16. Web Audio APIMontag, 21. Februar 2011
  17. 17. AudioContextMontag, 21. Februar 2011
  18. 18. Das wars.Montag, 21. Februar 2011
  19. 19. Ja, sorry, ey.Montag, 21. Februar 2011
  20. 20. Code, or it didn‘t happenMontag, 21. Februar 2011
  21. 21. <!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
  22. 22. [...] var audio = new Audio(); audio.mozSetup(1, sampleRate); [...] written = audio.mozWriteAudio(tail); [...]Montag, 21. Februar 2011
  23. 23. https://wiki.mozilla.org/Audio_Data_API#Writing_AudioMontag, 21. Februar 2011
  24. 24. context = new webkitAudioContext(); var jsNode = context.createJavaScriptNode(8192, 0, 2); jsNode.connect(context.destination); jsNode.onaudioprocess = requestSoundData;Montag, 21. Februar 2011
  25. 25. AnwendungenMontag, 21. Februar 2011
  26. 26. MusikMontag, 21. Februar 2011
  27. 27. SpieleMontag, 21. Februar 2011
  28. 28. ( Build and they will come )Montag, 21. Februar 2011
  29. 29. Meine kleine EckeMontag, 21. Februar 2011
  30. 30. http://webloop.pixelpoke.deMontag, 21. Februar 2011
  31. 31. http://github.com/halfbyte/soundbridge.jsMontag, 21. Februar 2011
  32. 32. soundbridge = SoundBridge(2, 44100, ..); [...] soundbridge.setCallback(calc); soundbridge.play(); }, 1000);Montag, 21. Februar 2011

×