react-howler-ff
v3.7.6
Published
A React.js wrapper for howler.js (audio player)
Downloads
4
Maintainers
Readme
react-howler
A React.js wrapper for howler.js (audio player).
ReactHowler has no UI, you have to provide your own UI.
Props can be passed to control playback and react to events such as end, load, play, ...
howler.js
howler.js is an audio library for the modern web. It defaults to Web Audio API and falls back to HTML5 Audio.
Usage
npm install --save react-howler
import React, { Component } from 'react'
import ReactHowler from 'react-howler'
class App extends Component {
// This sound file may not work due to cross-origin setting
render () {
return (
<ReactHowler
src='http://goldfirestudios.com/proj/howlerjs/sound.ogg'
playing={true}
/>
)
}
}
For a full working example please see it in App.js
Demo
http://khoanguyen.me/react-howler/ or
git clone http://github.com/thangngoc89/react-howler
npm install
npm run example:react
open http://localhost:3000
Props
Prop | Default | Description
---- | ------- | -----------
src | | The sources to the track(s) to be loaded for the sound (URLs or base64 data URIs). These should be in order of preference, howler.js will automatically load the first one that is compatible with the current browser. If your files have no extensions, you will need to explicitly specify the extension using the format
property. Updating the src
prop on the fly will destroy any currently playing howler instance and create a new one with the new src
. Updating other props while keeping the src
the same will maintain the current howler instance.
preload | true | Set to true
to begin downloading the audio file if it is not loaded yet.
playing | true | Set to true
or false
to pause or play the media.Setting to true
on initial load will play the audio immediately after it is loaded
loop | false | Set to true
or false
to enable/disable loop
mute | false | Set to true
or false
to mute/unmute current audio
volume | 1.0 | The volume of the specific howl, from 0.0
to 1.0
html5 | false | Set to true
to force HTML5 Audio. This should be used for large audio files so that you don't have to wait for the full file to be downloaded and decoded before playing.
format | [] | howler.js automatically detects your file format from the extension, but you may also specify a format in situations where extraction won't work (such as with a SoundCloud stream).
onPlay | noop | Called when audio starts or resumes playing
onPause | noop | Called when audio is paused
onVolume | noop | Called when volume is changed
onStop | noop | Called when audio is stopped
onLoad | noop | Called when audio is loaded (buffered)
onLoadError | noop | Called when an error occurs whilst attempting to load media
onEnd | noop | Called when media finishes playing
Methods
duration([id])
Get the duration of the audio source. Will return 0 until after the load
event fires.
- id:
Number
optional
The sound ID to check. Passing an ID will return the duration of the sprite being played on this instance; otherwise, the full source duration is returned.
load()
When preload
is true
this is automatically called. When setting preload
to false
, you can call load()
manually before playing sounds (useful for lazy loading large files on slow networks). If you attempt to play a sound that's not loading or loaded with preload react-howler will automatically call load()
.
Tip: If you're calling load()
manually, check the load status with howlerState()
seek([seek])
Get/set the position of playback for a sound.
- seek:
Number
optional
The position to move current playback to (in seconds).
howlerState()
Check the load status of the Howl
, returns a string unloaded
, loading
or loaded
.
This is an alias for Howler's state()
function
stop([id])
Stops playback of sound, resetting seek
to 0
.
- id:
Number
optional
The sound ID. If none is passed, all sounds in group are stopped.
Other howler.js methods
If you need to use other howler.js methods
that are not included in this wrapper you can access the howler instance directly via howler
import React, { Component } from 'react'
import ReactHowler from 'react-howler'
class App extends Component {
getHower () {
this.player.howler
}
getDuration () {
this.player.duration()
}
getSeek () {
this.player.seek()
}
setSeek () {
this.player.seek(0.5)
}
// This sound file may not work due to cross-origin setting
render () {
return(
<ReactHowler
src='http://goldfirestudios.com/proj/howlerjs/sound.ogg'
playing={true}
ref={(ref) => (this.player = ref)}
/>
);
}
}
Howler global core methods
Howler global methods are avaiable in window scope. Please refer to howler's documentation
Usage:
window.Howler.mute(true) // Mute all sounds
Linting
This project uses standard code style.
npm run lint
Audio files in examples
sound.ogg
Taken from howler.js demo page Sound file direct link: sound.ogg
sound2.ogg
Fingerstyle Bass line over an Am chord progression By Serolillo (Own work) [CC BY 2.5 (http://creativecommons.org/licenses/by/2.5)], via Wikimedia Commons
License
MIT