Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: 25 days 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 (7 months ago)
- Last Synced: 2024-11-06T15:59:41.929Z (about 1 month ago)
- Topics: audio-reactive, canvas, circular, javascript, music, music-visualisation, waveform
- Language: JavaScript
- Homepage:
- Size: 10.3 MB
- Stars: 254
- Watchers: 8
- Forks: 39
- 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.