Applying a Compressor Node

The JavaScript code example demonstrates how to program a compressor node for audio processing.

Compressor.html

<!DOCTYPE html>
<html>
	<head>
		<title>XoaX.net JavaScript</title>
		<script src="Compressor.js"></script>
		<link rel="icon" href="data:,">
	</head>
	<body onload="Initialize()">
		<h1>Compressor</h1>
		<audio controls>
			<source src="WalhallaWagner.mp3" type="audio/mp3" />
		</audio>
		<br /><br />
		<button id="idCompress" data-compress="false">Decompress</button>
	</body>
</html>

Compressor.js

let gqAudioContext;
let gqCompressButton;
let gqAudioElement;

function Initialize() {
	gqCompressButton = document.getElementById("idCompress");
	// There is only one audio element
	gqAudioElement = document.getElementsByTagName("audio")[0];
	
  // Set the play handler on the audio element
	gqAudioElement.addEventListener("play", () => {
		if (!gqAudioContext) {
			gqAudioContext = new AudioContext();
			
    	// Create a new media element audio source node with this
    	const qMediaSourceNode = new MediaElementAudioSourceNode(gqAudioContext, {
    		mediaElement: gqAudioElement,
    	});
    	// Create the compressor node
    	const qCompressorNode = new DynamicsCompressorNode(gqAudioContext, {
    		threshold: -50, knee: 40, ratio: 12, attack: 0, release: 0.25,
    	});

    	// Connect the AudioBufferSourceNode to the destination
    	qMediaSourceNode.connect(gqAudioContext.destination);

    	gqCompressButton.onclick = () => {
    		const kqCompressAttribute = gqCompressButton.getAttribute("data-compress");
    		if (kqCompressAttribute === "false") {
    			gqCompressButton.setAttribute("data-compress", "true");
    			gqCompressButton.textContent = "Compress";
    			qMediaSourceNode.disconnect(gqAudioContext.destination);
    			qMediaSourceNode.connect(qCompressorNode);
    			qCompressorNode.connect(gqAudioContext.destination);
    		} else {
    			gqCompressButton.setAttribute("data-compress", "false");
    			gqCompressButton.textContent = "Decompress";
    			qMediaSourceNode.disconnect(qCompressorNode);
    			qCompressorNode.disconnect(gqAudioContext.destination);
    			qMediaSourceNode.connect(gqAudioContext.destination);
    		}
    	};
		}
	});
}

Core JavaScript

Applying a Compressor Node

Compressor.html

Compressor.js

Output