A Pen by Nick Jones on CodePen.
Created
December 29, 2022 21:39
-
-
Save alighamdan/7f3db42df29b54e264766f15def49176 to your computer and use it in GitHub Desktop.
JS Audio Visualizer
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div id="content"> | |
<input type="file" id="thefile" accept="audio/*" /> | |
<canvas id="canvas"></canvas> | |
<audio id="audio" controls></audio> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
window.onload = function() { | |
var file = document.getElementById("thefile"); | |
var audio = document.getElementById("audio"); | |
file.onchange = function() { | |
var files = this.files; | |
audio.src = URL.createObjectURL(files[0]); | |
audio.load(); | |
audio.play(); | |
var context = new AudioContext(); | |
var src = context.createMediaElementSource(audio); | |
var analyser = context.createAnalyser(); | |
var canvas = document.getElementById("canvas"); | |
canvas.width = window.innerWidth; | |
canvas.height = window.innerHeight; | |
var ctx = canvas.getContext("2d"); | |
src.connect(analyser); | |
analyser.connect(context.destination); | |
analyser.fftSize = 256; | |
var bufferLength = analyser.frequencyBinCount; | |
console.log(bufferLength); | |
var dataArray = new Uint8Array(bufferLength); | |
var WIDTH = canvas.width; | |
var HEIGHT = canvas.height; | |
var barWidth = (WIDTH / bufferLength) * 2.5; | |
var barHeight; | |
var x = 0; | |
function renderFrame() { | |
requestAnimationFrame(renderFrame); | |
x = 0; | |
analyser.getByteFrequencyData(dataArray); | |
ctx.fillStyle = "#000"; | |
ctx.fillRect(0, 0, WIDTH, HEIGHT); | |
for (var i = 0; i < bufferLength; i++) { | |
barHeight = dataArray[i]; | |
var r = barHeight + (25 * (i/bufferLength)); | |
var g = 250 * (i/bufferLength); | |
var b = 50; | |
ctx.fillStyle = "rgb(" + r + "," + g + "," + b + ")"; | |
ctx.fillRect(x, HEIGHT - barHeight, barWidth, barHeight); | |
x += barWidth + 1; | |
} | |
} | |
audio.play(); | |
renderFrame(); | |
}; | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
#thefile { | |
position: fixed; | |
top: 10px; | |
left: 10px; | |
z-index: 100; | |
} | |
#canvas { | |
position: fixed; | |
left: 0; | |
top: 0; | |
width: 100%; | |
height: 100%; | |
} | |
audio { | |
position: fixed; | |
left: 10px; | |
bottom: 10px; | |
width: calc(100% - 20px); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment