React Music Player

Amir — Wed, 22 Dec 2021 12:33:02 +0000

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

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

example

you can clone this, or use little example in codesandbox