About The Project

Web browsers compatibility (Can I Use >96%)

• BroadcastChannel
• Window API: storage event

Built With

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;

Usage

For more examples, please refer to the GitHub Page of the project

Roadmap

• [x] Full tab synchronization provider
• [x] Play/Pause tab synchronization provider
• [x] No sync provider

See the open issues for a full list of proposed features (and known issues).

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

Top contributors:

License

Distributed under the MIT License. See LICENSE for more information.

Contact

Kirill Bogomolov - @manazoid - [email protected]

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

Acknowledgments

• SharpNesla
• Borobysh