(function() {
var onDOMContentLoaded = function() {
window.AudioContext = window.AudioContext || window.webkitAudioContext;
try {
// Create the instance of AudioContext
var context = new AudioContext();
} catch (error) {
window.alert(error.message + ' : Please use Chrome or Safari.');
return;
}
// for the instance of AudioBufferSourceNode
var source = null;
// for legacy browsers
context.createGain = context.createGain || context.createGainNode;
// Create the instance of GainNode (for Master Volume)
var gain = context.createGain();
// Equalizer
var NUM_BANDS = 10;
var peakings = new Array(NUM_BANDS);
// Center frequency
var frequency = 31.25;
for (var i = 0; i < NUM_BANDS; i++) {
// Create the instance of BiquadFilterNode
var peaking = context.createBiquadFilter();
// Calculate center frequency
if (i !== 0) {
frequency *= 2;
}
// Set parameters
peaking.type = (typeof peaking.type === 'string') ? 'peaking' : 5;
peaking.frequency.value = frequency;
peaking.Q.value = 2;
peaking.gain.value = document.getElementById('range-equalizer-' + frequency).valueAsNumber;
peakings[i] = peaking;
}
// for drawing spectrum
// Create the instance of AnalyserNode
var analyser = context.createAnalyser();
analyser.minDecibels = -150; // Default -100 dB
analyser.maxDecibels = 0; // Default -30 dB
var canvases = {
low : null,
high : null
};
var contexts = {
low : null,
high : null
};
canvases.low = document.querySelectorAll('canvas')[0];
canvases.high = document.querySelectorAll('canvas')[1];
contexts.low = canvases.low.getContext('2d');
contexts.high = canvases.high.getContext('2d');
var intervalids = [];
var drawSpectrum = function(canvas, canvasContext, size, frequency) {
var width = canvas.width;
var height = canvas.height;
var paddingTop = 20;
var paddingBottom = 20;
var paddingLeft = 30;
var paddingRight = 30;
var innerWidth = width - paddingLeft - paddingRight;
var innerHeight = height - paddingTop - paddingBottom;
var innerBottom = height - paddingBottom;
var range = analyser.maxDecibels - analyser.minDecibels; // 70 dB
// Frequency Resolution
var fsDivN = context.sampleRate / analyser.fftSize;
// This value is the number of samples during "frequency" Hz
var nHz = Math.floor(frequency / fsDivN);
// Get data for drawing spectrum (dB)
var spectrums = new Float32Array(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 = Math.floor((i / len) * innerWidth) + paddingLeft;
var y = Math.floor(-1 * ((spectrums[i] - analyser.maxDecibels) / range) * innerHeight) + paddingTop;
if (i === 0) {
canvasContext.moveTo(x, y);
} else {
canvasContext.lineTo(x, y);
}
if ((i % nHz) === 0) {
var text = '';
if (frequency < 1000) {
text = (frequency * (i / nHz)) + ' Hz'; // index -> frequency
} else {
text = (parseInt(frequency / 1000) * (i / nHz)) + ' kHz'; // index -> frequency
}
// Draw grid (X)
canvasContext.fillStyle = 'rgba(255, 0, 0, 1.0)';
canvasContext.fillRect(x, paddingTop, 1, innerHeight);
// Draw text (X)
canvasContext.fillStyle = 'rgba(255, 255, 255, 1.0)';
canvasContext.font = '12px "Times New Roman"';
canvasContext.fillText(text, (x - (canvasContext.measureText(text).width / 2)), (height - 3));
}
}
canvasContext.strokeStyle = 'rgba(0, 0, 255, 1.0)';
canvasContext.lineWidth = 4;
canvasContext.lineCap = 'round';
canvasContext.lineJoin = 'miter';
canvasContext.stroke();
// Draw grid and text (Y)
for (var i = analyser.minDecibels; i <= analyser.maxDecibels; i += 10) {
var gy = Math.floor(-1 * ((i - analyser.maxDecibels) / range) * innerHeight) + paddingTop;
// Draw grid (Y)
canvasContext.fillStyle = 'rgba(255, 0, 0, 1.0)';
canvasContext.fillRect(paddingLeft, gy, innerWidth, 1);
// Draw text (Y)
canvasContext.fillStyle = 'rgba(255, 255, 255, 1.0)';
canvasContext.font = '12px "Times New Roman"';
canvasContext.fillText((i + ' dB'), 3, gy);
}
};
// Trigger 'ended' event
var trigger = function() {
var event = document.createEvent('Event');
event.initEvent('ended', true, true);
if (source instanceof AudioBufferSourceNode) {
source.dispatchEvent(event);
}
};
// This funciton is executed after getting ArrayBuffer of audio data
var startAudio = function(arrayBuffer) {
// The 2nd argument for decodeAudioData
var successCallback = function(audioBuffer) {
// The 1st argument (audioBuffer) is the instance of AudioBuffer
// If there is previous AudioBufferSourceNode, program stops previous audio
if ((source instanceof AudioBufferSourceNode) && (source.buffer instanceof AudioBuffer)) {
// Execute onended event handler
trigger();
source = null;
}
// Create the instance of AudioBufferSourceNode
source = context.createBufferSource();
// for legacy browsers
source.start = source.start || source.noteOn;
source.stop = source.stop || source.noteOff;
// Set the instance of AudioBuffer
source.buffer = audioBuffer;
// Set parameters
source.playbackRate.value = document.getElementById('range-playback-rate').valueAsNumber;
source.loop = document.querySelector('[type="checkbox"]').checked;
// GainNode (Master Volume) -> AnalyserNode (Visualization) -> AudioDestinationNode (Output)
gain.connect(analyser);
analyser.connect(context.destination);
// Clear connection
source.disconnect(0);
peakings.forEach(function(peaking) {
peaking.disconnect(0);
});
if (document.getElementById('toggle-effect').checked) {
// Equalizer ON
// Connect nodes for effect (Equalizer) sound
// AudioBufferSourceNode (Input) -> BiquadFilterNode (Peaking Filter x 10) -> GainNode (Master Volume) (-> AnalyserNode -> AudioDestinationNode (Output))
source.connect(peakings[0]);
peakings.forEach(function(peaking, index) {
if (index < (NUM_BANDS - 1)) {
peaking.connect(peakings[index + 1]);
} else {
peaking.connect(gain);
}
});
} else {
// Equalizer OFF
// AudioBufferSourceNode (Input) -> GainNode (Master Volume) (-> AnalyserNode -> AudioDestinationNode (Output))
source.connect(gain);
}
// Start audio
source.start(0);
// Start drawing spectrum
intervalids.push(window.setInterval(function() {
drawSpectrum(canvases.low, contexts.low, 16, 62.5);
}, 20));
intervalids.push(window.setInterval(function() {
drawSpectrum(canvases.high, contexts.high, 750, 1000);
}, 20));
// Set Callback
source.onended = function(event) {
// Remove event handler
source.onended = null;
document.onkeydown = null;
// Stop audio
source.stop(0);
// Stop drawing spectrum
intervalids.forEach(function(intervalid) {
window.clearInterval(intervalid);
});
intervalids = [];
console.log('STOP by "on' + event.type + '" event handler !!');
// Audio is not started !!
// It is necessary to create the instance of AudioBufferSourceNode again
// Cannot replay
// source.start(0);
};
// Stop audio
document.onkeydown = function(event) {
// Space ?
if (event.keyCode !== 32) {
return;
}
// Execute onended event handler
trigger();
return false;
};
};
// The 3rd argument for decodeAudioData
var errorCallback = function(error) {
if (error instanceof Error) {
window.alert(error.message);
} else {
window.alert('Error : "decodeAudioData" method.');
}
};
// Create the instance of AudioBuffer (Asynchronously)
context.decodeAudioData(arrayBuffer, successCallback, errorCallback);
};
/*
* File Uploader
*/
document.getElementById('file-upload-audio').addEventListener('change', function(event) {
var uploader = this;
var progressArea = document.getElementById('progress-file-upload-audio');
// Get the instance of File (extends Blob)
var file = event.target.files[0];
if (!(file instanceof File)) {
window.alert('Please upload file.');
} else if (file.type.indexOf('audio') === -1) {
window.alert('Please upload audio file.');
} else {
// Create the instance of FileReader
var reader = new FileReader();
reader.onprogress = function(event) {
if (event.lengthComputable && (event.total > 0)) {
var rate = Math.floor((event.loaded / event.total) * 100);
progressArea.textContent = rate + ' %';
}
};
reader.onerror = function() {
window.alert('FileReader Error : Error code is ' + reader.error.code);
uploader.value = '';
};
// Success read
reader.onload = function() {
var arrayBuffer = reader.result; // Get ArrayBuffer
startAudio(arrayBuffer);
uploader.value = '';
progressArea.textContent = file.name;
};
// Read the instance of File
reader.readAsArrayBuffer(file);
}
}, false);
// Control Master Volume
document.getElementById('range-volume').addEventListener('input', function() {
var min = gain.gain.minValue || 0;
var max = gain.gain.maxValue || 1;
if ((this.valueAsNumber >= min) && (this.valueAsNumber <= max)) {
gain.gain.value = this.valueAsNumber;
document.getElementById('output-volume').textContent = this.value;
}
}, false);
// Control playbackRate
document.getElementById('range-playback-rate').addEventListener('input', function() {
if (source instanceof AudioBufferSourceNode) {
var min = source.playbackRate.minValue || 0;
var max = source.playbackRate.maxValue || 1024;
if ((this.valueAsNumber >= min) && (this.valueAsNumber <= max)) {
source.playbackRate.value = this.valueAsNumber;
}
}
document.getElementById('output-playback-rate').textContent = this.value;
}, false);
// Toggle loop
document.querySelector('[type="checkbox"]').addEventListener(EventWrapper.CLICK, function() {
if (source instanceof AudioBufferSourceNode) {
source.loop = this.checked;
}
}, false);
// Toggle Effect
document.getElementById('toggle-effect').addEventListener(EventWrapper.CLICK, function() {
if (!(source instanceof AudioBufferSourceNode)) {
return;
}
// Clear connection
source.disconnect(0);
peakings.forEach(function(peaking) {
peaking.disconnect(0);
});
if (this.checked) {
// Equalizer ON
// Connect nodes for effect (Equalizer) sound
// AudioBufferSourceNode (Input) -> BiquadFilterNode (Peaking Filter x 10) -> GainNode (Master Volume) (-> AnalyserNode (Visualization) -> AudioDestinationNode (Output))
source.connect(peakings[0]);
peakings.forEach(function(peaking, index) {
if (index < (NUM_BANDS - 1)) {
peaking.connect(peakings[index + 1]);
} else {
peaking.connect(gain);
}
});
} else {
// Equalizer OFF
// AudioBufferSourceNode (Input) -> GainNode (Master Volume) (-> AnalyserNode (Visualization) -> AudioDestinationNode (Output))
source.connect(gain);
}
}, false);
// Control Equalizer
var equalizers = Array.prototype.slice.call(document.querySelectorAll('div.controllers-2-column dl dd [type="range"]'), 0);
equalizers.forEach(function(equalizer, index) {
equalizer.addEventListener('input', function() {
var peaking = peakings[index];
var min = peaking.gain.minValue || -40;
var max = peaking.gain.maxValue || 40;
if ((this.valueAsNumber >= min) && (this.valueAsNumber <= max)) {
peaking.gain.value = this.valueAsNumber;
document.getElementById('output-equalizer-' + this.id.replace('range-equalizer-', '')).textContent = this.value;
}
}, false);
});
};
if ((document.readyState === 'interactive') || (document.readyState === 'complete')) {
onDOMContentLoaded();
} else {
document.addEventListener('DOMContentLoaded', onDOMContentLoaded, true);
}
})();
function EventWrapper(){
}
(function(){
var click = '';
var start = '';
var move = '';
var end = '';
// Touch Panel ?
if (/iPhone|iPad|iPod|Android/.test(navigator.userAgent)) {
click = 'click';
start = 'touchstart';
move = 'touchmove';
end = 'touchend';
} else {
click = 'click';
start = 'mousedown';
move = 'mousemove';
end = 'mouseup';
}
EventWrapper.CLICK = click;
EventWrapper.START = start;
EventWrapper.MOVE = move;
EventWrapper.END = end;
})();