Compressor example
const myAudio = document.querySelector('audio');
const pre = document.querySelector('pre');
const myScript = document.querySelector('script');
const button = document.querySelector('button');
let audioCtx;
pre.innerHTML = myScript.innerHTML;
myAudio.addEventListener('play', () => {
if(!audioCtx) {
// Set up AudioContext
const AudioContext = window.AudioContext || window.webkitAudioContext;
audioCtx = new AudioContext();
// Create a MediaElementAudioSourceNode
// Feed the HTMLMediaElement into it
const source = audioCtx.createMediaElementSource(myAudio);
// Create a compressor node
const compressor = audioCtx.createDynamicsCompressor();
compressor.threshold.value = -50;
compressor.knee.value = 40;
compressor.ratio.value = 12;
compressor.attack.value = 0;
compressor.release.value = 0.25;
// connect the AudioBufferSourceNode to the destination
source.connect(audioCtx.destination);
button.onclick = function() {
const active = button.getAttribute('data-active');
if(active === 'false') {
button.setAttribute('data-active', 'true');
button.innerHTML = 'Remove compression';
source.disconnect(audioCtx.destination);
source.connect(compressor);
compressor.connect(audioCtx.destination);
} else if(active === 'true') {
button.setAttribute('data-active', 'false');
button.innerHTML = 'Add compression';
source.disconnect(compressor);
compressor.disconnect(audioCtx.destination);
source.connect(audioCtx.destination);
}
}
}
})