leonardomso / roover

Manage audio in React with ease

Motivation

Modern applications are using audio all the time. Audio can turn a boring application into an interesting one, adding emotion to the content. Most of the modern applications that we use daily are using audio for at least in some part.

Work with audio in React applications is painful. There are not too many good libraries to manage audio and most of the time we need to create our solutions. Manage audio in a modern application is important and should be made by using the best tools and libraries.

The idea to create this library was to provide a powerful and lightweight audio library for React apps. A custom React Hook that is easy to integrate with and has a ton of features to help speed up development without having to worry about anything.

Installation

yarn add roover

Usage

All you need to do is import the useRoover hook and use it on your React component.

import React from 'react';
import useRoover from 'roover';

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

const App = () => {
  const {
    initial,
    loading,
    ready,
    playing,
    paused,
    onPlay,
    onPause,
  } = useRoover({
    src,
    autoplay: true,
  });

  return (
    <div>
      <p>Loading: {loading ? 'true' : 'false'}</p>
      <p>Ready: {ready ? 'true' : 'false'}</p>
      <button onClick={onPlay}>Play</button>
      <button onClick={onPause}>Pause</button>
    </div>
  );
};

Example

To run the example do the following steps:

1. git clone the repository
2. cd roover/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.

License

MIT License © 2021 Leonardo Maldonado