https://github.com/enjikaka/audio-visualiser
Web Component audio visualiser ready for retina displays.
https://github.com/enjikaka/audio-visualiser
audio fft music web-audio-api web-components
Last synced: 10 months ago
JSON representation
Web Component audio visualiser ready for retina displays.
- Host: GitHub
- URL: https://github.com/enjikaka/audio-visualiser
- Owner: enjikaka
- License: unlicense
- Created: 2018-06-09T07:49:53.000Z (about 8 years ago)
- Default Branch: main
- Last Pushed: 2025-03-19T10:31:05.000Z (about 1 year ago)
- Last Synced: 2025-08-09T01:48:29.603Z (10 months ago)
- Topics: audio, fft, music, web-audio-api, web-components
- Language: TypeScript
- Homepage: https://enjikaka.github.io/audio-visualiser/
- Size: 17.2 MB
- Stars: 5
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ``
FFT Audio Analyser visuals ready for retina displays.
Note: Uses ResizeObserver. Polyfill it on your end.
## API
### Inputs
| Method | Description | Related media event |
| --- | --- | --- |
| `set analyser` | Set analyser to read data from. | |
| `start()` | Start the visuals drawing loop. | [`play`](https://developer.mozilla.org/en-US/docs/Web/Events/play) |
| `stop()` | Stop the visuals drawing loop. | [`pause`](https://developer.mozilla.org/en-US/docs/Web/Events/pause) / [`ended`](https://developer.mozilla.org/en-US/docs/Web/Events/ended) |
| Attribute | Description |
| --- | --- |
| `color` | Sets the color of the visual. |
## Usage
Install audio-visualiser via npm or import it in your ES module supported browser with `import 'https://cdn.skypack.dev/audio-visualiser';`
Create an AnalyserNode and connect it to by calling the setter `analyser` on the instance of the custom element. `document.querySelector('audio-visualiser').analyser = yourAnalyserNode;`. For a little live demo of this you can check out https://enjikaka.github.io/audio-visualiser/. Open dev tools or view-source to see how the tag is set up to the analyser via createMediaElementSource.
```html
```
```js
import 'https://cdn.skypack.dev/audio-visualiser';
const audio = document.getElementById('audio');
const visuals = document.getElementById('visuals');
audio.currentTime = 41;
const audioContext = new AudioContext();
const source = audioContext.createMediaElementSource(audio);
const analyser = audioContext.createAnalyser();
analyser.fftSize = 1024;
source.connect(analyser);
analyser.connect(audioContext.destination);
visuals.analyser = analyser;
audio.addEventListener('play', () => {
audioContext.resume();
console.log('playing');
visuals.start();
});
audio.addEventListener('pause', () => {
console.log('paused');
visuals.stop();
});
```