Apply Filter Effects to Music

Developer
Johan Karlsson
Size
4,027 Kb
Views
44,528
  1. Apply Filter Effects to Music Previews
  2. Apply Filter Effects to Music HTML Codes
  3. Apply Filter Effects to Music CSS Codes
  4. Apply Filter Effects to Music JS Codes

How do I make an apply filter effects to music?

Using Web Audio API to apply filter effects to music.Music streamed from Soundcloud.Song by Avicci.. What is a apply filter effects to music? How do you make a apply filter effects to music? This script and codes were developed by Johan Karlsson on 21 August 2022, Sunday.

Apply Filter Effects to Music Previews
IQ Test

Apply Filter Effects to Music - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Apply Filter Effects to Music</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <img src="https://developers.soundcloud.com/assets/powered_by_large_white-9c2af6a93ad2b1c541f423d9e9045980.png" class="float"></img>
<div class="top-container"> <h1>Apply filter effects to music!</h1> <h2>Draw the sliders and hear how it effects the sound. <br>But be careful with the volume, don't damage your<br> hearing/headphones/speakers!</h2> <audio id="theSong" controls />
</div>
<div id="controls"> <p> <select id="filtersDropdown"> </select> </p> <canvas id="canvas" width="400" height ="200"></canvas> <p> <input id="frequencySlider" title="Frequency" type="range" min="0" max="2000" value="1000" /> <input id="qSlider" title="Q" type="range" min="1" max="100" value="10" /> <input id="gainSlider" title="Gain" disabled type="range" min="1" max="100" value="20" /> </p>
</div> <script src="js/index.js"></script>
</body>
</html>

Apply Filter Effects to Music - Script Codes CSS Codes

body {	background-color: #141722;	text-align: center;	margin: 0 auto;	position: relative;
}
.float { position: absolute; left: 0; top: 0;
}
.top-container {	color: #fff;	font-family: sans-serif;	width: 100%;	padding-top: 40px;	padding-bottom: 40px;	margin: 0 auto;	text-align: center;	margin-bottom: 40px;	border-bottom: 2px solid rgba(0, 0, 0, 1);	background-color: rgba(128, 128, 128, 0.16);
}
.top-container h1 {	font-size: 28px;
}
.top-container h2 {	font-size: 14px;	font-weight: 100;	opacity: 0.6;
}
#canvas {	border: 2px solid black;	background-color: rgba(128, 128, 128, 0.16);
}
input:disabled { opacity: 0.1;
}

Apply Filter Effects to Music - Script Codes JS Codes

/* Read my blog post about Web Audio API: http://codepen.io/DonKarlssonSan/blog/fun-with-web-audio-api Browser support for Web Audio API: http://caniuse.com/#feat=audio-api
*/
(function() { var AudioContext = window.AudioContext || window.webkitAudioContext; var audioContext; var biquadFilter; var frequencySlider = document.getElementById("frequencySlider"); var qSlider = document.getElementById("qSlider"); var gainSlider = document.getElementById("gainSlider"); var audio; // All Web Audio API filters // https://developer.mozilla.org/en-US/docs/Web/API/BiquadFilterNode/type // q and gain controls if the corresponding slider // should be enabled var filters = { "lowpass": { q: true, gain: false }, "highpass": { q: true, gain: false }, "bandpass": { q: true, gain: false }, "lowshelf": { q: false, gain: true }, "highshelf": { q: false, gain: true }, "peaking": { q: true, gain: true }, "notch": { q: true, gain: false }, "allpass": { q: true, gain: false } }; var canvas = document.getElementById("canvas"); var canvasContext = canvas.getContext("2d"); var frequencyBars = 100; // Array containing all the frequencies we want to get // response for when calling getFrequencyResponse() var myFrequencyArray = new Float32Array(frequencyBars); for(var i = 0; i < frequencyBars; ++i) { myFrequencyArray[i] = 2000/frequencyBars*(i+1); } // We receive the result in these two when calling // getFrequencyResponse() var magResponseOutput = new Float32Array(frequencyBars); // magnitude var phaseResponseOutput = new Float32Array(frequencyBars); audioContext = new AudioContext(); window.addEventListener("load", function(e) { audio = document.getElementById("theSong"); audio.crossOrigin = "anonymous"; var source = audioContext.createMediaElementSource(audio); biquadFilter = audioContext.createBiquadFilter(); biquadFilter.type = "lowpass"; biquadFilter.frequency.value = 1000; biquadFilter.Q.value = 10; biquadFilter.gain.value = 20; source.connect(biquadFilter); biquadFilter.connect(audioContext.destination); updateFrequencyResponse(); }, false); function drawFrequencyResponse(mag, phase) { canvasContext.clearRect(0, 0, canvas.width, canvas.height); var barWidth = 400 / frequencyBars; // Magnitude canvasContext.strokeStyle = "white"; canvasContext.beginPath(); for(var frequencyStep = 0; frequencyStep < frequencyBars; ++frequencyStep) { canvasContext.lineTo( frequencyStep * barWidth, canvas.height - mag[frequencyStep]*90); } canvasContext.stroke(); // Phase canvasContext.strokeStyle = "red"; canvasContext.beginPath(); for(var frequencyStep = 0; frequencyStep < frequencyBars; ++frequencyStep) { canvasContext.lineTo( frequencyStep * barWidth, canvas.height - (phase[frequencyStep]*90 + 300)/Math.PI); } canvasContext.stroke(); } function updateFrequencyResponse() { biquadFilter.getFrequencyResponse( myFrequencyArray, magResponseOutput, phaseResponseOutput); drawFrequencyResponse(magResponseOutput, phaseResponseOutput); } frequencySlider.addEventListener("change", function () { biquadFilter.frequency.value = this.value; }); frequencySlider.addEventListener("mousemove", function () { biquadFilter.frequency.value = this.value; updateFrequencyResponse(); }); qSlider.addEventListener("mousemove", function () { biquadFilter.Q.value = this.value; updateFrequencyResponse(); }); gainSlider.addEventListener("mousemove", function () { biquadFilter.gain.value = this.value; updateFrequencyResponse(); }); var filtersDropdown = document.getElementById("filtersDropdown"); for(var item in filters) { var option = document.createElement("option"); option.innerHTML = item; // This will cause a re-flow of the page but we don't care filtersDropdown.appendChild(option); }; function filterClicked (event) { event = event || window.event; var target = event.target || event.srcElement; var filterName = target.value; biquadFilter.type = filterName; updateFrequencyResponse(); qSlider.disabled = !filters[filterName].q; gainSlider.disabled = !filters[filterName].gain; }; filtersDropdown.addEventListener("change", filterClicked, false); //////////////////////////// // Soundcloud stuff below // //////////////////////////// function get(url, callback) { var request = new XMLHttpRequest(); request.onreadystatechange = function() { if (request.readyState === 4 && request.status === 200) { callback(request.responseText); } } request.open("GET", url, true); request.send(null); } var clientParameter = "client_id=aae0cd3ce269784234bb78aa6d485394" var trackPermalinkUrl = "https://soundcloud.com/spinninrecords/project-t-martin-garrix-remix"; //var trackPermalinkUrl = "https://soundcloud.com/aviciiofficial/avicii-levels-original-mix"; function findTrack() { get("https://api.soundcloud.com/resolve.json?url=" + trackPermalinkUrl + "&" + clientParameter, function (response) { var trackInfo = JSON.parse(response); audio.src = trackInfo.stream_url + "?" + clientParameter; } ); }; findTrack();
})();
Apply Filter Effects to Music - Script Codes
Apply Filter Effects to Music - Script Codes
Home Page Home
Developer Johan Karlsson
Username DonKarlssonSan
Uploaded August 21, 2022
Rating 3.5
Size 4,027 Kb
Views 44,528
Do you need developer help for Apply Filter Effects to Music?

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!

Johan Karlsson (DonKarlssonSan) Script Codes
Name
In Tribute to Simon Plouffe
Wayward Walker Worms
Phone Case Pattern Animation
Cash by Brownian Motion
Fireflies
Lissajous x Lissajous
Photobooth - Webcam with realtime CSS filters.
Laser Writer
Antenna Generator
Circle Fractal
Create amazing Facebook ads 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!