React Music Player

The music player that sync all settings between multiple tabs on a single client-side browser session
Explore the docs »

View Demo · Report Bug · Request Feature

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. Usage
4. Roadmap
5. Contributing
6. License
7. Contact
8. Acknowledgments

About The Project

Web browsers compatibility (Can I Use >96%)

• BroadcastChannel
• Window API: storage event

(back to top)

Built With

• 

(back to top)

Getting Started

You need to setup provider and hook in your react app

Prerequisites

Install dependency

• npm

  npm i @splicemood/react-music-player

• bun

  bun i @splicemood/react-music-player

Installation

main.tsx

import ReactDOM from 'react-dom/client';
import App from './App';
import { PlayerFullSyncProvider } from '@splicemood/react-music-player';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <PlayerFullSyncProvider>
    <App />
  </PlayerFullSyncProvider>
);

Player.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

(back to top)

Roadmap

• Full tab synchronization provider
• Play/Pause tab synchronization provider
• No sync provider

See the open 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 - [email protected]

Project Link: https://github.com/splicemood/react-music-player

(back to top)

Acknowledgments

• SharpNesla
• Borobysh

(back to top)