Confirmed users
656
edits
Audio Data API Review Version: Difference between revisions
→Complete Example: Visualizing Audio Spectrum
| Line 111: | Line 111: | ||
controls="true" | controls="true" | ||
onloadedmetadata="loadedMetadata();" | onloadedmetadata="loadedMetadata();" | ||
style="width: 512px;"> | style="width: 512px;"> | ||
</audio> | </audio> | ||
| Line 119: | Line 118: | ||
var canvas = document.getElementById('fft'), | var canvas = document.getElementById('fft'), | ||
ctx = canvas.getContext('2d'), | ctx = canvas.getContext('2d'), | ||
channels, | |||
rate, | |||
frameBufferLength, | |||
fft; | fft; | ||
function loadedMetadata() { | function loadedMetadata() { | ||
channels = audio.mozChannels, | |||
rate = audio.mozSampleRate, | |||
frameBufferLength = audio.mozFrameBufferLength; | |||
fft = new FFT(frameBufferLength / channels, rate), | fft = new FFT(frameBufferLength / channels, rate), | ||
| Line 131: | Line 132: | ||
function audioAvailable(event) { | function audioAvailable(event) { | ||
var fb = event. | var fb = event.frameBuffer, | ||
t = event.time; /* unused, but it's there */ | |||
signal = new Float32Array(fb.length / channels), | signal = new Float32Array(fb.length / channels), | ||
magnitude; | magnitude; | ||
| Line 154: | Line 156: | ||
} | } | ||
} | } | ||
var audio = document.getElementById('audio-element'); | |||
audio.addEventListener('MozAudioAvailable', audioAvailable, false); | |||
// FFT from dsp.js, see below | // FFT from dsp.js, see below | ||
| Line 194: | Line 199: | ||
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: " + bufferSize + " Buffer Size: " + buffer.length; | ||
} | } | ||