This content originally appeared on DEV Community and was authored by Leonardo Maldonado
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 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.
This content originally appeared on DEV Community and was authored by Leonardo Maldonado
Leonardo Maldonado | Sciencx (2021-06-10T13:12:02+00:00) Introducing Roover – a lightweight audio library for React. Retrieved from https://www.scien.cx/2021/06/10/introducing-roover-a-lightweight-audio-library-for-react/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.