Skip to content

Latest commit

 

History

History
154 lines (116 loc) · 5.45 KB

README.md

File metadata and controls

154 lines (116 loc) · 5.45 KB

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

  • Playlist
  • Color Customize
  • API props
  • 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