JSFiddle - React, Tailwind, and code Playground
by Chinmay Pendharkar
HTML
<button id='swap' disabled>Swap</button>
JavaScript
window.AudioContext = window.AudioContext || window.webkitAudioContext;
this.audioContext = new AudioContext();
this.convolver = this.audioContext.createConvolver();
this.convolver.normalize = false;
var irURL = 'https://dl.dropboxusercontent.com/u/957/IRs/air_aula_1_1_3_90_resampled_nopeak_trimmed.wav'
var irBuffer = [];
var currentBuffer = 0;
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
if (!navigator.getUserMedia) {
console.error('Unfortunately, your browser doesn\'t support the getUserMedia API needed for this expiriment. Try using Chrome instead');
}
var constraints = {
mandatory: {
googEchoCancellation: false,
googAutoGainControl: false,
googNoiseSuppression: false,
googHighpassFilter: false
},
optional: []
};
navigator.getUserMedia({
audio: constraints
}, function (stream) {
var mediaStreamSource = self.audioContext.createMediaStreamSource(stream);
mediaStreamSource.connect(this.convolver);
this.convolver.connect(this.audioContext.destination);
}, function () {
console.error("Error getting audio stream from getUserMedia");
});
var self = this;
var ir_request = new XMLHttpRequest();
ir_request.open("GET", irURL, true);
ir_request.responseType = "arraybuffer";
ir_request.onload = function () {
self.audioContext.decodeAudioData(ir_request.response, function (buffer) {
var swapButton = document.getElementById('swap');
irBuffer.push(buffer);
self.convolver.buffer = irBuffer[0];
swapButton.disabled = false;
swapButton.addEventListener('click', toggleBuffer);
});
self.audioContext.decodeAudioData(ir_request.response, function (buffer) {
irBuffer.push(buffer)
});
};
ir_request.send();
var toggleBuffer = function () {
console.log('setting');
self.convolver.buffer = irBuffer[currentBuffer];
currentBuffer++;
currentBuffer = currentBuffer %...