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 install --save reaplay yarn add reaplay Also be sure you have react and react-dom installed in your app
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>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>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>| 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 | --- |
| 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% |
| 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() |
browsers don't give access to play sound without at least one user interaction with website
MIT © amir-alipour - LICENSE