Rehawk

Work with audio in React it's painful sometimes, that's why this library was created. Especially in React, there are not too many good libraries out there to work with audio.

Rehawk is a powerful and lightweight library that aims to make things easier for you to start to work with audio. Using the Audio API, a custom React Hook powered by an XState finite state machine, it brings a lot of functionalities and methods for you to start faster your development, without having to waste time implementing anything.

Feel free to submit a PR.

Install

yarn add rehawk

Usage

All you need to do is import the RehawkProvider context and the useRehawk hook. Context was the best choice here because sometimes we might want to use different properties of our custom hook in different components in our React tree.

The following is a very basic usage example of Rehawk. If you want the most complete example of Rehawk working, click here.

import React from 'react';
import { RehawkProvider, useRehawk } from 'rehawk';

const src =
  'https://storage.googleapis.com/media-session/elephants-dream/the-wires.mp3';

const Player = () => {
  const {
    ready,
    loading,
    error,
    playing,
    paused,
    stopped,
    onPlay,
    onPause,
  } = useRehawk({
    src,
    autoplay: false,
  });

  return (
    <div>
      <p>Ready: {ready ? 'true' : 'false'}</p>
      <p>Loading: {loading ? 'true' : 'false'}</p>
      <p>Error: {error}</p>
      <p>Playing: {playing ? 'true' : 'false'}</p>
      <p>Paused: {paused ? 'true' : 'false'}</p>
      <p>Stopped: {stopped ? 'true' : 'false'}</p>

      <button onClick={onPlay}>Play</button>
      <button onClick={onPause}>Pause</button>
    </div>
  );
};

const App = () => {
  return (
    <RehawkProvider>
      <Player />
    </RehawkProvider>
  );
};

API

Props

Returned values

Returned methods

Example

To run the example do the following steps:

1. git clone the repository
2. cd rehawk/example
3. yarn install
4. yarn start

Contributing

Your contributions are welcome! If you have any questions or want to start to contribute to this library in any form, please open an issue. Feel free to open PR.

If there are any questions about this library or about any other topic, please contact me on Twitter @leonardomso and I'll gladly answer it.