Confirmed users
656
edits
(14 intermediate revisions by the same user not shown) | |||
Line 33: | Line 33: | ||
* Native array interfaces instead of using accessors and IDL array arguments. | * Native array interfaces instead of using accessors and IDL array arguments. | ||
* No zero padding of audio data occurs anymore. All frames are exactly 4096 elements in length. | * No zero padding of audio data occurs anymore. All frames are exactly 4096 elements in length. | ||
* Added ''' | * Added '''mozCurrentSampleOffset()''' | ||
* Removed undocumented position/buffer methods on audio element. | * Removed undocumented position/buffer methods on audio element. | ||
* Added '''mozChannels''' | * Added '''mozChannels''', '''mozRate''', '''mozFrameBufferLength''' to '''loadedmetadata' event. | ||
Demos written for the previous version are '''not''' compatible, though can be made to be quite easily. See details below. | Demos written for the previous version are '''not''' compatible, though can be made to be quite easily. See details below. | ||
Line 65: | Line 65: | ||
var channels, | var channels, | ||
rate, | rate, | ||
frameBufferLength, | |||
samples; | samples; | ||
function audioInfo(event) { | function audioInfo(event) { | ||
channels = event.mozChannels; | channels = event.mozChannels; | ||
rate | rate = event.mozRate; | ||
frameBufferLength = event.mozFrameBufferLength; | |||
} | } | ||
Line 107: | Line 109: | ||
var canvas = document.getElementById('fft'), | var canvas = document.getElementById('fft'), | ||
ctx = canvas.getContext('2d'), | ctx = canvas.getContext('2d'), | ||
fft; | |||
function loadedMetadata(event) { | function loadedMetadata(event) { | ||
channels = event.mozChannels | var channels = event.mozChannels, | ||
rate = event.mozRate, | |||
frameBufferLength = event.mozFrameBufferLength; | |||
fft = new FFT(frameBufferLength / channels, rate), | |||
} | } | ||
function audioWritten(event) { | function audioWritten(event) { | ||
var fb = event.mozFrameBuffer, | var fb = event.mozFrameBuffer, | ||
signal = new Float32Array(fb.length / channels), | signal = new Float32Array(fb.length / channels), | ||
magnitude; | magnitude; | ||
for (var i = 0, fbl = fb.length / 2; i < fbl; i++ ) { | for (var i = 0, fbl = fb.length / 2; i < fbl; i++ ) { | ||
// Assuming interlaced stereo channels, need to split and merge into a stero-mix mono signal | // Assuming interlaced stereo channels, | ||
// need to split and merge into a stero-mix mono signal | |||
signal[i] = (fb[2*i] + fb[2*i+1]) / 2; | signal[i] = (fb[2*i] + fb[2*i+1]) / 2; | ||
} | } | ||
Line 132: | Line 136: | ||
for (var i = 0; i < fft.spectrum.length; i++ ) { | for (var i = 0; i < fft.spectrum.length; i++ ) { | ||
magnitude = fft.spectrum[i] * 4000; | // multiply spectrum by a zoom value | ||
magnitude = fft.spectrum[i] * 4000; | |||
// Draw rectangle bars for each frequency bin | // Draw rectangle bars for each frequency bin | ||
Line 177: | Line 182: | ||
spectrum = this.spectrum; | spectrum = this.spectrum; | ||
if ( bufferSize !== buffer.length ) { | if ( bufferSize !== buffer.length ) { | ||
throw "Supplied buffer is not the same size as defined FFT. FFT Size: " + | throw "Supplied buffer is not the same size as defined FFT. FFT Size: " + | ||
Line 266: | Line 268: | ||
</pre> | </pre> | ||
<code> | <code>mozCurrentSampleOffset()</code> | ||
<pre> | <pre> | ||
// Get current position of the underlying audio stream, measured in samples written. | // Get current position of the underlying audio stream, measured in samples written. | ||
var currentSampleOffset = audioOutput. | var currentSampleOffset = audioOutput.mozCurrentSampleOffset(); | ||
</pre> | </pre> | ||
Line 291: | Line 293: | ||
// Setup a2 to be identical to a1, and play through there. | // Setup a2 to be identical to a1, and play through there. | ||
a2.mozSetup(event.mozChannels, event.mozRate, 1); | a2.mozSetup(event.mozChannels, event.mozRate, 1); | ||
} | } | ||
Line 315: | Line 316: | ||
<body> | <body> | ||
<input type="text" size="4" id="freq" value="440"><label for="hz">Hz</label> | <input type="text" size="4" id="freq" value="440"><label for="hz">Hz</label> | ||
<button onclick="start()">play</button> | <button onclick="start()">play</button> | ||
<button onclick="stop()">stop</button> | <button onclick="stop()">stop</button> | ||
<script type="text/javascript"> | <script type="text/javascript"> | ||
var | var sampleRate = 44100, | ||
portionSize = sampleRate / 10, | |||
prebufferSize = sampleRate / 2, | |||
freq = undefined; // no sound | |||
var audio = new Audio(); | |||
audio.mozSetup(1, sampleRate, 1); | |||
var currentWritePosition = 0; | |||
function | function getSoundData(t, size) { | ||
var soundData = new Float32Array(size); | |||
if (freq) { | |||
var k = 2* Math.PI * freq / sampleRate; | |||
for (var i=0; i<size; i++) { | |||
soundData[i] = Math.sin(k * (i + t)); | |||
} | |||
} | |||
return soundData; | |||
} | } | ||
function | function writeData() { | ||
while(audio.mozCurrentSampleOffset() + prebufferSize >= currentWritePosition) { | |||
var soundData = getSoundData(currentWritePosition, portionSize); | |||
audio.mozWriteAudio(soundData); | |||
currentWritePosition += portionSize; | |||
} | } | ||
} | } | ||
function | // initial write | ||
writeData(); | |||
var writeInterval = Math.floor(1000 * portionSize / sampleRate); | |||
setInterval(writeData, writeInterval); | |||
function start() { | |||
freq = parseFloat(document.getElementById("freq").value); | freq = parseFloat(document.getElementById("freq").value); | ||
} | } | ||
function stop() { | |||
freq = undefined; | |||
} | |||
</script> | </script> | ||
</body> | </body> | ||
Line 378: | Line 381: | ||
readonly attribute unsigned long mozChannels; | readonly attribute unsigned long mozChannels; | ||
readonly attribute unsigned long mozRate; | readonly attribute unsigned long mozRate; | ||
readonly attribute unsigned long mozFrameBufferLength; | |||
}; | }; | ||
</pre> | </pre> | ||
The '''mozChannels''' attribute contains a the number of channels in this audio resource (e.g., 2). The '''mozRate''' attribute contains the number of samples per second that will be played, for example 44100. | The '''mozChannels''' attribute contains a the number of channels in this audio resource (e.g., 2). The '''mozRate''' attribute contains the number of samples per second that will be played, for example 44100. The '''mozFrameBufferLength''' attribute contains the number of samples that will be returned in each '''AudioWritten''' event. This number is a total for all channels (e.g., 2 channels * 2048 samples = 4096 total). | ||
===== nsIDOMNotifyAudioWrittenEvent ===== | ===== nsIDOMNotifyAudioWrittenEvent ===== | ||
Line 456: | Line 460: | ||
=== JavaScript Audio Libraries === | === JavaScript Audio Libraries === | ||
We have started work on a JavaScript library to make building audio web apps easier. Details are [[Audio Data API JS Library|here]]. | * We have started work on a JavaScript library to make building audio web apps easier. Details are [[Audio Data API JS Library|here]]. | ||
* [http://github.com/bfirsh/dynamicaudio.js dynamicaudio.js] - An interface for writing audio with a Flash fall back for older browsers. | |||
=== Working Audio Data Demos === | === Working Audio Data Demos === | ||
Line 468: | Line 473: | ||
* FFT visualization (calculated with js) | * FFT visualization (calculated with js) | ||
** http://weare.buildingsky.net/processing/dsp.js/examples/fft.html | ** http://weare.buildingsky.net/processing/dsp.js/examples/fft.html | ||
* Beat Detection (also showing use of WebGL for 3D visualizations) | |||
** http://cubicvr.org/CubicVR.js/bd3/BeatDetektor1HD-13a.html (video [http://vimeo.com/11345262 here]) | |||
** http://cubicvr.org/CubicVR.js/bd3/BeatDetektor2HD-13a.html (video of older version [http://vimeo.com/11345685 here]) | |||
** http://cubicvr.org/CubicVR.js/bd3/BeatDetektor3HD-13a.html (video [http://www.youtube.com/watch?v=OxoFcyKYwr0&fmt=22 here]) | |||
* Writing Audio from JavaScript, Digital Signal Processing | * Writing Audio from JavaScript, Digital Signal Processing | ||
** Csound shaker instrument ported to JavaScript via Processing.js http://scotland.proximity.on.ca/dxr/tmp/audio/shaker/ | ** Csound shaker instrument ported to JavaScript via Processing.js http://scotland.proximity.on.ca/dxr/tmp/audio/shaker/ | ||
==== Demos Needing to be Updated to New API ==== | ==== Demos Needing to be Updated to New API ==== | ||
Line 483: | Line 492: | ||
** http://ondras.zarovi.cz/demos/audio/ | ** http://ondras.zarovi.cz/demos/audio/ | ||
** http://weare.buildingsky.net/processing/beat_detektor/beat_detektor.html | ** http://weare.buildingsky.net/processing/beat_detektor/beat_detektor.html | ||
** http://code.bocoup.com/processing-js/3d-fft/viz.xhtml | ** http://code.bocoup.com/processing-js/3d-fft/viz.xhtml |