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
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent