(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 legacy browsers context.createGain = context.createGain || context.createGainNode; // Create the instance of GainNode var gain = context.createGain(); var base = './audio-oneshot/'; var urls = [ (base + 'C.wav'), (base + 'D.wav'), (base + 'E.wav'), (base + 'F.wav'), (base + 'G.wav'), (base + 'A.wav'), (base + 'B.wav') ]; // for the instances of AudioBuffer var buffers = new Array(urls.length); // for the instances of AudioBufferSourceNode var sources = new Array(urls.length); var interval = document.getElementById('range-interval').valueAsNumber; // 1 sec // Create original event var event = document.createEvent('Event'); event.initEvent('complete', true, true); // Get ArrayBuffer by Ajax var load = function(url, index) { var xhr = new XMLHttpRequest(); // Timeout (1 minutes) xhr.timeout = 60000; xhr.ontimeout = function() { window.alert('Timeout.'); }; xhr.onerror = function() { window.alert('Ajax Error.'); }; xhr.onload = function() { if (xhr.status === 200) { var arrayBuffer = xhr.response; // Get ArrayBuffer if (arrayBuffer instanceof ArrayBuffer) { // The 2nd argument for decodeAudioData var successCallback = function(audioBuffer) { // Get the instance of AudioBuffer buffers[index] = audioBuffer; // The loading instances of AudioBuffer has completed ? for (var i = 0, len = buffers.length; i < len; i++) { if (buffers[i] === undefined) { return; } } // dispatch 'complete' event document.querySelector('button').dispatchEvent(event); }; // 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); } } }; xhr.open('GET', url, true); xhr.responseType = 'arraybuffer'; xhr.send(null); }; for (var i = 0, len = urls.length; i < len; i++) { load(urls[i], i); } document.querySelector('button').addEventListener('complete', function() { window.alert('The instances of AudioBuffer have just been created !!'); this.addEventListener(EventWrapper.CLICK, function() { // Get base time var t0 = context.currentTime; for (var i = 0, len = buffers.length; i < len; i++) { // Create the instance of AudioBufferSourceNode sources[i] = context.createBufferSource(); // for legacy browsers sources[i].start = sources[i].start || sources[i].noteGrainOn; // noteGrainOn sources[i].stop = sources[i].stop || sources[i].noteOff; // Set the instance of AudioBuffer sources[i].buffer = buffers[i]; // Set playBackRate sources[i].playbackRate.value = document.getElementById('range-playback-rate').valueAsNumber; // AudioBufferSourceNode (Input) -> GainNode (Master Volume) -> AudioDestinationNode (Output) sources[i].connect(gain); gain.connect(context.destination); sources[i].start((t0 + (interval * i)), 0, (sources[i].buffer.duration / sources[i].playbackRate.value)); sources[i].stop(t0 + (interval * i) + (sources[i].buffer.duration / sources[i].playbackRate.value)); } }, false); }, false); /* * Display currentTime */ var outputCurrentTime = document.querySelector('[type="number"]'); window.setInterval(function() { outputCurrentTime.valueAsNumber = Math.round(context.currentTime * 100) / 100; }, 0); /* * Event Listener */ // 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() { document.getElementById('output-playback-rate').textContent = this.value; }, false); // Control Interval document.getElementById('range-interval').addEventListener('input', function() { interval = this.valueAsNumber; document.getElementById('output-interval').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; })();