Introducing Roover – a lightweight audio library for React

#react #javascript #webdev #programming

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.

Introducing Roover

Roover is a powerful and lightweight library for working with audio in React apps. It is a simple custom React hook that can be used anywhere in your application.

It is very easy to get started with Roover. Inside your React project, just run the command to install it:

yarn add roover
```



Now, just import the `useRoover` hook and start to use it:



```
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,
  } = useRover({
    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>
  );
};
```



The library is fully open-source on [GitHub](https://github.com/leonardomso/roover) and we have a very clear documentation page where you can check it out and the use-cases and how to use the library properly.

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.