Setting Audio Parameters

The JavaScript code example demonstrates how to set various paramters for audio processing.

AudioParameters.html

<!DOCTYPE html>
<html>
	<head>
		<title>XoaX.net JavaScript</title>
		<script src="AudioParameters.js"></script>
		<link rel="icon" href="data:,">
	</head>
	<body onload="Initialize()">
		<h1>Audio Parameters</h1>
		<audio controls>
			<source src="WalhallaWagner.mp3" type="audio/mp3" />
		</audio><br />
		<button id="idGainPlus">Increase Gain</button>
		<button id="idGainMinus">Decrease Gain</button><br />
		<button id="idLinearPlus">Increase Linear Ramp</button>
		<button id="idLinearMinus">Decrease Linear Ramp</button><br />
		<button id="idExpPlus">Increase Exp Ramp</button>
		<button id="idExpMinus">Decrease Exp Ramp</button><br />
		<button id="idTargetOne">Target One</button>
		<button id="idTargetZero">Target Zero</button><br />
		<button id="idValueCurve">Value Curve</button><br />
	</body>
</html>

AudioParameters.js

let gqAudioContext;
// Elements
let gqAudioElement;
let gqGainPlusButton;
let gqGainMinusButton;
let gqLinearPlusButton;
let gqLinearMinusButton;
let gqExpPlusButton;
let gqExpMinusButton;
let gqTimePlusButton;
let gqTimeMinusButton;
let gqValueCurveButton;

function Initialize() {
	gqAudioElement = document.querySelector("audio");
	gqGainPlusButton = document.getElementById("idGainPlus");
	gqGainMinusButton = document.getElementById("idGainMinus");
	gqLinearPlusButton = document.getElementById("idLinearPlus");
	gqLinearMinusButton = document.getElementById("idLinearMinus");
	gqExpPlusButton = document.getElementById("idExpPlus");
	gqExpMinusButton = document.getElementById("idExpMinus");
	gqTargetOneButton = document.getElementById("idTargetOne");
	gqTargetZeroButton = document.getElementById("idTargetZero");
	gqValueCurveButton = document.getElementById("idValueCurve");
	
	gqAudioElement.addEventListener("play", () => {
		gqAudioContext = new AudioContext();
		// Create the node
		const kqMediaSource = new MediaElementAudioSourceNode(gqAudioContext, { mediaElement: gqAudioElement, });
		const kqGainNode = new GainNode(gqAudioContext, { gain: 0.5 });
		// Connect the nodes
		kqMediaSource.connect(kqGainNode);
		kqGainNode.connect(gqAudioContext.destination);
		
		let dCurrGain = kqGainNode.gain.value;
		
		// Increase the gain at 1 second later
		gqGainPlusButton.onclick = () => {
			dCurrGain += 0.25;
			kqGainNode.gain.setValueAtTime(dCurrGain, gqAudioContext.currentTime + 1);
		};
		// Decrease the gain at 1 second later
		gqGainMinusButton.onclick = () => {
			dCurrGain -= 0.25;
			kqGainNode.gain.setValueAtTime(dCurrGain, gqAudioContext.currentTime + 1);
		};
		// Set the linear ramp to value at 2 seconds later
		gqLinearPlusButton.onclick = () => {
			dCurrGain = 1.0;
			kqGainNode.gain.linearRampToValueAtTime(dCurrGain, gqAudioContext.currentTime + 2);
		};
		// Set the linear ramp to value at 2 seconds later
		gqLinearMinusButton.onclick = () => {
			dCurrGain = 0.0;
			kqGainNode.gain.linearRampToValueAtTime(dCurrGain, gqAudioContext.currentTime + 2);
		};
		// Set the exponential ramp to value at 2 seconds later
		gqExpPlusButton.onclick = () => {
			dCurrGain = 1.0;
			kqGainNode.gain.exponentialRampToValueAtTime(dCurrGain, gqAudioContext.currentTime + 2);
		};
		// Set the exponential ramp to value at 2 seconds later
		gqExpMinusButton.onclick = () => {
			dCurrGain = 0.0;
			kqGainNode.gain.exponentialRampToValueAtTime(.01, gqAudioContext.currentTime + 2);
		};
		// Set the target to 1 at 1 second later with a half second transition
		gqTargetOneButton.onclick = () => {
			dCurrGain = 1.0;
			kqGainNode.gain.setTargetAtTime(dCurrGain, gqAudioContext.currentTime + 1, 0.5);
		};
		// Set the target to 0 at 1 second later with a half second transition
		gqTargetZeroButton.onclick = () => {
			dCurrGain = 0.0;
			kqGainNode.gain.setTargetAtTime(dCurrGain, gqAudioContext.currentTime + 1, 0.5);
		};
		// Set a 2 second duration on the linearly interpolated curve, starting immediately.
		const kdaWave = new Float32Array([0.5, 1, 0.5, 0, 0.5, 1, 0, 0.5]);
		gqValueCurveButton.onclick = () => {
			kqGainNode.gain.setValueCurveAtTime(kdaWave, gqAudioContext.currentTime, 2);
		}
	});
}

Core JavaScript

Setting Audio Parameters

AudioParameters.html

AudioParameters.js

Output