https://github.com/react-player/reaplay
React Music Player | the react HOC for create custom players with any styles you like
https://github.com/react-player/reaplay
audio audio-player creative-coding custom-player hoc media-player npm-package player react react-audio-player react-music-player react-player reaplay reaplay-react typescript
Last synced: 3 months ago
JSON representation
React Music Player | the react HOC for create custom players with any styles you like
- Host: GitHub
- URL: https://github.com/react-player/reaplay
- Owner: react-player
- License: mit
- Created: 2021-12-15T09:02:25.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2023-10-23T12:12:25.000Z (over 1 year ago)
- Last Synced: 2024-04-26T10:45:16.646Z (about 1 year ago)
- Topics: audio, audio-player, creative-coding, custom-player, hoc, media-player, npm-package, player, react, react-audio-player, react-music-player, react-player, reaplay, reaplay-react, typescript
- Language: TypeScript
- Homepage: https://npmjs.com/reaplay
- Size: 47.3 MB
- Stars: 24
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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
[](https://www.npmjs.com/package/reaplay)
[](LICENSE)
[](https://standardjs.com)
## Installation
```
npm install --save reaplay
```
```
yarn add reaplay
```
Also be sure you have `react` and `react-dom` installed in your app
## Usage
### tsx
```tsx
import React from 'react';
import { Reaplay, PlayerType } from 'reaplay'
const songList:string[] = [
"songSrc", // url song
"songSrc", // url song
require("./songSrc"), //local song
]
// optional ↓
{(player: PlayerType) => {
// player have functions and variables
}
```
### jsx
```jsx
import React from 'react';
import { Reaplay } from 'reaplay'
const songList = [
"songSrc", // url song
"songSrc", // url song
require("./songSrc"), //local song
]
{(player) => {
// player have functions and variables
}
```
## 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](https://github.com/Amir-Alipour/reaplay/tree/master/example) and then `npm start`.
or
```jsx
{(player) => {
return (
<>
player.onScrub(e.target.value)}
onMouseUp={(e) => player.onScrubEnd(e)}
onKeyUp={(e) => player.onScrubEnd(e)}
/>
player.toPrevTrack()}>prev
player.play()}>Play
player.pause()}>Pause
player.toNextTrack()}>next
player.setVolume(+e.target.value)}
/>
player.mute()}>mute
player.unmute()}>unmute
>
)
}
}
```
### 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](https://github.com/amir-alipour) - [LICENSE](https://github.com/Amir-Alipour/reaplay/blob/master/LICENSE)