0.1.6 β’ Published 3 years ago
howler-frequency-data v0.1.6
howler-frequency-data
Get byte frequency data from any amount of Howler.js objects using the Web Audio API.
π Features
- React custom hook to get individual byte frequency data from any amount of Howls you send
- requestAnimationFrame callback support
- All written in TypeScript
π Installation
Install howler-frequency-data via npm:
npm install howler-frequency-data
π Usage/Examples
import { Howl } from 'howler'
import { useHowlerFrequencyData } from 'howler-frequency-data'
const App = () => {
const frequencyData = useHowlerFrequencyData({
howls: [
new Howl({
src: ['audio/audio-sample1.mp3'],
}),
new Howl({
src: ['audio/audio-sample2.mp3'],
}),
],
})
// frequency data for audio-sample1.mp3 (updates real-time once audio is played)
// frequencyData[0] = [0, 0, 0, 0, 0....]
// frequency data for audio-sample2.mp3 (updates real-time once audio is played)
// frequencyData[1] = [0, 0, 0, 0, 0....]
// throw in some logic to write frequencyData to your canvas element
return <canvas />
}
π Demo
A sample project can be found inside the repo under /example
. It's a simple audio visualizer utilizing howler-frequency-data in combination with the canvas API.