Web Audio Api MultiBandCompressor

Developer
André Michelle
Size
3,553 Kb
Views
20,240
  1. Web Audio Api MultiBandCompressor Previews
  2. Web Audio Api MultiBandCompressor HTML Codes
  3. Web Audio Api MultiBandCompressor CSS Codes
  4. Web Audio Api MultiBandCompressor JS Codes

How do I make an web audio api multibandcompressor?

Hacking an multi-band-compressor with the web audio api.. What is a web audio api multibandcompressor? How do you make a web audio api multibandcompressor? This script and codes were developed by André Michelle on 18 October 2022, Tuesday.

Web Audio Api MultiBandCompressor Previews
IQ Test

Web Audio Api MultiBandCompressor - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Web Audio Api MultiBandCompressor</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h2>Web Audio Api MultiBandCompressor</h2>
<div class="controls"> <label>Enabled</label> <input type="checkbox" checked onchange="changeBoolean(this.checked , 'drywet');"></input>
</div>
<div class="row"> <h3>Low Bands</h3> <div class="controls"> <label>Threshold</label> <input type="range" id="low-threshold" value="100" step="1" min="0" max="100" oninput="changePercent(this.value, this.id);"></input>
</div>
<div class="controls"> <label>Knee</label> <input type="range" id="low-knee" value="100" step="1" min="0" max="100" oninput="changePercent(this.value, this.id);"></input>
</div>
<div class="controls"> <label>Ratio</label> <input type="range" id="low-ratio" value="100" step="1" min="0" max="100" oninput="changePercent(this.value, this.id);"></input>
</div>
<div class="controls"> <label>Attack</label> <input type="range" id="low-attack" value="100" step="1" min="0" max="100" oninput="changePercent(this.value, this.id);"></input>
</div>
<div class="controls"> <label>Release</label> <input type="range" id="low-release" value="100" step="1" min="0" max="100" oninput="changePercent(this.value, this.id);"></input>
</div>
<div class="controls"> <label>Reduction</label> <meter id="low-reduction" value="100" min="0" max="100"></meter>
</div>
</div>
<div class="row"> <h3>Medium Bands</h3> <div class="controls"> <label>Threshold</label> <input type="range" id="mid-threshold" value="100" step="1" min="0" max="100" oninput="changePercent(this.value, this.id);"></input>
</div>
<div class="controls"> <label>Knee</label> <input type="range" id="mid-knee" value="100" step="1" min="0" max="100" oninput="changePercent(this.value, this.id);"></input>
</div>
<div class="controls"> <label>Ratio</label> <input type="range" id="mid-ratio" value="100" step="1" min="0" max="100" oninput="changePercent(this.value, this.id);"></input>
</div>
<div class="controls"> <label>Attack</label> <input type="range" id="mid-attack" value="100" step="1" min="0" max="100" oninput="changePercent(this.value, this.id);"></input>
</div>
<div class="controls"> <label>Release</label> <input type="range" id="mid-release" value="100" step="1" min="0" max="100" oninput="changePercent(this.value, this.id);"></input>
</div>
<div class="controls"> <label>Reduction</label> <meter id="mid-reduction" value="100" min="0" max="100"></meter>
</div>
</div>
<div class="row"> <h3>High Bands</h3> <div class="controls"> <label>Threshold</label> <input type="range" id="high-threshold" value="100" step="1" min="0" max="100" oninput="changePercent(this.value, this.id);"></input>
</div>
<div class="controls"> <label>Knee</label> <input type="range" id="high-knee" value="100" step="1" min="0" max="100" oninput="changePercent(this.value, this.id);"></input>
</div>
<div class="controls"> <label>Ratio</label> <input type="range" id="high-ratio" value="100" step="1" min="0" max="100" oninput="changePercent(this.value, this.id);"></input>
</div>
<div class="controls"> <label>Attack</label> <input type="range" id="high-attack" value="100" step="1" min="0" max="100" oninput="changePercent(this.value, this.id);"></input>
</div>
<div class="controls"> <label>Release</label> <input type="range" id="high-release" value="100" step="1" min="0" max="100" oninput="changePercent(this.value, this.id);"></input>
</div>
<div class="controls"> <label>Reduction</label> <meter id="high-reduction" value="100" min="0" max="100"></meter>
</div>
</div>
<div class="player"> <h3>André Michelle <a href="www.audiotool.com/track/volution/">Volution</a></h3> <audio id="player" crossorigin controls> <source src="http://api.audiotool.com/track/volution/play.mp3" type="audio/mpeg"> <source src="http://api.audiotool.com/track/volution/play.ogg" type="audio/ogg"> Your browser does not support the audio tag. </audio>
</div> <script src="js/index.js"></script>
</body>
</html>

Web Audio Api MultiBandCompressor - Script Codes CSS Codes

html, body { font-size: 12px; font-family: "Open Sans"; background: #EEE;
}
a { text-decoration: none; color: #999;
}
div.row { display: inline; float: left; width: 256px; margin-bottom: 16px;
}
div.player { clear: both;
}
audio { display: block;
}
div.controls label { display: inline-block; text-align: right; width: 80px;
}
div.controls label, div.controls input, div.controls meter { vertical-align: middle; padding: 0; margin: 0;
}
div.controls input, div.controls meter { width: 160px;
}
meter { height: 8px; -webkit-appearance: none; border: none; border-radius: 4px;
}

Web Audio Api MultiBandCompressor - Script Codes JS Codes

// [email protected]
var context = new AudioContext();
var media = document.getElementById('player');
var source = context.createMediaElementSource(media);
// EQ Properties
//
var Q = 1.0;
var bandSplit = [120, 2000];
// the high frequencies
var hBand = context.createBiquadFilter();
hBand.type = "highpass";
hBand.frequency.value = bandSplit[1];
hBand.Q.value = Q;
var hInvert = context.createGain();
hInvert.gain.value = -1.0;
// the medium frequencies
var mBand = context.createGain();
// the low frequencies
var lBand = context.createBiquadFilter();
lBand.type = "lowpass";
lBand.frequency.value = bandSplit[0];
lBand.Q.value = Q;
var lInvert = context.createGain();
lInvert.gain.value = -1.0;
// feed the bands
source.connect(lBand);
source.connect(mBand);
source.connect(hBand);
// invert low/high
hBand.connect(hInvert);
lBand.connect(lInvert);
// add (subtract) them to get the medium frequencies
hInvert.connect(mBand);
lInvert.connect(mBand);
// three compressors
var lComp = context.createDynamicsCompressor();
var mComp = context.createDynamicsCompressor();
var hComp = context.createDynamicsCompressor();
// connect them to the compressors
lBand.connect(lComp);
mBand.connect(mComp);
hBand.connect(hComp);
// wet signal is the sum of all compressors
var wet = context.createGain();
wet.gain.value = 1.0;
lComp.connect(wet);
mComp.connect(wet);
hComp.connect(wet);
// preserve dry
var dry = context.createGain();
dry.gain.value = 0.0;
source.connect(dry);
// route them all to the sound card
wet.connect(context.destination);
dry.connect(context.destination);
// Mapping
//
var linear = function(min, max, value) { return min + value * (max - min);
}
var linearInv = function(min, max, value) { return (value - min) / (max - min);
}
// Input
//
function changeBoolean(value, type) { switch (type) { case 'drywet': dry.gain.value = value ? 0.0 : 1.0; wet.gain.value = value ? 1.0 : 0.0; break; }
}
// Accroding to http://www.w3.org/TR/webaudio/#DynamicsCompressorNode
var compressor = { threshold: [-100, 0], knee: [0, 40], ratio: [1, 20], attack: [0, 1], release: [0, 1]
}
for (var name in compressor) { var range = compressor[name]; document.getElementById("low-" + name).value = linearInv(range[0], range[1], lComp[name].value) * 100.0; document.getElementById("mid-" + name).value = linearInv(range[0], range[1], lComp[name].value) * 100.0; document.getElementById("high-" + name).value = linearInv(range[0], range[1], lComp[name].value) * 100.0;
}
function changePercent(string, type) { var value = parseFloat(string) / 100.0; switch (type) { case 'low-threshold': lComp.threshold.value = linear(compressor.threshold[0], compressor.threshold[1], value); break; case 'low-knee': lComp.knee.value = linear(compressor.knee[0], compressor.knee[1], value); break; case 'low-ratio': lComp.ratio.value = linear(compressor.ratio[0], compressor.ratio[1], value); break; case 'low-attack': lComp.attack.value = linear(compressor.attack[0], compressor.attack[1], value); break; case 'low-release': lComp.release.value = linear(compressor.release[0], compressor.release[1], value); break; case 'mid-threshold': mComp.threshold.value = linear(compressor.threshold[0], compressor.threshold[1], value); break; case 'mid-knee': mComp.knee.value = linear(compressor.knee[0], compressor.knee[1], value); break; case 'mid-ratio': mComp.ratio.value = linear(compressor.ratio[0], compressor.ratio[1], value); break; case 'mid-attack': mComp.attack.value = linear(compressor.attack[0], compressor.attack[1], value); break; case 'mid-release': mComp.release.value = linear(compressor.release[0], compressor.release[1], value); break; case 'high-threshold': hComp.threshold.value = linear(compressor.threshold[0], compressor.threshold[1], value); break; case 'high-knee': hComp.knee.value = linear(compressor.knee[0], compressor.knee[1], value); break; case 'high-ratio': hComp.ratio.value = linear(compressor.ratio[0], compressor.ratio[1], value); break; case 'high-attack': hComp.attack.value = linear(compressor.attack[0], compressor.attack[1], value); break; case 'high-release': hComp.release.value = linear(compressor.release[0], compressor.release[1], value); break; }
}
var dbToGain = function(db) { return Math.exp(db * Math.log(10.0) / 20.0);
}
var lowMeter = document.getElementById("low-reduction");
var midMeter = document.getElementById("mid-reduction");
var highMeter = document.getElementById("high-reduction");
var showReduction = (function() { lowMeter.value = dbToGain(lComp.reduction.value) * 100.0; midMeter.value = dbToGain(mComp.reduction.value) * 100.0; highMeter.value = dbToGain(hComp.reduction.value) * 100.0; window.requestAnimationFrame(arguments.callee);
})();
Web Audio Api MultiBandCompressor - Script Codes
Web Audio Api MultiBandCompressor - Script Codes
Home Page Home
Developer André Michelle
Username andremichelle
Uploaded October 18, 2022
Rating 3
Size 3,553 Kb
Views 20,240
Do you need developer help for Web Audio Api MultiBandCompressor?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

André Michelle (andremichelle) Script Codes
Name
Happy PI Day
Freaky Dot Patterns
Web Audio Api Equalizer
Web Audio Api HardLimiter
Calculating Pi with Virtual Darts
Fourier series
Geolocation Api
Battery Api
Code 7
Animated text on bezier curve
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!