https://github.com/panathea/rehowl
An opinionated React wrapper for howler.js
https://github.com/panathea/rehowl
Last synced: about 1 month ago
JSON representation
An opinionated React wrapper for howler.js
- Host: GitHub
- URL: https://github.com/panathea/rehowl
- Owner: panathea
- Created: 2019-11-08T21:38:10.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2024-05-02T14:55:42.000Z (about 1 year ago)
- Last Synced: 2025-04-03T00:16:14.890Z (about 2 months ago)
- Language: TypeScript
- Homepage: https://tedmor.in/rehowl
- Size: 28.4 MB
- Stars: 30
- Watchers: 2
- Forks: 1
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Rehowl
An opinionated React wrapper for [howler.js](https://howlerjs.com/)
- [Rehowl](#rehowl)
- [Installation](#installation)
- [Documentation and Live Examples](#documentation-and-live-examples)
- [Quick start](#quick-start)
- [Rationale](#rationale)
## Installation
Rehowl has react and howler as peer dependencies so that you can manage your own versions.
```sh
npm install howler rehowl
```
```sh
yarn add howler rehowl
```
## Documentation and Live Examples
Documentation and live examples are available at
The source of these examples is [./stories](./stories)
## Quick start
It's recommended to view [the examples](https://tedmor.in/rehowl).
However, at its core Rehowl works by using `useHowl` or `` to get a **howl instance**, then playing sounds off that instance with one or more `` components:
```js
import { useHowl, Play } from 'rehowl'
import bark from './assets/bark.mp3'
const Autoplay = () => {
const { howl, state } = useHowl({ src: bark })
return
}
```
See [the docs](https://tedmor.in/rehowl) for examples on how to play multiple sounds off of one howl, how to use audio sprites, and how to control volume, seek, etc.
## Rationale
When deciding to use Howler in a React project, a quick Google Search brings you to [react-howler](https://khoanguyen.me/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.