React Custom Music Player

#react #typescript #hoc #javascript

Reaplay is React HOC for create your custom music player with any styles you like.

give me your tracks list, and i'll give you must state, functionalities you need for create a music player

Install

npm install --save reaplay

yarn add reaplay

Usage

import React from 'react'
import {Reaplay} from 'reaplay'

export default function App() {
   const songList = [
     "songSrc", // url song (https://example.com/song.mp3)
     "songSrc", // url song
     require("./songSrc"), //local song,
   ]

   return (
     //                         optional ↓
     <Reaplay tracks={songList} startIndex={2}>
        {(player) => {

           console.log("loading :", player.isLoading)

           return (
              // your player
           )
        }}
     </Reaplay>
   )
}

"tracks" prop is required but "startIndex" is optional prop

Example :

you can see a complete example Here Or Here

some states of player (example)

player.isLoading
player.duration
player.trackProgress
player.volume
player.isRepeat
and more states for create your dynamically player ui

some functions of player (example)

player.toNextTrack()
player.toPrevTrack()
player.setVolume(70)
player.setIsRepeat(true) | player.setIsRepeat((isRepeat) => !isRepeat)
player.playFast()
and more functionalities you can use for your own player events

Hope it useful for your projects, if you enjoy it
for supporting me, Please click on the Star button on Github and Share this post and finally send the Repo to your friends.
Github Repo:
https://github.com/Amir-Alipour/reaplay