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

<ReactHowler src="sound.webm" xhr={{ method: 'POST', headers: { Authorization: 'Bearer:' + token, }, withCredentials: true, }} />

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.

rate([value], [id])

Speeds up/down an audio playback. Calling with no arguments will reset all howls to default rate.

• value: Number optional The playback rate. If empty, will default to 1.
• id: Number optional The sound ID. If empty, all sounds in group get updated.

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 {
  getHowler () {
    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