Reaplay NPM | npm.io

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

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.

<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()