howler.js + react-aptor + ❤ = raptor-howler️

Minimal React wrapper for howler.js using react-aptor

Why to use raptor-howler

• read #why section of react-aptor

Usage

npm install --save raptor-howler
or with yard
yarn add raptor-howler

import RaptorHowler from 'raptor-howler'

const App = () => (
  <RaptorHowler
    src="https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3"
    playing={true}
  />
);

You can find a complete example for basic functionality of raptor-howler using create-react-app, here

Props

props are passed directly to new Howl with default value

for more info about props types see howler.js core section

new Howl({
  src: props.src,
  xhr: props.xhr || {},
  format: props.format || [],
  mute: props.mute || false,
  loop: props.loop || false,
  preload: props.preload || false,
  rate: props.rate || 1.0,
  volume: props.volume || 1.0,
  onend: props.onEnd,
  onplay: props.onPlay,
  onpause: props.onPause,
  onvolume: props.onVolume,
  onstop: props.onStop,
  onrate: props.onRate,
  onload: props.onLoad,
  onloaderror: props.onLoadError,
  html5: props.html5 || false
})

How to use Other howler.js methods

just pass a ref to <RaptorHowler /> and you can access the latest howler instance using ref.current._howler field.

function App() {
  const apiRef = useRef(null);

  return (
    <div className="app">
      <RaptorHowler
        src="https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3"
        ref={apiRef}
      />
              
      <button
        onClick={() => {
          const { current: api } = apiRef;
          if (!api) return;
          console.log(api._howler.duration());
        }}>
        log audio duration
      </button>
    </div>
  );
}

Take a look at api.ts for all pre-defined api which make your work easier

<button
  onClick={() => {
    if (!apiRef.current) return;
    const playing = apiRef.current._playing();
    if (!playing) apiRef.current.play();
    else apiRef.current.pause();
  }}>
  Toggle playing state from (prop API)
</button>

Donation

💻 Developer/Maintainer (BTC): bc1qq8qq63ex7svkkjdjn5axu8angfxytvs83nlujk

copyright

• The logo has been grabbed from flat-icon sound bars plus pack
• Code and documentation has been highly inspired by react-howler
• The audio file for examples are provided by file-example website

License MIT