Package Exports

react-simplified-player
react-simplified-player/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-simplified-player) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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