Creating an HTML Music Visualizer

How to Create an HTML Music Visualizer With Examples

It’s actually pretty easy to create an HTML music visualizer if you include CSS and JavaScript. Below we’ve provided a live demo of the visualizer we will be building in this tutorial.

HTML Music Visualizer Live Demo

<div class="super-container">
  <div class="container">
    <div class="bar barOne"></div>
    <div class="bar barTwo"></div>
    <div class="bar barThree"></div>
    <div class="bar barFour"></div>
    <div class="bar barFive"></div>
    <div class="play-container">
      <span class="material-icons playAction">play_arrow</span>
      <span class="material-icons pauseAction hide">pause</span>
    </div>
  </div>
</div>
<div class="overlay">Music Vizualizer</div>

html, body {
  font-family: sans-serif;
}

.super-container {
  position: absolute;
  background: #f6f6f6;
  top: 0;
  left: 0;
  right: 0;
  bottom: 60px;
}

.container {
  max-width: 500px;
  position: relative;
  height: 100%;
  margin: 0 auto;
  transition: 500ms 50ms cubic-bezier(0.4, 0, 0.6, 1);
}

.bar {
  box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
  transition: 200ms 50ms cubic-bezier(0.4, 0, 0.6, 1);
}

.barAnimate {
  animation: equalize 5s 0s infinite;
}

@keyframes equalize {
  0% {
    height: 60%;
  }
  4% {
    height: 50%;
  }
  8% {
    height: 40%;
  }
  12% {
    height: 30%;
  }
  16% {
    height: 20%;
  }
  20% {
    height: 30%;
  }
  24% {
    height: 40%;
  }
  28% {
    height: 10%;
  }
  32% {
    height: 40%;
  }
  36% {
    height: 60%;
  }
  40% {
    height: 20%;
  }
  44% {
    height: 40%;
  }
  48% {
    height: 70%;
  }
  52% {
    height: 30%;
  }
  56% {
    height: 10%;
  }
  60% {
    height: 30%;
  }
  64% {
    height: 50%;
  }
  68% {
    height: 60%;
  }
  72% {
    height: 30%;
  }
  76% {
    height: 80%;
  }
  80% {
    height: 70%;
  }
  84% {
    height: 40%;
  }
  88% {
    height: 50%;
  }
  92% {
    height: 80%;
  }
  96% {
    height: 70%;
  }
  100% {
    height: 60%;
  }
}

.bar:nth-child(1) { 
  animation-delay: -1.2s;
}

.bar:nth-child(2) { 
  animation-delay: -1.9s;
}

.bar:nth-child(3) { 
  animation-delay: -2.2s;
}

.bar:nth-child(4) { 
  animation-delay: -2.6s;
}

.barOne {
  position: absolute;
  bottom: 0;
  right: 0%;
  width: 80px;
  height: 20%;
  background: #33b24f;
}

.barTwo {
  position: absolute;
  bottom: 0;
  right: 20%;
  width: 80px;
  height: 53%;
  background: #0eaeae;
}

.barThree {
  position: absolute;
  bottom: 0;
  right: 40%;
  width: 80px;
  height: 31%;
  background: #1474ac;
}

.barFour {
  position: absolute;
  bottom: 0;
  right: 60%;
  width: 80px;
  height: 83%;
  background: #583cb0;
}

.barFive {
  position: absolute;
  bottom: 0;
  right: 80%;
  width: 80px;
  height: 49%;
  background: #933cb0;
}

.play-container {
    z-index: 1;
    position: absolute;
    left: -100px;
    bottom: -40px;
    height: 100px;
    width: 100px;
    background: #397e8d;
    border-radius: 100px;
    box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
}

.play-container:active {
    background: #2b5f6a;
}
.play-container:hover {
    background: #4a9cae;
    cursor: pointer;
}

.overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: #3d3d3d;
    pointer-events: none;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: #fff;
    font-size: 20px;
}

.playAction {
    font-size: 64px;
    color: #fff;
    margin: 18px;
}

.pauseAction {
    font-size: 64px;
    color: #fff;
    margin: 18px;
}

.hide {
  display: none
}
$('.play-container').on('click', function() {
  $('.bar').toggleClass('barAnimate');
  $('.playAction').toggleClass('hide');
  $('.pauseAction').toggleClass('hide');
});


Getting Started

It is required to know some basic skills in HTML, CSS, and JavaScript.

The first thing we will need to do is create two HTML elements. These elements will be div elements. We will add a CSS class name to the first one called “super-container” this will wrap most of the HTML code.

<div class="super-container"></div>

