Audio Visualizer with Html5 Audio Element

Preview:

Description:

A simple audio spectrum visualizer built with HTML5 Audio API and Canvas API.

How to use it:

Embed an audio into your html page using HTML5 Audio element.

<audio src="assets/sample.mp3" id="audio" controls>HTML5 Audio element not supported</audio>

Create an Html5 canvas element for the audio visualizer.

<canvas id="canvas" width="800" height="350"></canvas>

Load the core JavaScript library at the bottom of your html page.

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

Style the audio spectrum visualizer.

.bar-wrapper {
  height: 300px;
  position: relative;
}
.bar {
  position: relative;
  bottom: 0;
  width: 5px;
  display: inline-block;
  border: 1px solid red;
  height: 5px;
  border-bottom: 3px solid #fff;
}