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.

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

License

MIT © amir-alipour - LICENSE