/*
* Add code to sample code 01
*/
// ....
analyser.fftSize = 2048; // The default value
var intervalid = window.setInterval(function() {
// Get data for drawing sound wave
var times = new Uint8Array(analyser.fftSize);
analyser.getByteTimeDomainData(times);
}, 500);
/*
* Add code to sample code 01
*/
// ....
analyser.fftSize = 2048; // The default value
var canvas = document.querySelector('canvas');
var canvasContext = canvas.getContext('2d');
var intervalid = window.setInterval(function() {
// Get data for drawing sound wave
var times = new Uint8Array(analyser.fftSize);
analyser.getByteTimeDomainData(times);
for (var i = 0, len = times.length; i < len; i++) {
var y = times[i] / 255; // 0 - 1
}
}, 500);
/*
* Add code to sample code 01
*/
// ....
analyser.fftSize = 2048; // The default value
var canvas = document.querySelector('canvas');
var canvasContext = canvas.getContext('2d');
var intervalid = window.setInterval(function() {
// Get data for drawing sound wave
var times = new Uint8Array(analyser.fftSize);
analyser.getByteTimeDomainData(times);
for (var i = 0, len = times.length; i < len; i++) {
var y = 1 - (times[i] / 255);
}
}, 500);
/*
* Add code to sample code 01
*/
// ....
analyser.fftSize = 2048; // The default value
var canvas = document.querySelector('canvas');
var canvasContext = canvas.getContext('2d');
var intervalid = window.setInterval(function() {
// Get data for drawing sound wave
var times = new Uint8Array(analyser.fftSize);
analyser.getByteTimeDomainData(times);
for (var i = 0, len = times.length; i < len; i++) {
var y = (1 - (times[i] / 255)) * canvas.height;
}
}, 500);
/*
* Add code to sample code 01
*/
// ....
analyser.fftSize = 2048; // The default value
var canvas = document.querySelector('canvas');
var canvasContext = canvas.getContext('2d');
var intervalid = window.setInterval(function() {
// Get data for drawing sound wave
var times = new Uint8Array(analyser.fftSize);
analyser.getByteTimeDomainData(times);
for (var i = 0, len = times.length; i < len; i++) {
var x = (i / len) * canvas.width;
var y = (1 - (times[i] / 255)) * canvas.height;
}
}, 500);
/*
* Add code to sample code 01
*/
// ....
analyser.fftSize = 2048; // The default value
var canvas = document.querySelector('canvas');
var canvasContext = canvas.getContext('2d');
var intervalid = window.setInterval(function() {
// Get data for drawing sound wave
var times = new Uint8Array(analyser.fftSize);
analyser.getByteTimeDomainData(times);
// Clear previous data
canvasContext.clearRect(0, 0, canvas.width, canvas.height);
// Draw sound wave
canvasContext.beginPath();
for (var i = 0, len = times.length; i < len; i++) {
var x = (i / len) * canvas.width;
var y = (1 - (times[i] / 255)) * canvas.height;
if (i === 0) {
canvasContext.moveTo(x, y);
} else {
canvasContext.lineTo(x, y);
}
}
canvasContext.stroke();
}, 500);
window.AudioContext = window.AudioContext || window.webkitAudioContext;
// Create the instance of AudioContext
var context = new AudioContext();
// Create the instance of AnalyserNode
var analyser = context.createAnalyser();
analyser.fftSize = 2048; // The default value
// for the instance of OscillatorNode
var oscillator = null;
var canvas = document.querySelector('canvas');
var canvasContext = canvas.getContext('2d');
var intervalid = null;
// Flag for starting or stopping sound
var isStop = true;
document.body.addEventListener('mousedown', function() {
if (!isStop) {
oscillator.stop(0);
}
// Create the instance of OscillatorNode
oscillator = context.createOscillator();
// for legacy browsers
oscillator.start = oscillator.start || oscillator.noteOn;
oscillator.stop = oscillator.stop || oscillator.noteOff;
// OscillatorNode (Input) -> AnalyserNode (Visualization) -> AudioDestinationNode (Output)
oscillator.connect(analyser);
analyser.connect(context.destination);
oscillator.start(0);
intervalid = window.setInterval(function() {
// Get data for drawing sound wave
var times = new Uint8Array(analyser.fftSize);
analyser.getByteTimeDomainData(times);
// Clear previous data
canvasContext.clearRect(0, 0, canvas.width, canvas.height);
// Draw sound wave
canvasContext.beginPath();
for (var i = 0, len = times.length; i < len; i++) {
var x = (i / len) * canvas.width;
var y = (1 - (times[i] / 255)) * canvas.height;
if (i === 0) {
canvasContext.moveTo(x, y);
} else {
canvasContext.lineTo(x, y);
}
}
canvasContext.stroke();
}, 500);
isStop = false;
}, false);
document.body.addEventListener('mouseup', function() {
if (isStop) {
return;
}
oscillator.stop(0);
if (intervalid !== null) {
window.clearInterval(intervalid);
intervalid = null;
}
isStop = true;
}, false);
/*
* Add code to sample code 01
*/
// ....
analyser.fftSize = 2048; // The default value
var canvas = document.querySelector('canvas');
var canvasContext = canvas.getContext('2d');
var intervalid = window.setInterval(function() {
// Get data for drawing sound wave
var times = new Uint8Array(analyser.fftSize);
analyser.getByteTimeDomainData(times);
// Clear previous data
canvasContext.clearRect(0, 0, canvas.width, canvas.height);
// Draw sound wave
canvasContext.beginPath();
for (var i = 0, len = times.length; i < len; i++) {
var x = (i / len) * canvas.width;
var y = (1 - (times[i] / 255)) * canvas.height;
if (i === 0) {
canvasContext.moveTo(x, y);
} else {
canvasContext.lineTo(x, y);
}
}
canvasContext.stroke();
// Draw text and grid (Y)
var textYs = ['1.00', '0.00', '-1.00'];
for (var i = 0, len = textYs.length; i < len; i++) {
var text = textYs[i];
var gy = ((1 - parseFloat(text)) / 2) * canvas.height;
// Draw grid (Y)
canvasContext.fillRect(0, gy, canvas.width, 1);
// Draw text (Y)
canvasContext.fillText(text, 0, gy);
}
}, 500);
/*
* Add code to sample code 01
*/
// ....
analyser.fftSize = 2048; // The default value
var canvas = document.querySelector('canvas');
var canvasContext = canvas.getContext('2d');
// Sampling Period
var period = 1 / context.sampleRate;
var intervalid = window.setInterval(function() {
// Get data for drawing sound wave
var times = new Uint8Array(analyser.fftSize);
analyser.getByteTimeDomainData(times);
// Clear previous data
canvasContext.clearRect(0, 0, canvas.width, canvas.height);
// Draw sound wave
canvasContext.beginPath();
for (var i = 0, len = times.length; i < len; i++) {
var x = (i / len) * canvas.width;
var y = (1 - (times[i] / 255)) * canvas.height;
if (i === 0) {
canvasContext.moveTo(x, y);
} else {
canvasContext.lineTo(x, y);
}
var sec = i * period; // index -> time
var msec = sec * Math.pow(10, 3); // sec -> msec
// 5 msec ?
if ((msec % 5) === 0) {
var text = Math.round(msec) + ' msec';
// Draw grid (X)
canvasContext.fillRect(x, 0, 1, canvas.height);
// Draw text (X)
canvasContext.fillText(text, x, canvas.height);
}
}
canvasContext.stroke();
// Draw text and grid (Y)
var textYs = ['1.00', '0.00', '-1.00'];
for (var i = 0, len = textYs.length; i < len; i++) {
var text = textYs[i];
var gy = ((1 - parseFloat(text)) / 2) * canvas.height;
// Draw grid (Y)
canvasContext.fillRect(0, gy, canvas.width, 1);
// Draw text (Y)
canvasContext.fillText(text, 0, gy);
}
}, 500);
/*
* Add code to sample code 01
*/
// ....
analyser.fftSize = 2048; // The default value
var canvas = document.querySelector('canvas');
var canvasContext = canvas.getContext('2d');
// Sampling period
var period = 1 / context.sampleRate;
// This value is the number of samples during 5 msec
var n5msec = Math.floor(5 * Math.pow(10, -3) * context.sampleRate);
var intervalid = window.setInterval(function() {
// Get data for drawing sound wave
var times = new Uint8Array(analyser.fftSize);
analyser.getByteTimeDomainData(times);
// Clear previous data
canvasContext.clearRect(0, 0, canvas.width, canvas.height);
// Draw sound wave
canvasContext.beginPath();
for (var i = 0, len = times.length; i < len; i++) {
var x = (i / len) * canvas.width;
var y = (1 - (times[i] / 255)) * canvas.height;
if (i === 0) {
canvasContext.moveTo(x, y);
} else {
canvasContext.lineTo(x, y);
}
// 5 msec ?
if ((i % n5msec) === 0) {
var sec = i * period; // index -> time
var msec = sec * Math.pow(10, 3); // sec -> msec
var text = Math.round(msec) + ' msec';
// Draw grid (X)
canvasContext.fillRect(x, 0, 1, canvas.height);
// Draw text (X)
canvasContext.fillText(text, x, canvas.height);
}
}
canvasContext.stroke();
// Draw text and grid (Y)
var textYs = ['1.00', '0.00', '-1.00'];
for (var i = 0, len = textYs.length; i < len; i++) {
var text = textYs[i];
var gy = ((1 - parseFloat(text)) / 2) * canvas.height;
// Draw grid (Y)
canvasContext.fillRect(0, gy, canvas.width, 1);
// Draw text (Y)
canvasContext.fillText(text, 0, gy);
}
}, 500);
/*
* Add code to sample code 01
*/
// ....
analyser.fftSize = 2048; // The default value
var intervalid = window.setInterval(function() {
// Get data for drawing spectrum
var spectrums = new Uint8Array(analyser.frequencyBinCount); // Array size is 1024 (half of FFT size)
analyser.getByteFrequencyData(spectrums);
}, 500);
/*
* Add code to sample code 01
*/
// ....
analyser.fftSize = 2048; // The default value
var canvas = document.querySelector('canvas');
var canvasContext = canvas.getContext('2d');
var intervalid = window.setInterval(function() {
// Get data for drawing spectrum
var spectrums = new Uint8Array(analyser.frequencyBinCount); // Array size is 1024 (half of FFT size)
analyser.getByteFrequencyData(spectrums);
for (var i = 0, len = spectrums.length; i < len; i++) {
var y = spectrums[i] / 255; // 0 - 1
}
}, 500);
/*
* Add code to sample code 01
*/
// ....
analyser.fftSize = 2048; // The default value
var canvas = document.querySelector('canvas');
var canvasContext = canvas.getContext('2d');
var intervalid = window.setInterval(function() {
// Get data for drawing spectrum
var spectrums = new Uint8Array(analyser.frequencyBinCount); // Array size is 1024 (half of FFT size)
analyser.getByteFrequencyData(spectrums);
for (var i = 0, len = spectrums.length; i < len; i++) {
var y = 1 - (spectrums[i] / 255);
}
}, 500);
/*
* Add code to sample code 01
*/
// ....
analyser.fftSize = 2048; // The default value
var canvas = document.querySelector('canvas');
var canvasContext = canvas.getContext('2d');
var intervalid = window.setInterval(function() {
// Get data for drawing spectrum
var spectrums = new Uint8Array(analyser.frequencyBinCount); // Array size is 1024 (half of FFT size)
analyser.getByteFrequencyData(spectrums);
for (var i = 0, len = spectrums.length; i < len; i++) {
var y = (1 - (spectrums[i] / 255)) * canvas.height;
}
}, 500);
/*
* Add code to sample code 01
*/
// ....
analyser.fftSize = 2048; // The default value
var canvas = document.querySelector('canvas');
var canvasContext = canvas.getContext('2d');
var intervalid = window.setInterval(function() {
// Get data for drawing spectrum
var spectrums = new Uint8Array(analyser.frequencyBinCount); // Array size is 1024 (half of FFT size)
analyser.getByteFrequencyData(spectrums);
for (var i = 0, len = spectrums.length; i < len; i++) {
var x = (i / len) * canvas.width;
var y = (1 - (spectrums[i] / 255)) * canvas.height;
}
}, 500);
/*
* Add code to sample code 01
*/
// ....
analyser.fftSize = 2048; // The default value
var canvas = document.querySelector('canvas');
var canvasContext = canvas.getContext('2d');
var intervalid = window.setInterval(function() {
// Get data for drawing spectrum
var spectrums = new Uint8Array(analyser.frequencyBinCount); // Array size is 1024 (half of FFT size)
analyser.getByteFrequencyData(spectrums);
// Clear previous data
canvasContext.clearRect(0, 0, canvas.width, canvas.height);
// Draw spectrum
canvasContext.beginPath();
for (var i = 0, len = spectrums.length; i < len; i++) {
var x = (i / len) * canvas.width;
var y = (1 - (spectrums[i] / 255)) * canvas.height;
if (i === 0) {
canvasContext.moveTo(x, y);
} else {
canvasContext.lineTo(x, y);
}
}
canvasContext.stroke();
}, 500);
window.AudioContext = window.AudioContext || window.webkitAudioContext;
// Create the instance of AudioContext
var context = new AudioContext();
// Create the instance of AnalyserNode
var analyser = context.createAnalyser();
analyser.fftSize = 2048; // The default value
// for the instance of OscillatorNode
var oscillator = null;
var canvas = document.querySelector('canvas');
var canvasContext = canvas.getContext('2d');
var intervalid = null;
// Flag for starting or stopping sound
var isStop = true;
document.body.addEventListener('mousedown', function() {
if (!isStop) {
oscillator.stop(0);
}
// Create the instance of OscillatorNode
oscillator = context.createOscillator();
// for legacy browsers
oscillator.start = oscillator.start || oscillator.noteOn;
oscillator.stop = oscillator.stop || oscillator.noteOff;
// OscillatorNode (Input) -> AnalyserNode (Visualization) -> AudioDestinationNode (Output)
oscillator.connect(analyser);
analyser.connect(context.destination);
oscillator.start(0);
intervalid = window.setInterval(function() {
// Get data for drawing spectrum
var spectrums = new Uint8Array(analyser.frequencyBinCount); // Array size is 1024 (half of FFT size)
analyser.getByteFrequencyData(spectrums);
// Clear previous data
canvasContext.clearRect(0, 0, canvas.width, canvas.height);
// Draw spectrum
canvasContext.beginPath();
for (var i = 0, len = spectrums.length; i < len; i++) {
var x = (i / len) * canvas.width;
var y = (1 - (spectrums[i] / 255)) * canvas.height;
if (i === 0) {
canvasContext.moveTo(x, y);
} else {
canvasContext.lineTo(x, y);
}
}
canvasContext.stroke();
}, 500);
isStop = false;
}, false);
document.body.addEventListener('mouseup', function() {
if (isStop) {
return;
}
oscillator.stop(0);
if (intervalid !== null) {
window.clearInterval(intervalid);
intervalid = null;
}
isStop = true;
}, false);
/*
* Add code to sample code 01
*/
// ....
analyser.fftSize = 2048; // The default value
var canvas = document.querySelector('canvas');
var canvasContext = canvas.getContext('2d');
var intervalid = window.setInterval(function() {
// Get data for drawing spectrum
var spectrums = new Uint8Array(analyser.frequencyBinCount); // Array size is 1024 (half of FFT size)
analyser.getByteFrequencyData(spectrums);
// Clear previous data
canvasContext.clearRect(0, 0, canvas.width, canvas.height);
// Draw spectrum
canvasContext.beginPath();
for (var i = 0, len = spectrums.length; i < len; i++) {
var x = (i / len) * canvas.width;
var y = (1 - (spectrums[i] / 255)) * canvas.height;
if (i === 0) {
canvasContext.moveTo(x, y);
} else {
canvasContext.lineTo(x, y);
}
}
canvasContext.stroke();
// Draw text and grid (Y)
var textYs = ['1.00', '0.50', '0.00'];
for (var i = 0, len = textYs.length; i < len; i++) {
var text = textYs[i];
var gy = (1 - parseFloat(text)) * canvas.height;
// Draw grid (Y)
canvasContext.fillRect(0, gy, canvas.width, 1);
// Draw text (Y)
canvasContext.fillText(text, 0, gy);
}
}, 500);
/*
* Add code to sample code 01
*/
// ....
analyser.fftSize = 2048; // The default value
var canvas = document.querySelector('canvas');
var canvasContext = canvas.getContext('2d');
// Frequency Resolution
var fsDivN = context.sampleRate / analyser.fftSize;
var intervalid = window.setInterval(function() {
// Get data for drawing spectrum
var spectrums = new Uint8Array(analyser.frequencyBinCount); // Array size is 1024 (half of FFT size)
analyser.getByteFrequencyData(spectrums);
// Clear previous data
canvasContext.clearRect(0, 0, canvas.width, canvas.height);
// Draw spectrum
canvasContext.beginPath();
for (var i = 0, len = spectrums.length; i < len; i++) {
var x = (i / len) * canvas.width;
var y = (1 - (spectrums[i] / 255)) * canvas.height;
if (i === 0) {
canvasContext.moveTo(x, y);
} else {
canvasContext.lineTo(x, y);
}
var f = Math.floor(i * fsDivN); // index -> frequency
// 500 Hz ?
if ((f % 500) === 0) {
var text = (f < 1000) ? (f + ' Hz') : ((f / 1000) + ' kHz');
// Draw grid (X)
canvasContext.fillRect(x, 0, 1, canvas.height);
// Draw text (X)
canvasContext.fillText(text, x, canvas.height);
}
}
canvasContext.stroke();
// Draw text and grid (Y)
var textYs = ['1.00', '0.50', '0.00'];
for (var i = 0, len = textYs.length; i < len; i++) {
var text = textYs[i];
var gy = (1 - parseFloat(text)) * canvas.height;
// Draw grid (Y)
canvasContext.fillRect(0, gy, canvas.width, 1);
// Draw text (Y)
canvasContext.fillText(text, 0, gy);
}
}, 500);
/*
* Add code to sample code 01
*/
// ....
analyser.fftSize = 2048; // The default value
var canvas = document.querySelector('canvas');
var canvasContext = canvas.getContext('2d');
// Frequency Resolution
var fsDivN = context.sampleRate / analyser.fftSize;
// This value is the number of samples during 500 Hz
var n500Hz = Math.floor(500 / fsDivN);
var intervalid = window.setInterval(function() {
// Get data for drawing spectrum
var spectrums = new Uint8Array(analyser.frequencyBinCount); // Array size is 1024 (half of FFT size)
analyser.getByteFrequencyData(spectrums);
// Clear previous data
canvasContext.clearRect(0, 0, canvas.width, canvas.height);
// Draw spectrum
canvasContext.beginPath();
for (var i = 0, len = spectrums.length; i < len; i++) {
var x = (i / len) * canvas.width;
var y = (1 - (spectrums[i] / 255)) * canvas.height;
if (i === 0) {
canvasContext.moveTo(x, y);
} else {
canvasContext.lineTo(x, y);
}
// 500 Hz ?
if ((i % n500Hz) === 0) {
var f = Math.floor(500 * (i / n500Hz)); // index -> frequency
var text = (f < 1000) ? (f + ' Hz') : ((f / 1000) + ' kHz');
// Draw grid (X)
canvasContext.fillRect(x, 0, 1, canvas.height);
// Draw text (X)
canvasContext.fillText(text, x, canvas.height);
}
}
canvasContext.stroke();
// Draw text and grid (Y)
var textYs = ['1.00', '0.50', '0.00'];
for (var i = 0, len = textYs.length; i < len; i++) {
var text = textYs[i];
var gy = (1 - parseFloat(text)) * canvas.height;
// Draw grid (Y)
canvasContext.fillRect(0, gy, canvas.width, 1);
// Draw text (Y)
canvasContext.fillText(text, 0, gy);
}
}, 500);
/*
* Add code to sample code 01
*/
// ....
analyser.fftSize = 2048; // The default value
var intervalid = window.setInterval(function() {
// Get data for drawing spectrum (dB)
var spectrums = new Float32Array(analyser.frequencyBinCount); // Array size is 1024 (half of FFT size)
analyser.getFloatFrequencyData(spectrums);
}, 500);
/*
* Add code to sample code 01
*/
// ....
analyser.fftSize = 2048; // The default value
var canvas = document.querySelector('canvas');
var canvasContext = canvas.getContext('2d');
var intervalid = window.setInterval(function() {
var range = analyser.maxDecibels - analyser.minDecibels; // 70 dB
// Get data for drawing spectrum (dB)
var spectrums = new Float32Array(analyser.frequencyBinCount); // Array size is 1024 (half of FFT size)
analyser.getFloatFrequencyData(spectrums);
for (var i = 0, len = spectrums.length; i < len; i++) {
var y = (spectrums[i] - analyser.maxDecibels) / range; // 0 - 1
}
}, 500);
/*
* Add code to sample code 01
*/
// ....
analyser.fftSize = 2048; // The default value
var canvas = document.querySelector('canvas');
var canvasContext = canvas.getContext('2d');
var intervalid = window.setInterval(function() {
var range = analyser.maxDecibels - analyser.minDecibels; // 70 dB
// Get data for drawing spectrum (dB)
var spectrums = new Float32Array(analyser.frequencyBinCount); // Array size is 1024 (half of FFT size)
analyser.getFloatFrequencyData(spectrums);
for (var i = 0, len = spectrums.length; i < len; i++) {
var y = -1 * ((spectrums[i] - analyser.maxDecibels) / range);
}
}, 500);
/*
* Add code to sample code 01
*/
// ....
analyser.fftSize = 2048; // The default value
var canvas = document.querySelector('canvas');
var canvasContext = canvas.getContext('2d');
var intervalid = window.setInterval(function() {
var range = analyser.maxDecibels - analyser.minDecibels; // 70 dB
// Get data for drawing spectrum (dB)
var spectrums = new Float32Array(analyser.frequencyBinCount); // Array size is 1024 (half of FFT size)
analyser.getFloatFrequencyData(spectrums);
for (var i = 0, len = spectrums.length; i < len; i++) {
var y = (-1 * ((spectrums[i] - analyser.maxDecibels) / range)) * canvas.height;
}
}, 500);
これで, y座標の算出ができました. あとは, x座標の算出です.
もっとも, x座標の算出はgetByteFrequencyDataメソッドの場合と同じです.
図3 - 2 - o. x座標の算出
サンプルコード 26
/*
* Add code to sample code 01
*/
// ....
analyser.fftSize = 2048; // The default value
var canvas = document.querySelector('canvas');
var canvasContext = canvas.getContext('2d');
var intervalid = window.setInterval(function() {
var range = analyser.maxDecibels - analyser.minDecibels; // 70 dB
// Get data for drawing spectrum (dB)
var spectrums = new Float32Array(analyser.frequencyBinCount); // Array size is 1024 (half of FFT size)
analyser.getFloatFrequencyData(spectrums);
for (var i = 0, len = spectrums.length; i < len; i++) {
var x = (i / len) * canvas.width;
var y = (-1 * ((spectrums[i] - analyser.maxDecibels) / range)) * canvas.height;
}
}, 500);
/*
* Add code to sample code 01
*/
// ....
analyser.fftSize = 2048; // The default value
var canvas = document.querySelector('canvas');
var canvasContext = canvas.getContext('2d');
var intervalid = window.setInterval(function() {
var range = analyser.maxDecibels - analyser.minDecibels; // 70 dB
// Get data for drawing spectrum (dB)
var spectrums = new Float32Array(analyser.frequencyBinCount); // Array size is 1024 (half of FFT size)
analyser.getFloatFrequencyData(spectrums);
// Clear previous data
canvasContext.clearRect(0, 0, canvas.width, canvas.height);
// Draw spectrum (dB)
canvasContext.beginPath();
for (var i = 0, len = spectrums.length; i < len; i++) {
var x = (i / len) * canvas.width;
var y = (-1 * ((spectrums[i] - analyser.maxDecibels) / range)) * canvas.height;
if (i === 0) {
canvasContext.moveTo(x, y);
} else {
canvasContext.lineTo(x, y);
}
}
canvasContext.stroke();
}, 500);
window.AudioContext = window.AudioContext || window.webkitAudioContext;
// Create the instance of AudioContext
var context = new AudioContext();
// Create the instance of AnalyserNode
var analyser = context.createAnalyser();
analyser.fftSize = 2048; // The default value
// for the instance of OscillatorNode
var oscillator = null;
var canvas = document.querySelector('canvas');
var canvasContext = canvas.getContext('2d');
var intervalid = null;
// Flag for starting or stopping sound
var isStop = true;
document.body.addEventListener('mousedown', function() {
if (!isStop) {
oscillator.stop(0);
}
// Create the instance of OscillatorNode
oscillator = context.createOscillator();
// for legacy browsers
oscillator.start = oscillator.start || oscillator.noteOn;
oscillator.stop = oscillator.stop || oscillator.noteOff;
// OscillatorNode (Input) -> AnalyserNode (Visualization) -> AudioDestinationNode (Output)
oscillator.connect(analyser);
analyser.connect(context.destination);
oscillator.start(0);
intervalid = window.setInterval(function() {
var range = analyser.maxDecibels - analyser.minDecibels; // 70 dB
// Get data for drawing spectrum (dB)
var spectrums = new Float32Array(analyser.frequencyBinCount); // Array size is 1024 (half of FFT size)
analyser.getFloatFrequencyData(spectrums);
// Clear previous data
canvasContext.clearRect(0, 0, canvas.width, canvas.height);
// Draw spectrum (dB)
canvasContext.beginPath();
for (var i = 0, len = spectrums.length; i < len; i++) {
var x = (i / len) * canvas.width;
var y = (-1 * ((spectrums[i] - analyser.maxDecibels) / range)) * canvas.height;
if (i === 0) {
canvasContext.moveTo(x, y);
} else {
canvasContext.lineTo(x, y);
}
}
canvasContext.stroke();
}, 500);
isStop = false;
}, false);
document.body.addEventListener('mouseup', function() {
if (isStop) {
return;
}
oscillator.stop(0);
if (intervalid !== null) {
window.clearInterval(intervalid);
intervalid = null
}
isStop = true;
}, false);
/*
* Add code to sample code 01
*/
// ....
analyser.fftSize = 2048; // The default value
var canvas = document.querySelector('canvas');
var canvasContext = canvas.getContext('2d');
var intervalid = window.setInterval(function() {
var range = analyser.maxDecibels - analyser.minDecibels; // 70 dB
// Frequency resolution
var fsDivN = context.sampleRate / analyser.fftSize;
// This value is the number of samples during 500 Hz
var n500Hz = Math.floor(500 / fsDivN);
// Get data for drawing spectrum (dB)
var spectrums = new Float32Array(analyser.frequencyBinCount); // Array size is 1024 (half of FFT size)
analyser.getFloatFrequencyData(spectrums);
// Clear previous data
canvasContext.clearRect(0, 0, canvas.width, canvas.height);
// Draw spectrum (dB)
canvasContext.beginPath();
for (var i = 0, len = spectrums.length; i < len; i++) {
var x = (i / len) * canvas.width;
var y = (-1 * ((spectrums[i] - analyser.maxDecibels) / range)) * canvas.height;
if (i === 0) {
canvasContext.moveTo(x, y);
} else {
canvasContext.lineTo(x, y);
}
// 500 Hz ?
if ((i % n500Hz) === 0) {
var f = Math.floor(500 * (i / n500Hz)); // index -> frequency
var text = (f < 1000) ? (f + ' Hz') : ((f / 1000) + ' kHz');
// Draw grid (X)
canvasContext.fillRect(x, 0, 1, canvas.height);
// Draw text (X)
canvasContext.fillText(text, x, canvas.height);
}
}
canvasContext.stroke();
// Draw text and grid (Y)
for (var i = analyser.minDecibels; i <= analyser.maxDecibels; i += 10) {
var gy = (-1 * ((i - analyser.maxDecibels) / range)) * canvas.height;
// Draw grid (Y)
canvasContext.fillRect(0, gy, canvas.width, 1);
// Draw text (Y)
canvasContext.fillText((i + ' dB'), 0, gy);
}
}, 500);
window.AudioContext = window.AudioContext || window.webkitAudioContext;
// Create the instance of AudioContext
var context = new AudioContext();
var xhr = new XMLHttpRequest();
var url = 'http:// xxx.jp/sample.wav';
// XMLHttpRequest Level 2
xhr.responseType = 'arraybuffer';
xhr.onload = function() {
if (xhr.status === 200) {
var arrayBuffer = xhr.response;
if (arrayBuffer instanceof ArrayBuffer) {
// The 2nd argument for decodeAudioData
var successCallback = function(audioBuffer) {
// Get audio binary data for drawing wave
var channelLs = new Float32Array(audioBuffer.length);
var channelRs = new Float32Array(audioBuffer.length);
// Stereo ?
if (audioBuffer.numberOfChannels > 1) {
channelLs.set(audioBuffer.getChannelData(0));
channelRs.set(audioBuffer.getChannelData(1));
} else if (audioBuffer.numberOfChannels > 0) {
channelLs.set(audioBuffer.getChannelData(0));
} else {
window.alert('The number of channels is invalid.');
return;
}
};
// The 3rd argument for decodeAudioData
var errorCallback = function(error) {
/* do something for error .... */
};
// Create the instance of AudioBuffer (Asynchronously)
context.decodeAudioData(arrayBuffer, successCallback, errorCallback);
}
}
};
xhr.open('GET', url, true);
xhr.send(null);
/*
* Add code to sample code 30
*/
// ....
// The 2nd argument for decodeAudioData
var successCallback = function(audioBuffer) {
// Get audio binary data for drawing wave
var channelLs = new Float32Array(audioBuffer.length);
var channelRs = new Float32Array(audioBuffer.length);
// Stereo ?
if (audioBuffer.numberOfChannels > 1) {
channelLs.set(audioBuffer.getChannelData(0));
channelRs.set(audioBuffer.getChannelData(1));
} else if (audioBuffer.numberOfChannels > 0) {
channelLs.set(audioBuffer.getChannelData(0));
} else {
window.alert('The number of channels is invalid.');
return;
}
var canvas = document.querySelector('canvas');
var canvasContext = canvas.getContext('2d');
var width = canvas.width;
var height = canvas.height;
// Clear previous data
canvasContext.clearRect(0, 0, width, height);
// Draw audio wave
canvasContext.beginPath();
for (var i = 0, len = channelLs.length; i < len; i++) {
var x = (i / len) * width;
var y = ((1 - channelLs[i]) / 2) * height;
if (i === 0) {
canvasContext.moveTo(x, y);
} else {
canvasContext.lineTo(x, y);
}
}
canvasContext.stroke();
};
// ....
/*
* Add code to sample code 30
*/
// ....
// The 2nd argument for decodeAudioData
var successCallback = function(audioBuffer) {
// Get audio binary data for drawing wave
var channelLs = new Float32Array(audioBuffer.length);
var channelRs = new Float32Array(audioBuffer.length);
// Stereo ?
if (audioBuffer.numberOfChannels > 1) {
channelLs.set(audioBuffer.getChannelData(0));
channelRs.set(audioBuffer.getChannelData(1));
} else if (audioBuffer.numberOfChannels > 0) {
channelLs.set(audioBuffer.getChannelData(0));
} else {
window.alert('The number of channels is invalid.');
return;
}
var canvas = document.querySelector('canvas');
var canvasContext = canvas.getContext('2d');
var width = canvas.width;
var height = canvas.height;
// Sampling period
var period = 1 / context.sampleRate;
// This value is the number of samples during 50 msec
var n50msec = Math.floor(50 * Math.pow(10, -3) * context.sampleRate);
// Clear previous data
canvasContext.clearRect(0, 0, width, height);
// Draw audio wave
canvasContext.beginPath();
for (var i = 0, len = channelLs.length; i < len; i++) {
// 50 msec ?
if ((i % n50msec) === 0) {
var x = (i / len) * width;
var y = ((1 - channelLs[i]) / 2) * height;
if (i === 0) {
canvasContext.moveTo(x, y);
} else {
canvasContext.lineTo(x, y);
}
}
}
canvasContext.stroke();
};
// ....
/*
* Add code to sample code 30
*/
// ....
// The 2nd argument for decodeAudioData
var successCallback = function(audioBuffer) {
// Get audio binary data for drawing wave
var channelLs = new Float32Array(audioBuffer.length);
var channelRs = new Float32Array(audioBuffer.length);
// Stereo ?
if (audioBuffer.numberOfChannels > 1) {
channelLs.set(audioBuffer.getChannelData(0));
channelRs.set(audioBuffer.getChannelData(1));
} else if (audioBuffer.numberOfChannels > 0) {
channelLs.set(audioBuffer.getChannelData(0));
} else {
window.alert('The number of channels is invalid.');
return;
}
var canvas = document.querySelector('canvas');
var canvasContext = canvas.getContext('2d');
var width = canvas.width;
var height = canvas.height;
// Sampling period
var period = 1 / context.sampleRate;
// This value is the number of samples during 50 msec
var n50msec = Math.floor(50 * Math.pow(10, -3) * context.sampleRate);
// Clear previous data
canvasContext.clearRect(0, 0, width, height);
// Draw audio wave
canvasContext.beginPath();
for (var i = 0, len = channelLs.length; i < len; i++) {
// 50 msec ?
if ((i % n50msec) === 0) {
var x = (i / len) * width;
var y = ((1 - channelLs[i]) / 2) * height;
if (i === 0) {
canvasContext.moveTo(x, y);
} else {
canvasContext.lineTo(x, y);
}
}
}
canvasContext.stroke();
// Draw text and grid (Y)
var textYs = ['1.00', '0.00', '-1.00'];
for (var i = 0, len = textYs.length; i < len; i++) {
var text = textYs[i];
var gy = ((1 - parseFloat(text)) / 2) * height;
// Draw grid (Y)
canvasContext.fillRect(0, gy, width, 1);
// Draw text (Y)
canvasContext.fillText(text, 0, gy);
}
};
// ....
/*
* Add code to sample code 30
*/
// ....
// The 2nd argument for decodeAudioData
var successCallback = function(audioBuffer) {
// Get audio binary data for drawing wave
var channelLs = new Float32Array(audioBuffer.length);
var channelRs = new Float32Array(audioBuffer.length);
// Stereo ?
if (audioBuffer.numberOfChannels > 1) {
channelLs.set(audioBuffer.getChannelData(0));
channelRs.set(audioBuffer.getChannelData(1));
} else if (audioBuffer.numberOfChannels > 0) {
channelLs.set(audioBuffer.getChannelData(0));
} else {
window.alert('The number of channels is invalid.');
return;
}
var canvas = document.querySelector('canvas');
var canvasContext = canvas.getContext('2d');
var width = canvas.width;
var height = canvas.height;
// Sampling period
var period = 1 / context.sampleRate;
// This value is the number of samples during 50 msec
var n50msec = Math.floor(50 * Math.pow(10, -3) * context.sampleRate);
// This value is the number of samples during 60 sec
var n60sec = Math.floor(60 * context.sampleRate);
// Clear previous data
canvasContext.clearRect(0, 0, width, height);
// Draw audio wave
canvasContext.beginPath();
for (var i = 0, len = channelLs.length; i < len; i++) {
// 50 msec ?
if ((i % n50msec) === 0) {
var x = (i / len) * width;
var y = ((1 - channelLs[i]) / 2) * height;
if (i === 0) {
canvasContext.moveTo(x, y);
} else {
canvasContext.lineTo(x, y);
}
}
// 60 sec ?
if ((i % n60sec) === 0) {
var sec = i * period; // index -> time
var text = Math.round(sec) + ' sec';
// Draw grid (X)
canvasContext.fillRect(x, 0, 1, height);
// Draw text (X)
canvasContext.fillText(text, x, height);
}
}
canvasContext.stroke();
// Draw text and grid (Y)
var textYs = ['1.00', '0.00', '-1.00'];
for (var i = 0, len = textYs.length; i < len; i++) {
var text = textYs[i];
var gy = ((1 - parseFloat(text)) / 2) * height;
// Draw grid (Y)
canvasContext.fillRect(0, gy, width, 1);
// Draw text (Y)
canvasContext.fillText(text, 0, gy);
}
};