The second div will be a direct child of the “super-container” parent. This will contain the visualizer bars and the controls, to control the demo. The control will be a play and pause button. The name of this child div element will be called “container” using a CSS class as the name.

<div class="container"></div>

Next inside of the “container” div element we will add another 6 child div elements. These elements will be direct children of the div element with the container as its class name.

Last we will add another div element outside of the “parent-container” element. It will have a CSS class name of “overlay”. It will look something like this.

<div class="overlay"></div>

Down below we include all the code outlining the HTML structure of this project. You see in the example there are more classes, elements, and text added to the structure. Follow the code below to finish your HTML model.

<div class="super-container">
  <div class="container">
    <div class="bar barOne"></div>
    <div class="bar barTwo"></div>
    <div class="bar barThree"></div>
    <div class="bar barFour"></div>
    <div class="bar barFive"></div>
    <div class="play-container">
      <span class="material-icons playAction">play_arrow</span>
      <span class="material-icons pauseAction hide">pause</span>
    </div>
  </div>
</div>
<div class="overlay">Music Vizualizer</div>

html, body {
  font-family: sans-serif;
}

.super-container {
  position: absolute;
  background: #f6f6f6;
  top: 0;
  left: 0;
  right: 0;
  bottom: 60px;
}

.container {
  max-width: 500px;
  position: relative;
  height: 100%;
  margin: 0 auto;
  transition: 500ms 50ms cubic-bezier(0.4, 0, 0.6, 1);
}

.bar {
  box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
  transition: 200ms 50ms cubic-bezier(0.4, 0, 0.6, 1);
}

.barAnimate {
  animation: equalize 5s 0s infinite;
}

@keyframes equalize {
  0% {
    height: 60%;
  }
  4% {
    height: 50%;
  }
  8% {
    height: 40%;
  }
  12% {
    height: 30%;
  }
  16% {
    height: 20%;
  }
  20% {
    height: 30%;
  }
  24% {
    height: 40%;
  }
  28% {
    height: 10%;
  }
  32% {
    height: 40%;
  }
  36% {
    height: 60%;
  }
  40% {
    height: 20%;
  }
  44% {
    height: 40%;
  }
  48% {
    height: 70%;
  }
  52% {
    height: 30%;
  }
  56% {
    height: 10%;
  }
  60% {
    height: 30%;
  }
  64% {
    height: 50%;
  }
  68% {
    height: 60%;
  }
  72% {
    height: 30%;
  }
  76% {
    height: 80%;
  }
  80% {
    height: 70%;
  }
  84% {
    height: 40%;
  }
  88% {
    height: 50%;
  }
  92% {
    height: 80%;
  }
  96% {
    height: 70%;
  }
  100% {
    height: 60%;
  }
}

.bar:nth-child(1) { 
  animation-delay: -1.2s;
}

.bar:nth-child(2) { 
  animation-delay: -1.9s;
}

.bar:nth-child(3) { 
  animation-delay: -2.2s;
}

.bar:nth-child(4) { 
  animation-delay: -2.6s;
}

.barOne {
  position: absolute;
  bottom: 0;
  right: 0%;
  width: 80px;
  height: 20%;
  background: #33b24f;
}

.barTwo {
  position: absolute;
  bottom: 0;
  right: 20%;
  width: 80px;
  height: 53%;
  background: #0eaeae;
}

.barThree {
  position: absolute;
  bottom: 0;
  right: 40%;
  width: 80px;
  height: 31%;
  background: #1474ac;
}

.barFour {
  position: absolute;
  bottom: 0;
  right: 60%;
  width: 80px;
  height: 83%;
  background: #583cb0;
}

.barFive {
  position: absolute;
  bottom: 0;
  right: 80%;
  width: 80px;
  height: 49%;
  background: #933cb0;
}

.play-container {
    z-index: 1;
    position: absolute;
    left: -100px;
    bottom: -40px;
    height: 100px;
    width: 100px;
    background: #397e8d;
    border-radius: 100px;
    box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
}

.play-container:active {
    background: #2b5f6a;
}
.play-container:hover {
    background: #4a9cae;
    cursor: pointer;
}

.overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: #3d3d3d;
    pointer-events: none;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: #fff;
    font-size: 20px;
}

.playAction {
    font-size: 64px;
    color: #fff;
    margin: 18px;
}

.pauseAction {
    font-size: 64px;
    color: #fff;
    margin: 18px;
}

.hide {
  display: none
}
$('.play-container').on('click', function() {
  $('.bar').toggleClass('barAnimate');
  $('.playAction').toggleClass('hide');
  $('.pauseAction').toggleClass('hide');
});


Adding CSS

Next, we need to add some CSS styles to this HTML music visualizer.

