https://github.com/leonardomso/roover

🐱 A lightweight audio library for React apps.
https://github.com/leonardomso/roover

audio audio-player hooks howler-audio-library howlerjs-library html5-audio-api html5-audio-player player react react-hook reactjs sound xstate

Last synced: about 2 months ago
JSON representation

🐱 A lightweight audio library for React apps.

• Host: GitHub
• URL: https://github.com/leonardomso/roover
• Owner: leonardomso
• License: mit
• Created: 2020-05-31T12:37:58.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2024-02-14T08:54:47.000Z (10 months ago)
• Last Synced: 2024-10-14T09:19:35.973Z (2 months ago)
• Topics: audio, audio-player, hooks, howler-audio-library, howlerjs-library, html5-audio-api, html5-audio-player, player, react, react-hook, reactjs, sound, xstate
• Language: TypeScript
• Homepage: https://roover.vercel.app
• Size: 14.9 MB
• Stars: 94
• Watchers: 4
• Forks: 8
• Open Issues: 17
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-list - roover

README

        















Manage audio in React with ease



[![Build Status](https://img.shields.io/github/workflow/status/leonardomso/roover/CI?style=flat&colorA=000000&colorB=000000)](https://github.com/leonardomso/roover/actions?query=workflow%3ALint)

[![Build Size](https://img.shields.io/bundlephobia/min/roover?label=bundle%20size&style=flat&colorA=000000&colorB=000000)](https://bundlephobia.com/result?p=roover)

[![Version](https://img.shields.io/npm/v/roover?style=flat&colorA=000000&colorB=000000)](https://www.npmjs.com/package/roover)

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg?style=flat&colorA=000000&colorB=000000)](https://opensource.org/licenses/MIT)

## Motivation

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.

## Installation

```bash

yarn add roover

```

## Usage

All you need to do is import the `useRoover` hook and use it on your React component.

```typescript

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 (

    


      
Loading: {loading ? 'true' : 'false'}

      
Ready: {ready ? 'true' : 'false'}

      Play

      Pause

    

  );

};

```


## Example

To run the example do the following steps:

1. `git clone` the repository

2. `cd roover/example`

3. `yarn install`

4. `yarn start`

## Contributing

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](https://twitter.com/leonardomso) and I'll gladly answer it.

## License

MIT License © 2021 [Leonardo Maldonado](https://github.com/leonardomso)