Audio Visualizer with Html5 Audio Element

Category: Javascript | July 23, 2015
Views Total:32,360 views
Official Page:Go to website
Last Update:July 23, 2015


Audio Visualizer with Html5 Audio Element


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;

You Might Be Interested In:

6 thoughts on “Audio Visualizer with Html5 Audio Element

  1. Joan Soto (Pollito)

    Is there any way to use with shoutcast instead of mp3 files?

    1. tazmd

      i like to know the same, it seems not to work when you add a stream url

  2. Kimsan Uon

    not work with radio steam url, Can you develop for radio url?

  3. roperjonathan

    Is there a way to adapt this so that the louder sounds are in the middle rather than to the left?

    I also often seem to find that the last few bars on the right are unused. Is there a way I can adjust the analysis of the audio file so that it uses all of the avaliable bars?


Leave a Reply