[![NPM Downloads][npm-shield]][npm-url]
[![Contributors][contributors-shield]][contributors-url]
[![Forks][forks-shield]][forks-url]
[![Stargazers][stars-shield]][stars-url]
[![Issues][issues-shield]][issues-url]
[![MIT License][license-shield]][license-url]
Table of Contents
-
About The Project
-
Getting Started
- Usage
- Roadmap
- Contributing
- License
- Contact
- Acknowledgments
## About The Project
[![React Music Player Video Demo][product-video-demo]](https://splicemood.github.io/react-music-player/)
### Web browsers compatibility (Can I Use >96%)
- [BroadcastChannel](https://caniuse.com/broadcastchannel)
- [Window API: storage event](https://caniuse.com/mdn-api_window_storage_event)
(back to top)
### Built With
* [![React][React.js]][React-url]
(back to top)
## Getting Started
You need to setup provider and hook in your react app
### Prerequisites
Install dependency
* npm
```sh
npm i @splicemood/react-music-player
```
* bun
```sh
bun i @splicemood/react-music-player
```
### Installation
main.tsx
```tsx
import ReactDOM from 'react-dom/client';
import App from './App';
import { PlayerFullSyncProvider } from '@splicemood/react-music-player';
ReactDOM.createRoot(document.getElementById('root')!).render(
);
```
Player.tsx
```tsx
import { useAudio } from "@splicemood/react-music-player"
const Player = () => {
const audio = useAudio()
// your component visualization using the hook
};
export default Player;
```
(back to top)
## Usage
_For more examples, please refer to the [GitHub Page of the project](https://splicemood.github.io/react-music-player/)_
(back to top)
## Roadmap
- [x] Full tab synchronization provider
- [x] Play/Pause tab synchronization provider
- [x] No sync provider
See the [open issues](https://github.com/splicemood/react-music-player/issues) for a full list of proposed features (and known issues).
(back to top)
## Contributing
If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement".
Don't forget to give the project a star! Thanks again!
1. Fork the Project
2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the Branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request
(back to top)
### Top contributors:
## License
Distributed under the MIT License. See `LICENSE` for more information.
(back to top)
## Contact
Kirill Bogomolov - [@manazoid](https://t.me/manazoid) - uralkir@gmail.com
Project Link: [https://github.com/splicemood/react-music-player](https://github.com/splicemood/react-music-player)
(back to top)
## Acknowledgments
* [SharpNesla](https://github.com/sharpnesla)
* [Borobysh](https://github.com/Boroboysh)
(back to top)
[contributors-shield]: https://img.shields.io/github/contributors/splicemood/react-music-player.svg?style=for-the-badge
[contributors-url]: https://github.com/splicemood/react-music-player/graphs/contributors
[forks-shield]: https://img.shields.io/github/forks/splicemood/react-music-player.svg?style=for-the-badge
[forks-url]: https://github.com/splicemood/react-music-player/network/members
[stars-shield]: https://img.shields.io/github/stars/splicemood/react-music-player.svg?style=for-the-badge
[stars-url]: https://github.com/splicemood/react-music-player/stargazers
[issues-shield]: https://img.shields.io/github/issues/splicemood/react-music-player.svg?style=for-the-badge
[issues-url]: https://github.com/splicemood/react-music-player/issues
[license-shield]: https://img.shields.io/github/license/splicemood/react-music-player.svg?style=for-the-badge
[license-url]: https://github.com/splicemood/react-music-player/blob/main/LICENSE
[npm-shield]: https://img.shields.io/npm/dm/%40splicemood%2Freact-music-player?style=for-the-badge
[npm-url]: https://www.npmjs.com/package/@splicemood/react-music-player
[React.js]: https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB
[React-url]: https://reactjs.org/
[product-video-demo]: .demo/product.gif
