Skip to content

JS library for audio visualization in circular wave using Web Audio API and ECharts

License

Notifications You must be signed in to change notification settings

kelvinau/circular-audio-wave

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

39 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Circular Audio Wave

Circular WaveSunburst

Live Demo
Circular Wave: https://kelvinau.github.io/circular-audio-wave/demo/circular-wave.html
Sunburst: https://kelvinau.github.io/circular-audio-wave/demo/sunburst.html

Introduction

CircularAudioWave is a JS library for audio visualization in circular audio wave, based on frequencies and BPM (Beats Per Minute). It uses ECharts for the rendering, which is combined into dist/circular-audio-wave.min.js.

*This library works only on browsers that supports Web Audio API.

Installation

1. NPM

npm install circular-audio-wave

and import circular-audio-wave.min.js from dist

2. Download circular-audio-wave.min.js directly from github

Usage

Class CircularAudioWave(elem, opts={}) where elem is an DOM element object and opts provides configuration.
Configuration consists of:

  • mode: 'sunburst' for sunburst chart (default: false)
  • loop: loop rendering the chart (default: false)

Methods

  • loadAudio: provides the path of the audio file
  • play: plays audio and render chart

Examples

See circular-wave.html and sunburst.html in demo.

Acknowledgement

Sample demo tracks are obtained from:

Tempo detection is based on José M. Pérez's research. See here for more details.

About

JS library for audio visualization in circular wave using Web Audio API and ECharts

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published