Circular Audio Visualizer In Vanilla JavaScript – Circular Audio Wave

Category: Javascript | July 15, 2018
Author: kelvinau
Views Total: 160
Official Page: Go to website
Last Update: July 15, 2018
License: MIT

Preview:

Circular Audio Visualizer In Vanilla JavaScript – Circular Audio Wave

Description:

A modern, circular audio visualizer written in pure JavaScript that provides frequency and Beats Per Minute based visualization for any audio within the document.

Heavily based on the echarts JavaScript library.

How to use it:

Insert the minified version of the Circular Audio Wave library into the html file.

<script src="circular-audio-wave.min.js"></script>

Create a container to place the circular audio visualizer.

<div id="example"></div>

Load an audio of your choice into the document.

let wave = new CircularAudioWave(document.getElementById('example'));
wave.loadAudio('audio.mp3');

Play the sound and activate the circular audio visualizer.

wave.play()

If you want to use the ‘sunburst’ effect.

let wave = new CircularAudioWave(document.getElementById('example'), {
    mode: 'sunburst'
});

Enable/disable the infinite loop feature.

let wave = new CircularAudioWave(document.getElementById('example'), {
    loop: true // default: false
});

Changelog:

07/15/2018

  • Fix typo and format code

07/12/2018

  • use only necessary charts from ECharts to reduce dist file size

Leave a Reply