Audio Visualizer with Html5 Audio Element

Category: Javascript | July 23, 2015
Author: wayou
Views Total: 10,444
Official Page: Go to website
Last Update: July 23, 2015
License: MIT


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:

4 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?


Leave a Reply