diff --git a/Audio Visualizer/README.md b/Audio Visualizer/README.md
new file mode 100644
index 0000000..52deca7
--- /dev/null
+++ b/Audio Visualizer/README.md
@@ -0,0 +1 @@
+- [Reference Video](https://youtu.be/FK0867WUbvE?si=RXDbLERWH7Pe2Kwh)
diff --git a/Audio Visualizer/demo.html b/Audio Visualizer/demo.html
new file mode 100644
index 0000000..c939d84
--- /dev/null
+++ b/Audio Visualizer/demo.html
@@ -0,0 +1,22 @@
+
+
+
+
+
+ Audio Visualizer
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/Audio Visualizer/script.js b/Audio Visualizer/script.js
new file mode 100644
index 0000000..8f6af1d
--- /dev/null
+++ b/Audio Visualizer/script.js
@@ -0,0 +1,61 @@
+document.getElementById("audio").addEventListener("change", (event) => {
+ const file = event.target.files[0];
+
+ const reader = new FileReader();
+
+ reader.addEventListener("load", (event) => {
+ const arrayBuffer = event.target.result;
+
+ const audioContext = new (window.AudioContext ||
+ window.webkitAudioContext)();
+
+ audioContext.decodeAudioData(arrayBuffer, (audioBuffer) => {
+ visualize(audioBuffer, audioContext);
+ });
+ });
+
+ reader.readAsArrayBuffer(file);
+})
+
+function visualize(audioBuffer, audioContext) {
+ const canvas = document.getElementById("canvas");
+ canvas.width = canvas.clientWidth;
+ canvas.height = canvas.clientHeight;
+
+ const analyser = audioContext.createAnalyser();
+ analyser.fftSize = 256;
+
+ const frequencyBufferLength = analyser.frequencyBinCount;
+ const frequencyData = new Uint8Array(frequencyBufferLength);
+
+ const source = audioContext.createBufferSource();
+ source.buffer = audioBuffer;
+ source.connect(analyser);
+ analyser.connect(audioContext.destination);
+ source.start();
+
+ const canvasContext = canvas.getContext("2d");
+
+ const barWidth = canvas.width / frequencyBufferLength;
+
+ function draw() {
+ requestAnimationFrame(draw);
+ canvasContext.fillStyle = "rgb(173, 216, 230)";
+ canvasContext.fillRect(0, 0, canvas.width, canvas.height);
+
+ analyser.getByteFrequencyData(frequencyData);
+
+ for (let i = 0; i < frequencyBufferLength; i++) {
+ // The frequency data is composed of integers on a scale from 0 to 255
+ canvasContext.fillStyle = "rgb(" + (frequencyData[i]) + ",118, 138)";
+ canvasContext.fillRect(
+ i * barWidth,
+ canvas.height - frequencyData[i],
+ barWidth - 1,
+ frequencyData[i]
+ );
+ }
+ }
+
+ draw();
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 766a73d..e3fdf12 100644
--- a/index.html
+++ b/index.html
@@ -56,6 +56,7 @@
BEM(Block, Element Modifier)
3D Animation
Scroll Watcher
+ Audio Visualizer