Circular Audio Visualizer In Vanilla JavaScript – Circular Audio Wave

Preview:

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:

09/13/2020

• v1.0.1

07/15/2018

• Fix typo and format code

07/12/2018

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