Audio Visualization with JavaScript

Audio visualizers have become increasingly popular in recent years, and with good reason. They provide a visually stimulating way to listen to music and can create a truly immersive experience. And with the help of JavaScript, you can create your own audio visualizer for your website or application.

Audio visualizers use the audio data from a song or other audio source to generate a variety of shapes and colors. The shapes and colors are usually determined by the frequency, amplitude, and other characteristics of the audio. The audio data is typically fed into a JavaScript library that handles the visualization process.

One of the main benefits of using JavaScript to create an audio visualizer is that it can be used to create interactive visualizations. With a few lines of code, you can trigger different visualizations depending on the audio input. For example, you can use the audio data to control the color or size of the visualizer, or you can use the data to trigger different animations. This can create an engaging experience for users.

In addition to the audio data, you can also use other data sources like images, videos, and other multimedia elements to create an audio visualizer. This can add an extra layer of interactivity and visual interest.

In a previous post, I have given the full source code of the Music player - Python project with source code. Now, on this page, you will get the full source code of the Audio visualizer which is made using HTML, CSS, and JavaScript.

Using JavaScript, you can create your own audio visualizer for virtually any platform, from web browsers to mobile devices. All you need is a basic understanding of JavaScript, access to a web page or app development platform, and some basic audio tools.

First, understand the basics of JavaScript. Before you start building this audio visualizer, it’s important to have a basic understanding of JavaScript. Learn the fundamentals of the language, including its syntax, data types, functions, and loops. Once you have a good grasp of the basics, you’ll be ready to move on to the next step. Here’s a full detail of our Audio Visualizer project.

Project Info:

Project Name	Audio Visualization with JavaScript – for beginners
Description	This Audio Visualizer project is created using HTML, CSS, and JS. It has an awesome look and performance. For beginners, this project will be very helpful to learn about web programming and amazing visuals.
Used Languages	HTML, CSS, and JS
Published by	Codes Gallery
Developer	Chetan Bedakihale

Features of this Audio Visualizer project:

It has an awesome design
Audio visualization with 5 bars
Visualization of the base with 2 circles.
It has a feature to choose music from the local system of the user.
It has very easy JS code.
It is created by HTML, CSS, and JS.

@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Fredoka One', cursive;
}

body{
    background: #262626;
}

#title{
    width: 100%;
    height: 10rem;
    margin-top:3rem;
    display: grid;
    place-content: center;
    place-items: center;
}

#song_name{
    width: 80rem;
    height: 8rem;
    background: #262626;
    display: grid;
    place-content: center;
    place-items: center;
    font-size: 2rem;
    font-weight: bold;
    color: white;
}

#bars_container{
    width: 100%;
    position: absolute;
    bottom: 25%;  
    text-align: center;
}

#bars_container .bars{
    width: 40px;
    height: 200px;
    display: inline-block;
    justify-content: center;
    align-items: center;
    border-radius: 15px;
    margin-left: 30px;
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition-duration: 0.2s;
    background: #262626;
    box-shadow: -9px 9px 18px #181818,
                9px -9px 18px #343434;
}

.circle_vis{
    background: #262626;
    box-shadow: inset -9px 9px 18px #181818,
                inset 9px -9px 18px #343434;        
    width: 200px;
    height: 200px;
    position: absolute;
    top: 40%;
    left: 15%;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
   
}

.circle{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition-duration: 0.2s;
    background: linear-gradient(225deg, #222222, #292929);
    box-shadow:  -9px 9px 18px #181818,
                 9px -9px 18px #343434;              
}

.circle_vis_2{
    width: 200px;
    height: 200px;
    position: absolute;
    top: 40%;
    right: 15%;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #262626;
    box-shadow: inset -9px 9px 18px #181818,
                inset 9px -9px 18px #343434;
}

.circle_2{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition-duration: 0.2s;  
    background: linear-gradient(225deg, #222222, #292929);
    box-shadow: -9px 9px 18px #181818,
                9px -9px 18px #343434;
}

#music_controler{
    width: 100%;
    height: 2rem;
    position: absolute;
    bottom: 5%;
    display: flex;
    flex-direction: row;
}

#music_controler audio{
   color: #205cff;
   border-radius: 0.5rem;
   width: 20rem;
   margin-left: 1.9rem;
   background: #404040;
   box-shadow: -9px 9px 18px #181818,
               9px -9px 18px #343434;
}

input{
    margin-left: 1rem;
    width: fit-content;
    height: fit-content;
    color: white;
    position: relative;
    top: 0.2rem;
    background: #262626;
    box-shadow: -9px 9px 18px #181818,
                9px -9px 18px #343434;
}

//Initializing the canvas and the audio resources

let audio_file = document.getElementById("audio_file");
let reader = new FileReader();
let audio = document.querySelector('audio');
let title = document.getElementById('song_name');
reader.addEventListener('load', () => {
  audio.src = reader.result;
});

audio_file.addEventListener('change', function () {
  reader.readAsDataURL(audio_file.files[0]);
  let Song_name = audio_file.value;
  let length = Song_name.length;
  let SubString = Song_name.substring(12, length+1);
  title.innerHTML = SubString;
});

const container = document.getElementById('bars_container');

// setting up the web audio API variable. means set up our audio source, analyzer and context. 
const audioCtx = new (window.AudioContext || window.webkitAudioContext)();

let audioSource = null;
let analyser = null;

audioSource = audioCtx.createMediaElementSource(audio);
analyser = audioCtx.createAnalyser();
audioSource.connect(analyser);
analyser.connect(audioCtx.destination);

// Calculating the visualizer's bar dimensions
analyser.fftSize = 128;

const bufferLength = analyser.frequencyBinCount;

const dataArray = new Uint8Array(bufferLength);
console.log(dataArray);

// creating bars
  
for(let i = 0; i <= 4; i++){
  const bars = document.createElement('DIV');
  bars.setAttribute("class","bars");
  bars.setAttribute("id","bar" + i);
  container.appendChild(bars);

}
// Animating the bars

function animation(){
  
    analyser.getByteFrequencyData(dataArray);
    for (let i = 0; i <= 4; i++) {  
          let index = (i + 12 )*2;
          let index2 = (i + 20)*2;
        
          barHeight = dataArray[index];
          circle_width = dataArray[index2];

const circle_1 = document.querySelector('.circle');
          const circle_2 = document.querySelector('.circle_2');

const Bar = document.querySelector("#bar" + i);
          const bar1 = document.querySelector("#bar0");
          const bar2 = document.querySelector("#bar1");
          const bar3 = document.querySelector("#bar2");
          const bar5 = document.querySelector("#bar4");

let height = Math.max(3, barHeight || 0);
        
          let r = Math.max(50, circle_width + 10 || 0);

Bar.style.height = height + "px";
          bar1.style.background = "#FF1744";
          bar3.style.background = "#448AFF";
          bar5.style.background = "#FFC400";
          
          circle_1.style.cssText = "height:"+r+"px; width:"+r+"px; ";
          circle_2.style.cssText = "height:"+r+"px; width:"+r+"px; ";
           
    }
    requestAnimationFrame(animation);
}
animation();

Output:

Creating your own audio visualizer using JavaScript can be a great way to learn about programming and create some amazing visuals. With the right tools and a bit of practice, you can turn virtually any sound into an entrancing animation. So, grab your headphones and get coding!

Project Info:

Features of this Audio Visualizer project:

Output:

Post a Comment

Post a Comment

Contact Form

Audio Visualization with JavaScript – for beginners

Project Info:

Features of this Audio Visualizer project:

Output:

Post a Comment

Post a Comment

Contact Form