JSFiddle - React, Tailwind, and code Playground

by Santiago J

HTML

<audio id="audio" controls></audio>
<br />
<input id="cutoff-slider" type="range" min="0" max="100" />
<span id="cutoff-value"></span>

JavaScript

window.AudioContext = window.webkitAudioContext || window.AudioContext;

var audio = document.querySelector("#audio");
audio.autoplay = true;
audio.loop = true;
audio.src = "http://www.nes-snes-sprites.com/NES%20Soundtracks/snes%20mp3/Teenage%20Mutant%20Ninja%20Turtles%20IV%20-%20Turtles%20in%20Time/Sewer_Surfin.mp3";

var context = new AudioContext;
var filter = context.createBiquadFilter();
var filter2 = context.createBiquadFilter();
var source = context.createMediaElementSource(audio);

source.connect(filter);
filter.connect(filter2);
filter2.connect(context.destination);

var maxFreq = Math.log(20000);
var cutoffDisplay = document.querySelector("#cutoff-value");
var cutoffSlider = document.querySelector("#cutoff-slider");
cutoffDisplay.textContent = Math.exp(maxFreq * cutoffSlider.value / 100).toFixed(3);
cutoffSlider.onchange = function() {
    var value = Math.exp(maxFreq * this.value / 100);
    filter.frequency.value = filter2.frequency.value = value;
    cutoffDisplay.textContent = value.toFixed(3);
};