Skip to content

React Music Player | the react HOC for create custom players with any styles you like

License

Notifications You must be signed in to change notification settings

react-player/reaplay

Repository files navigation

React Music Player - Reaplay

React Custom Music Player (with custom HOC component)

the react HOC for create custom players with any styles you like
give me your tracks, i will give you the all function and variable you need to create a player

NPM License JavaScript Style Guide

Installation

npm install --save reaplay
yarn add reaplay

Also be sure you have react and react-dom installed in your app

Usage

tsx

import React from 'react';

import { Reaplay, PlayerType } from 'reaplay'

const songList:string[] = [
  "songSrc", // url song
  "songSrc", // url song
   require("./songSrc"), //local song
]

//                         optional ↓
<Reaplay tracks={songList} startIndex={2} >
      {(player: PlayerType) => {
          // player have functions and variables
      }
</Reaplay>

jsx

import React from 'react';

import { Reaplay } from 'reaplay'

const songList = [
  "songSrc", // url song
  "songSrc", // url song
   require("./songSrc"), //local song
]

<Reaplay tracks={songList} >
      {(player) => {
          // player have functions and variables
      }
</Reaplay>

Example

See the example directory for a basic working example of using this project. To run it locally, run npm install in the example directory and then npm start.

or

<Reaplay tracks={songList} >
      {(player) => {
          
          return (
            <>
              <input
                  type='range'
                  value={player.trackProgress}
                  step='1'
                  min='0'
                  max={player.duration ? player.duration : `${player.duration}`}
                  onChange={(e) => player.onScrub(e.target.value)}
                  onMouseUp={(e) => player.onScrubEnd(e)}
                  onKeyUp={(e) => player.onScrubEnd(e)}
                />

                <button onClick={() => player.toPrevTrack()}>prev</button>
                <button onClick={() => player.play()}>Play</button>
                <button onClick={() => player.pause()}>Pause</button>
                <button onClick={() => player.toNextTrack()}>next</button>

                <input
                  type='range'
                  value={player.volume}
                  step='1'
                  min='0'
                  max='100'
                  onChange={(e) => player.setVolume(+e.target.value)}
                />
                <button onClick={() => player.mute()}>mute</button>
                <button onClick={() => player.unmute()}>unmute</button>
            </>
          )
        }
      }
</Reaplay>


Props - HOC Parametrs

Param Type Default Notes
tracks String Array null it's the main param, the required param for "reaplay" working
startIndex Number 0 use it for start at custom index of your tracks array
children Any Null ---


player props :

Props - properties

Prop Type Default Notes
isLoading Boolean false if use Uri tracks, you need wait for the uri will be load
isHaveError Boolean false if your track returned error, it give you a boolean
trackIndex Number 0 the playing index of the tracks array
duration Number song duration the duration of the playing song
durationText String song duration converted the duration of the playing song converted to 00:00 string
trackProgress Number played duration the duration of the played of song
trackStyling string --- the generated style of track progress
isPlaying Boolean false the player on playing or not
isRepeat Boolean false the player on Repeat the song mode or not
volume Number 100 the player volume.
0 to 100
speed Number 1 the player playbackRate.
0.5 or 1 or 2
isStopPlayMoreSong Boolean false if the song will be end, dont play more anything
isShuffle Boolean false if shuffleList will be true, any action do random
(next, prev, ended)
isMute Boolean false the player mute status
buffered Number 0 the buffered value of the song
0 to 100
bufferedText String 0 the buffered value of the song
0% to 100%

Props - Events

Event param Description Example
Logger () the Logger, console.log the properties seconds by seconds for debug or your testing player.Logger()
onScrub
(value: number)
for change track progress on custom duration onChange={(e) => player.onScrub(e.target.value)}
onScrubEnd () optional -- use it on keyUp or ... on your (slider, range, any custom player duration controller) onMouseUp={player.onScrubEnd}
onKeyUp={player.onScrubEnd}
setIsPlaying (isPlaying: boolean) for play or pause the song, use it. onClick={() => player.setIsPlaying((isPlay) => !isPlay)}
play () for play the song, use it. onClick={() => player.play()}
pause () for pause the song, use it. onClick={() => player.pause()}
setTrackIndex (trackIndex: number) for change handly playing index. onClick={() => player.setTrackIndex(5)}
toNextTrack () go to next track of the tracks list player.toNextTrack()
toPrevTrack () go to prev track of the tracks list player.toPrevTrack()
repeat (isRepeat: boolean) turn on or off for repeat the playing song player.repeat((isRepeat) => !isRepeat)
setVolume (volume: number) set player volume, 0 to 100 player.setVolume(70)
playSlow () set player playbackRate (speed) to 0.5 player.playSlow()
playNormal () set player playbackRate (speed) to 1 player.playNormal()
playFast () set player playbackRate (speed) to 2 player.playFast()
StopPlayMoreSong (stopped: boolean) dont play more anything after the playing song will be ended player.StopPlayMoreSong(true)
playRandom () play a random track of your tracks list player.playRandom()
playShuffle (shuffle: boolean) the all player action will be random
next prev ended
player.playShuffle((isShuffle) => !isShuffle)
mute () mute the player player.mute()
unmute () unmute the player player.unmute()
forward () forward to 5s later player.forward()
backward () backward to 5s before player.backward()
forceUpdatePlayer () forece Re-Render player player.forceUpdatePlayer()
update () update player player.update()


Fix Browser Condition :

browsers don't give access to play sound without at least one user interaction with website

242920537-9cedf5bb-ad7e-4488-aa03-29765826182b


License

MIT © amir-alipour - LICENSE