react-howler

react-howler

A React.js wrapper for howler.js (audio player).

ReactHowler has no UI. You has 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.

Currently, I'm tracking branch 2.0 beta because

the core is fairly stable and is already under heavy production use.

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 () {
    <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 src of songs for playing. Can be a string or an array
playing	true	Set to true or false to pause or play the media. This also invoke autoplay on initial load
loop	false	Set to true or false to enable/disable loop
mute	false	Set to true or false to mute/unmute current audio
onPlay	noop	Called when audio starts or resumes playing
onPause	noop	Called when audio is paused
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

• seek(pos? : Number) Set/get current position of player
• duration: Get duration of current audio file

I only wrapper methods that I need. If you need to use undocumented methods, you can access howler instance directly via howler method

import React, { Component } from 'react'
import ReactHowler from 'react-howler'

class App extends Component {
  getHower () {
    this.audio.howler
  }

  getDuration () {
    this.audio.duration()
  }

  getSeek () {
    this.audio.seek()
  }

  setSeek () {
    this.audio.seek(0.5)
  }
  // This sound file may not work due to cross-origin setting
  render () {
    <ReactHowler
      src='http://goldfirestudios.com/proj/howlerjs/sound.ogg'
      playing={true}
      ref={(ref) => this.audio = ref}
    />
  }
}

Howler global core method

Howler global methods is 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 file in examples

I take it from howler.js demo page

Sound file direct link: sound.ogg

License

MIT

Changelog

2.0.0 - 2016-02-06

• Changed: Don't export Howler global instance, consume it directly from window object due to complication in ES6/CommonJS module
• Changed: Use babel stage 2 instead of stage 0
• Changed: Remove unneeded devDependencies
• Changed: Consolidate example build config