react-simplified-player

Simple Easy Customizable React Audio Player 🎶

📦 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