Minimal Audio Visualizer With Canvas and Vanilla JavaScript

Preview:

Description:

A vanilla JavaScript plugin that utilizes Web Audio API to play and visualize audio files on an HTML5 canvas element.

Basic usage:

Include the visualizer.js JavaScript library on the webpage.

<script src="visualizer.js"></script>

Embed an audio into your webpage.

<audio id="myAudio" src="1.mp3" data-author="Beethoven" data-title="Allegro"></audio>

Create a canvas element for the audio visualizer.

<div class="vz-wrapper -canvas">
  <canvas id="myCanvas" width="800" height="400"></canvas>
</div>

The whole html structure should be like this:

<div class="vz-wrapper">
  <audio id="myAudio" src="1.mp3" data-author="Beethoven" data-title="Allegro"></audio>
  <div class="vz-wrapper -canvas">
      <canvas id="myCanvas" width="800" height="400"></canvas>
  </div>
</div>

Style the audio visualizer using your own CSS rules.

.vz-wrapper {
  position: relative;
  height: 100vh;
  width: 100%;
  background: -webkit-gradient(radial, center center, 0, center center, 460, from(#396362), to(#000000));
  background: -webkit-radial-gradient(circle, #396362, #000000);
  background: -moz-radial-gradient(circle, #396362, #000000);
  background: -ms-radial-gradient(circle, #396362, #000000);
  box-shadow: inset 0 0 160px 0 #000;
  cursor: pointer;
}
.vz-wrapper.-canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: initial;
  width: initial;
  background: transparent;
  box-shadow: none;
}
@media screen and (min-width: 420px) {
.vz-wrapper { box-shadow: inset 0 0 200px 60px #000; }
}