The CSS will add styles to each of the five music visual bars in the HTML model. We will also provide styling to play pause/button.

For the CSS animation to work, we must include CSS keyframes. These keyframes control the height of each of the five bars as the animation runs its loop.

To get the smooth transition on the bars we must add a CSS transition easement property to each of the bars. We can do this easily by adding the property to the “.bar class”. In this example, the easement property will look something like this.

transition: 200ms 50ms cubic-bezier(0.4, 0, 0.6, 1);

As you may notice each bar starts at a different time. To get the delayed effects for each of the bars. We must set an animation-delay for each bar. We can use the “nth-child” CSS selector and the .bar class name to speed up setting delays. An example of the .bar:nth-child selector is provided below.

.bar:nth-child(1) { 
  animation-delay: -1.2s;
}

Down below you can find all the code for the HTML music visualizer model.

<div class="super-container">
  <div class="container">
    <div class="bar barOne"></div>
    <div class="bar barTwo"></div>
    <div class="bar barThree"></div>
    <div class="bar barFour"></div>
    <div class="bar barFive"></div>
    <div class="play-container">
      <span class="material-icons playAction">play_arrow</span>
      <span class="material-icons pauseAction hide">pause</span>
    </div>
  </div>
</div>
<div class="overlay">Music Vizualizer</div>

html, body {
  font-family: sans-serif;
}

.super-container {
  position: absolute;
  background: #f6f6f6;
  top: 0;
  left: 0;
  right: 0;
  bottom: 60px;
}

.container {
  max-width: 500px;
  position: relative;
  height: 100%;
  margin: 0 auto;
  transition: 500ms 50ms cubic-bezier(0.4, 0, 0.6, 1);
}

.bar {
  box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
  transition: 200ms 50ms cubic-bezier(0.4, 0, 0.6, 1);
}

.barAnimate {
  animation: equalize 5s 0s infinite;
}

@keyframes equalize {
  0% {
    height: 60%;
  }
  4% {
    height: 50%;
  }
  8% {
    height: 40%;
  }
  12% {
    height: 30%;
  }
  16% {
    height: 20%;
  }
  20% {
    height: 30%;
  }
  24% {
    height: 40%;
  }
  28% {
    height: 10%;
  }
  32% {
    height: 40%;
  }
  36% {
    height: 60%;
  }
  40% {
    height: 20%;
  }
  44% {
    height: 40%;
  }
  48% {
    height: 70%;
  }
  52% {
    height: 30%;
  }
  56% {
    height: 10%;
  }
  60% {
    height: 30%;
  }
  64% {
    height: 50%;
  }
  68% {
    height: 60%;
  }
  72% {
    height: 30%;
  }
  76% {
    height: 80%;
  }
  80% {
    height: 70%;
  }
  84% {
    height: 40%;
  }
  88% {
    height: 50%;
  }
  92% {
    height: 80%;
  }
  96% {
    height: 70%;
  }
  100% {
    height: 60%;
  }
}

.bar:nth-child(1) { 
  animation-delay: -1.2s;
}

.bar:nth-child(2) { 
  animation-delay: -1.9s;
}

.bar:nth-child(3) { 
  animation-delay: -2.2s;
}

.bar:nth-child(4) { 
  animation-delay: -2.6s;
}

.barOne {
  position: absolute;
  bottom: 0;
  right: 0%;
  width: 80px;
  height: 20%;
  background: #33b24f;
}

.barTwo {
  position: absolute;
  bottom: 0;
  right: 20%;
  width: 80px;
  height: 53%;
  background: #0eaeae;
}

.barThree {
  position: absolute;
  bottom: 0;
  right: 40%;
  width: 80px;
  height: 31%;
  background: #1474ac;
}

.barFour {
  position: absolute;
  bottom: 0;
  right: 60%;
  width: 80px;
  height: 83%;
  background: #583cb0;
}

.barFive {
  position: absolute;
  bottom: 0;
  right: 80%;
  width: 80px;
  height: 49%;
  background: #933cb0;
}

.play-container {
    z-index: 1;
    position: absolute;
    left: -100px;
    bottom: -40px;
    height: 100px;
    width: 100px;
    background: #397e8d;
    border-radius: 100px;
    box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
}

.play-container:active {
    background: #2b5f6a;
}
.play-container:hover {
    background: #4a9cae;
    cursor: pointer;
}

.overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: #3d3d3d;
    pointer-events: none;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: #fff;
    font-size: 20px;
}

.playAction {
    font-size: 64px;
    color: #fff;
    margin: 18px;
}

.pauseAction {
    font-size: 64px;
    color: #fff;
    margin: 18px;
}

