Minimal Audio Visualizer With Canvas and Vanilla JavaScript

Category: Javascript | December 24, 2015
Author: DavidLazic
Views Total: 7,494
Official Page: Go to website
Last Update: December 24, 2015
License: MIT

Preview:

Minimal Audio Visualizer With Canvas and Vanilla JavaScript

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; }
}

 

You Might Be Interested In:


3 thoughts on “Minimal Audio Visualizer With Canvas and Vanilla JavaScript

  1. Moso

    The demo doesnt seem to work on chrome? is there a workaround or somewhere in the code to make it acceptable for the browser?

    Reply
  2. hyskon

    All it does is it says Loading… So it seems to get stuck in the XMLHttpRequest. I would love to see this working 🙂

    Reply

Leave a Reply