Circular Audio Visualizer In Vanilla JavaScript – Circular Audio Wave

Category: Javascript | September 13, 2020
Author:kelvinau
Views Total:6,497 views
Official Page:Go to website
Last Update:September 13, 2020
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:

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

You Might Be Interested In:


2 thoughts on “Circular Audio Visualizer In Vanilla JavaScript – Circular Audio Wave

  1. Uxie

    Hi, I tried implementing this but everytime i upload a song the browser returns “audio is not ready”,
    any suggestions?

    Reply
  2. Alireza HN

    Hello
    Thank you for your great job. But how can I use it for audio streams?
    I mean for audio chats

    Reply

Leave a Reply