DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/react-howler package

    5.2.0 • Public • Published


    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, ...

    Travis status Greenkeeper badge

    LICENSE MIT js-standard-style npm dependencies


    howler.js is an audio library for the modern web. It defaults to Web Audio API and falls back to HTML5 Audio.


    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 (

    For a full working example please see it in App.js

    Demo or

    git clone
    npm install
    npm run example:react
    open http://localhost:3000


    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
    rate 1 The initial playback rate (speed)
    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).
    xhr {} When using Web Audio, howler.js uses an XHR request to load the audio files. If you need to send custom headers, set the HTTP method or enable withCredentials (see reference), include them with this parameter. Each is optional (method defaults to GET, headers default to null and withCredentials defaults to false). For example:
    <ReactHowler src="sound.webm" xhr={{ method: 'POST', headers: { Authorization: 'Bearer:' + token, }, withCredentials: true, }} />
    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
    onSeek noop Called when the sound has been seeked. The first parameter is the ID of the sound. onSeek(id)
    onPlayError noop Called when the sound is unable to play. The first parameter is the ID of the sound and the second is the error message/code. onPlayError(id, errorCode)



    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.


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


    Get/set the position of playback for a sound.

    • seek: Number optional The position to move current playback to (in seconds).


    Check the load status of the Howl, returns a string unloaded, loading or loaded.

    This is an alias for Howler's state() function


    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 () {
      getDuration () {
      getSeek () {
      setSeek () {
      // This sound file may not work due to cross-origin setting
      render () {
            ref={(ref) => (this.player = ref)}

    Howler global core methods

    Howler global methods are avaiable in window scope. Please refer to howler's documentation


    window.Howler.mute(true) // Mute all sounds


    This project uses standard code style.


    npm run lint

    Audio files in examples


    Taken from howler.js demo page Sound file direct link: sound.ogg


    Fingerstyle Bass line over an Am chord progression By Serolillo (Own work) [CC BY 2.5 (], via Wikimedia Commons




    npm i react-howler

    DownloadsWeekly Downloads






    Unpacked Size

    25.6 kB

    Total Files


    Last publish


    • stenerson
    • thangngoc89