.hide {
  display: none
}
$('.play-container').on('click', function() {
  $('.bar').toggleClass('barAnimate');
  $('.playAction').toggleClass('hide');
  $('.pauseAction').toggleClass('hide');
});


Giving the Play Button Power

For the play/pause button to trigger the animation, we will have to use some jQuery code to accomplish this. When a user clicks on the play button, a class will be added to the .bar elements called “.barAnimate” The jQuery code will also hide the play button and change it to a pause button.

<div class="super-container">
  <div class="container">
    <div class="bar barOne"></div>
    <div class="bar barTwo"></div>
    <div class="bar barThree"></div>
    <div class="bar barFour"></div>
    <div class="bar barFive"></div>
    <div class="play-container">
      <span class="material-icons playAction">play_arrow</span>
      <span class="material-icons pauseAction hide">pause</span>
    </div>
  </div>
</div>
<div class="overlay">Music Vizualizer</div>

html, body {
  font-family: sans-serif;
}

.super-container {
  position: absolute;
  background: #f6f6f6;
  top: 0;
  left: 0;
  right: 0;
  bottom: 60px;
}

.container {
  max-width: 500px;
  position: relative;
  height: 100%;
  margin: 0 auto;
  transition: 500ms 50ms cubic-bezier(0.4, 0, 0.6, 1);
}

.bar {
  box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
  transition: 200ms 50ms cubic-bezier(0.4, 0, 0.6, 1);
}

.barAnimate {
  animation: equalize 5s 0s infinite;
}

@keyframes equalize {
  0% {
    height: 60%;
  }
  4% {
    height: 50%;
  }
  8% {
    height: 40%;
  }
  12% {
    height: 30%;
  }
  16% {
    height: 20%;
  }
  20% {
    height: 30%;
  }
  24% {
    height: 40%;
  }
  28% {
    height: 10%;
  }
  32% {
    height: 40%;
  }
  36% {
    height: 60%;
  }
  40% {
    height: 20%;
  }
  44% {
    height: 40%;
  }
  48% {
    height: 70%;
  }
  52% {
    height: 30%;
  }
  56% {
    height: 10%;
  }
  60% {
    height: 30%;
  }
  64% {
    height: 50%;
  }
  68% {
    height: 60%;
  }
  72% {
    height: 30%;
  }
  76% {
    height: 80%;
  }
  80% {
    height: 70%;
  }
  84% {
    height: 40%;
  }
  88% {
    height: 50%;
  }
  92% {
    height: 80%;
  }
  96% {
    height: 70%;
  }
  100% {
    height: 60%;
  }
}

.bar:nth-child(1) { 
  animation-delay: -1.2s;
}

.bar:nth-child(2) { 
  animation-delay: -1.9s;
}

.bar:nth-child(3) { 
  animation-delay: -2.2s;
}

.bar:nth-child(4) { 
  animation-delay: -2.6s;
}

.barOne {
  position: absolute;
  bottom: 0;
  right: 0%;
  width: 80px;
  height: 20%;
  background: #33b24f;
}

.barTwo {
  position: absolute;
  bottom: 0;
  right: 20%;
  width: 80px;
  height: 53%;
  background: #0eaeae;
}

.barThree {
  position: absolute;
  bottom: 0;
  right: 40%;
  width: 80px;
  height: 31%;
  background: #1474ac;
}

.barFour {
  position: absolute;
  bottom: 0;
  right: 60%;
  width: 80px;
  height: 83%;
  background: #583cb0;
}

.barFive {
  position: absolute;
  bottom: 0;
  right: 80%;
  width: 80px;
  height: 49%;
  background: #933cb0;
}

.play-container {
    z-index: 1;
    position: absolute;
    left: -100px;
    bottom: -40px;
    height: 100px;
    width: 100px;
    background: #397e8d;
    border-radius: 100px;
    box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
}

.play-container:active {
    background: #2b5f6a;
}
.play-container:hover {
    background: #4a9cae;
    cursor: pointer;
}

.overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: #3d3d3d;
    pointer-events: none;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: #fff;
    font-size: 20px;
}

.playAction {
    font-size: 64px;
    color: #fff;
    margin: 18px;
}

.pauseAction {
    font-size: 64px;
    color: #fff;
    margin: 18px;
}

.hide {
  display: none
}
$('.play-container').on('click', function() {
  $('.bar').toggleClass('barAnimate');
  $('.playAction').toggleClass('hide');
  $('.pauseAction').toggleClass('hide');
});


HTML Music Visualizer Demo and Code

You can find the full example and live demo on codepen.io and GitHub

Looking for More Tutorials?

Visit the home page to find more!