DEV Community

loading...
Cover image for Introducing Roover – a lightweight audio library for React

Introducing Roover – a lightweight audio library for React

leonardomso profile image Leonardo Maldonado ・2 min read

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
Enter fullscreen mode Exit fullscreen mode

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>
  );
};
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (1)

Collapse
melfordd profile image
Melford Birakor

Wow.... Thanks for sharing

Forem Open with the Forem app