leonardomso/roover

🐱 A lightweight audio library for React apps.

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

roover's Issues

Preload

Right now the library is loading the audio by default. Create a parameter on the useRehawk hook called preload so the user can choose when to load the audio. Also, provide a method called load or loadAudio.

onBackward and onForward methods

Improve documentation

Event Status Constants

Maybe is a good alternative create constants to manage this data

like a file with all exported constants

//src/utils/constants.ts

export default { 
 PAUSE: 'PAUSE'
}

//src/hooks/useRoover/useRoover.ts

import ROOVER from 'utils/constants'; 

service.send(ROOVER.PAUSE);

roover/src/hooks/useRoover/useRoover.ts

Line 147 in 127a9b0

service.send('PAUSE');

What do you think @leonardomso ?

Callback props

Create callback props that would be very useful, for example:

• onLoading - called when audio is loading.
• onReady - called when audio is ready to play.
• onError - called when there was an error.
• onPlaying - called when audio is playing.
• onPaused - called when audio is paused.
• onStopped - called when audio is stopped.
• onMute - called when the mute value is changed.
• onLoop - called when the loop value is changed.
• onEnd - called when audio is ended.

Move away from Howler

The current bundle size of the package is now 39.3 kB, I am working in a POC to move away from Howler and use only the Audio API.