❀Negotiable Paleobotanist Missions

    react-simplified-player
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.93Β β€’Β PublicΒ β€’Β Published

    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

    Install

    npm i react-simplified-player

    DownloadsWeekly Downloads

    17

    Version

    1.0.93

    License

    MIT

    Unpacked Size

    101 kB

    Total Files

    63

    Last publish

    Collaborators

    • calmenikk