📦 Installation

using npm:

npm i react-simplified-player

using yarn:

yarn add react-simplified-player

🖼️ Screenshots

Desktop

Mobile

✨ Feature list

• [x] Playlist
• [x] Color Customize
• [x] API props
• [x] Typescript support

👀 Example

Live Demo:

https://react-simplified-player.netlify.app/

How things work

Source Code

📝 Usage

import ReactDOM from "react-dom/client";
const rootElement = document.getElementById("root") as HTMLElement
const root = ReactDOM.createRoot(rootElement);

import { ReactSimplifiedPlayer } from "react-simplified-player"

root.render(<ReactSimplifiedPlayer {...props} />);

📄 API

| Name | Type | Default |Required | Description | |--|--|--|--|--| | mainColor | string | - | ✅ | main color shows the background of draggable player | showQueue | boolean | false | | showing queue on player | song | QueueType | - | ✅ | which song must be added to queue or which one should play, if you dont have music yet just put there boilerplate | defaultVolume | 0-1 | 0.5 | | when page loads default volume of playing song | onVolumeChange | (volume: string) => void | - | | when you change volume it triggers volume parameter and shows volume level 0-1 | onAudioPlay | (currentSong: QueueType)=> void | - | | when you click play of song it currentSong show object of what song is playing right now | onAudioPause | (currentSong: QueueType)=> void | - | | when you click pause of song it currentSong show object of what song is playing right now | onAudioEnded | (currentSong: QueueType)=> void | - | | when audio ends shows which audio ended as object | onForward | (currentSong: QueueType)=> void | - | | when you click next button it shows which is upcomming song as object | onBack | (currentSong: QueueType)=> void | - | | when you click previous button it shows which is upcomming song as object

💡 Customizeble UI

• color
• showing queue

custom color

import ReactDOM from "react-dom/client";
const rootElement = document.getElementById("root") as HTMLElement
const root = ReactDOM.createRoot(rootElement);

import { ReactSimplifiedPlayer } from "react-simplified-player"

// 🟡
root.render(<ReactSimplifiedPlayer mainColor={"#fcba03"} {...props} />);

show queue

import ReactDOM from "react-dom/client";
const rootElement = document.getElementById("root") as HTMLElement
const root = ReactDOM.createRoot(rootElement);

import { ReactSimplifiedPlayer } from "react-simplified-player"

// 🟡
root.render(<ReactSimplifiedPlayer showQueue={true} {...props} />);

👨‍💻 Installation

git clone https://github.com/callmenikk/react-simplified-player.git
cd react-simplified-player

npm i
npm start

🟦Component Prop Types

interface PlayerProps {
	mainColor: string,
	queue?:boolean,
	song?: QueueType,
	defaultVolume?: number,
	showQueue?: boolean,
	onVolumeChange?: (volume: number) => void,
	onAudioPlay?: (currentSong: QueueType) => void
	onAudioPause?: (currentSong: QueueType) => void,
	onAudioEnded?: (currentSong: QueueType) => void,
	onForward?: (currentSong: QueueType) => void,
	onBack?: (currentSong: QueueType) => void
}

🎶🟦Song Type

interface QueueType {
	song_cover?: string;
	song_title?: string;
	id?: string
	song_artist?: string;
	url: string;
}

📄 License

MIT