https://github.com/kelvinau/circular-audio-wave

JS library for audio visualization in circular wave using Web Audio API and ECharts
https://github.com/kelvinau/circular-audio-wave

audio-reactive canvas circular javascript music music-visualisation waveform

Last synced: 3 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/kelvinau/circular-audio-wave
• Owner: kelvinau
• License: mit
• Created: 2018-01-04T16:13:09.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2024-05-18T11:34:02.000Z (6 months ago)
• Last Synced: 2024-07-23T23:53:36.744Z (4 months ago)
• Topics: audio-reactive, canvas, circular, javascript, music, music-visualisation, waveform
• Language: JavaScript
• Homepage:
• Size: 10.3 MB
• Stars: 245
• Watchers: 8
• Forks: 38
• Open Issues: 16
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-javascript-audio - kelvinau/circular-audio-wave - circular audio waves powered by E-charts (UI components and libraries / Audio visualization)
• awesome-webaudio - Circular Audio Wave - A JS library for audio visualization in circular wave using Web Audio API and ECharts. (Packages / Libraries)

README

        
# Circular Audio Wave



**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](https://github.com/apache/incubator-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](https://raw.githubusercontent.com/kelvinau/circular-audio-wave/master/dist/circular-audio-wave.min.js)

## 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:

- Nokia Scratch - https://www.zedge.net/ringtone/819255/

- IPL Stadium - https://www.zedge.net/ringtone/1039527/

- Break Drum - https://www.looperman.com/loops/detail/96932/break-drum-by-blueeskies-free-175bpm-drum-and-bass-drum-loop

Tempo detection is based on [José M. Pérez](https://jmperezperez.com/)'s research. See [here](https://jmperezperez.com/bpm-detection-javascript/) for more details.