An opinionated React wrapper for howler.js
Rehowl has react and howler as peer dependencies so that you can manage your own versions.
npm install howler rehowlyarn add howler rehowlDocumentation and live examples are available at https://tedmor.in/rehowl
The source of these examples is ./stories
It's recommended to view the examples.
However, at its core Rehowl works by using useHowl or <Howl /> to get a howl instance, then playing sounds off that instance with one or more <Play /> components:
import { useHowl, Play } from 'rehowl'
import bark from './assets/bark.mp3'
const Autoplay = () => {
const { howl, state } = useHowl({ src: bark })
return <Play howl={howl} />
}See the docs for examples on how to play multiple sounds off of one howl, how to use audio sprites, and how to control volume, seek, etc.
When deciding to use Howler in a React project, a quick Google Search brings you to react-howler.
There are a few issues that make ReactHowler unsuitable for my needs:
- No support for playing multiple sounds on one Howl instance
- No support for audio sprites
- If you want to do more than the very basic API, you must break out the howler instance using refs
- Use of componentWillReceiveProps
Overall, it feels much more like a barebones wrapper for Howler that doesn't really give you any help when trying to integrate it into your components.
My main goals in this project are to make a library that feels like Howler, if Howler were built for React.