DEV Community

Cover image for Introducing Roover – a lightweight audio library for React
Leonardo Maldonado
Leonardo Maldonado

Posted on

Introducing Roover – a lightweight audio library for React

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 =

const App = () => {
  const {
  } = useRover({
    autoplay: true,

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

The library is fully open-source on [GitHub]( 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.
Enter fullscreen mode Exit fullscreen mode

Top comments (1)

melfordd profile image
Melford Birakor

Wow.... Thanks for sharing