Manage audio in React with ease
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.
yarn add rooverAll 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>
);
};To run the example do the following steps:
git clonethe repositorycd roover/exampleyarn installyarn start
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.
MIT License © 2021 Leonardo Maldonado