DEV Community

Cover image for React Music Player
Amir
Amir

Posted on • Updated on

React Music Player

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 
Enter fullscreen mode Exit fullscreen mode
yarn add reaplay
Enter fullscreen mode Exit fullscreen mode

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>
   )
}
Enter fullscreen mode Exit fullscreen mode

"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


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

Top comments (2)

Collapse
 
beaumontyun profile image
beaumontyun

Nice

Collapse
 
amir_alipour profile image
Amir