{"id":26910927,"url":"https://github.com/react-player/reaplay","last_synced_at":"2025-10-11T16:39:01.178Z","repository":{"id":57348951,"uuid":"438562215","full_name":"react-player/reaplay","owner":"react-player","description":"React Music Player | the react HOC for create custom players with any styles you like","archived":false,"fork":false,"pushed_at":"2023-10-23T12:12:25.000Z","size":49582,"stargazers_count":25,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-09-18T17:44:38.131Z","etag":null,"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"],"latest_commit_sha":null,"homepage":"https://npmjs.com/reaplay","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/react-player.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-12-15T09:02:25.000Z","updated_at":"2024-05-21T07:52:15.000Z","dependencies_parsed_at":"2025-04-01T14:38:10.937Z","dependency_job_id":null,"html_url":"https://github.com/react-player/reaplay","commit_stats":null,"previous_names":["amir-alipour/reaplay"],"tags_count":20,"template":false,"template_full_name":null,"purl":"pkg:github/react-player/reaplay","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-player%2Freaplay","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-player%2Freaplay/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-player%2Freaplay/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-player%2Freaplay/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/react-player","download_url":"https://codeload.github.com/react-player/reaplay/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-player%2Freaplay/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279007970,"owners_count":26084369,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-11T02:00:06.511Z","response_time":55,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["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"],"created_at":"2025-04-01T14:25:58.145Z","updated_at":"2025-10-11T16:39:01.148Z","avatar_url":"https://github.com/react-player.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Music Player - Reaplay\n## React Custom Music Player (with custom HOC component)\n\n\u003e the react HOC for create custom players with any styles you like \u003cbr /\u003e\n\u003e give me your tracks, i will give you the all function and variable you need to create a player\n\n[![NPM](https://img.shields.io/npm/v/reaplay.svg)](https://www.npmjs.com/package/reaplay)\n[![License](https://img.shields.io/npm/l/reaplay.svg)](LICENSE)\n[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\n\n## Installation\n\n```\nnpm install --save reaplay\n```\n\n```\nyarn add reaplay\n```\n\nAlso be sure you have `react` and `react-dom` installed in your app\n\n\n\n## Usage\n\n### tsx\n```tsx\nimport React from 'react';\n\nimport { Reaplay, PlayerType } from 'reaplay'\n\nconst songList:string[] = [\n  \"songSrc\", // url song\n  \"songSrc\", // url song\n   require(\"./songSrc\"), //local song\n]\n\n//                         optional ↓\n\u003cReaplay tracks={songList} startIndex={2} \u003e\n      {(player: PlayerType) =\u003e {\n          // player have functions and variables\n      }\n\u003c/Reaplay\u003e\n```\n\n### jsx\n```jsx\nimport React from 'react';\n\nimport { Reaplay } from 'reaplay'\n\nconst songList = [\n  \"songSrc\", // url song\n  \"songSrc\", // url song\n   require(\"./songSrc\"), //local song\n]\n\n\u003cReaplay tracks={songList} \u003e\n      {(player) =\u003e {\n          // player have functions and variables\n      }\n\u003c/Reaplay\u003e\n```\n\n## Example\nSee 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`.\n\nor \n\u003cbr /\u003e\n\n```jsx\n\u003cReaplay tracks={songList} \u003e\n      {(player) =\u003e {\n          \n          return (\n            \u003c\u003e\n              \u003cinput\n                  type='range'\n                  value={player.trackProgress}\n                  step='1'\n                  min='0'\n                  max={player.duration ? player.duration : `${player.duration}`}\n                  onChange={(e) =\u003e player.onScrub(e.target.value)}\n                  onMouseUp={(e) =\u003e player.onScrubEnd(e)}\n                  onKeyUp={(e) =\u003e player.onScrubEnd(e)}\n                /\u003e\n\n                \u003cbutton onClick={() =\u003e player.toPrevTrack()}\u003eprev\u003c/button\u003e\n                \u003cbutton onClick={() =\u003e player.play()}\u003ePlay\u003c/button\u003e\n                \u003cbutton onClick={() =\u003e player.pause()}\u003ePause\u003c/button\u003e\n                \u003cbutton onClick={() =\u003e player.toNextTrack()}\u003enext\u003c/button\u003e\n\n                \u003cinput\n                  type='range'\n                  value={player.volume}\n                  step='1'\n                  min='0'\n                  max='100'\n                  onChange={(e) =\u003e player.setVolume(+e.target.value)}\n                /\u003e\n                \u003cbutton onClick={() =\u003e player.mute()}\u003emute\u003c/button\u003e\n                \u003cbutton onClick={() =\u003e player.unmute()}\u003eunmute\u003c/button\u003e\n            \u003c/\u003e\n          )\n        }\n      }\n\u003c/Reaplay\u003e\n```\n\n\u003cbr/\u003e\n\u003cbr/\u003e\n\n### Props - HOC Parametrs\nParam | Type | Default | Notes\n--- | --- | --- | ---\n`tracks` | String Array | null | it's the main param, the required param for \"reaplay\" working\n`startIndex` | Number | 0 | use it for start at custom index of your tracks array\n`children` | Any | Null | ---\n\n\u003cbr/\u003e\n\u003cbr/\u003e\n\n## player props :\n\n### Props - properties\nProp | Type | Default | Notes\n--- | --- | --- | ---\n`isLoading` | Boolean | false | if use Uri tracks, you need wait for the uri will be load\n`isHaveError` | Boolean | false | if your track returned error, it give you a boolean\n`trackIndex` | Number | 0 | the playing index of the tracks array\n`duration` | Number | song duration | the duration of the playing song\n`durationText` | String | song duration converted | the duration of the playing song converted to 00:00 string\n`trackProgress` | Number | played duration | the duration of the played of song\n`trackStyling` | string | --- | the generated style of track progress\n`isPlaying` | Boolean | false | the player on playing or not\n`isRepeat` | Boolean | false | the player on `Repeat` the song mode or not\n`volume` | Number | 100 | the player volume. \u003cbr/\u003e `0` to `100`\n`speed` | Number | 1 | the player playbackRate. \u003cbr/\u003e `0.5` or `1` or `2`\n`isStopPlayMoreSong` | Boolean | false | if the song will be end, dont play more anything\n`isShuffle` | Boolean | false | if shuffleList will be true, any action do random \u003c/br\u003e (next, prev, ended)\n`isMute` | Boolean | false | the player mute status\n`buffered` | Number | 0 | the buffered value of the song \u003cbr/\u003e `0` to `100`\n`bufferedText` | String | 0 | the buffered value of the song \u003cbr/\u003e `0%` to `100%`\n\n### Props - Events\nEvent | param | Description | Example\n--- | --- | --- | ---\n`Logger` | () | the Logger, console.log the properties seconds by seconds for debug or your testing | player.Logger()\n`onScrub` |\u003cpre\u003e(value: number)\u003c/pre\u003e| for change track progress on custom duration | `onChange`={(e) =\u003e player.onScrub(e.target.value)}\n`onScrubEnd` | () | `optional` -- use it on keyUp or ... on your (slider, range, any custom player duration controller) | `onMouseUp`={player.onScrubEnd} \u003cbr /\u003e `onKeyUp`={player.onScrubEnd}\n`setIsPlaying` | (isPlaying: boolean) | for play or pause the song, use it. | `onClick`={() =\u003e player.setIsPlaying((isPlay) =\u003e !isPlay)}\n`play` | () |  for play the song, use it. | `onClick`={() =\u003e player.play()}\n`pause` | () | for pause the song, use it. | `onClick`={() =\u003e player.pause()}\n`setTrackIndex` | (trackIndex: number) | for change handly playing index. | `onClick`={() =\u003e player.setTrackIndex(5)}\n`toNextTrack` | () | go to next track of the tracks list | player.toNextTrack()\n`toPrevTrack` | () | go to prev track of the tracks list | player.toPrevTrack()\n`repeat` | (isRepeat: boolean) | turn on or off for repeat the playing song | player.repeat((isRepeat) =\u003e !isRepeat)\n`setVolume` | (volume: number) | set player volume, `0` to `100` | player.setVolume(70)\n`playSlow` | () | set player playbackRate (speed) to `0.5` | player.playSlow()\n`playNormal` | () | set player playbackRate (speed) to `1` | player.playNormal()\n`playFast` | () | set player playbackRate (speed) to `2` | player.playFast()\n`StopPlayMoreSong` | (stopped: boolean) | dont play more anything after the playing song will be ended | player.StopPlayMoreSong(true)\n`playRandom` | () | play a random track of your tracks list | player.playRandom()\n`playShuffle` | (shuffle: boolean) | the all player action will be random \u003c/br\u003e `next` `prev` `ended` | player.playShuffle((isShuffle) =\u003e !isShuffle)\n`mute` | () | mute  the player | player.mute()\n`unmute` | () | unmute  the player | player.unmute()\n`forward` | () | forward to 5s later | player.forward()\n`backward` | () | backward to 5s before | player.backward()\n`forceUpdatePlayer` | () | forece Re-Render player | player.forceUpdatePlayer()\n`update` | () | update player | player.update()\n\n\u003c/br\u003e\n\u003c/br\u003e\n\n### Fix Browser Condition : \nbrowsers don't give access to play sound without at least one user interaction with website \u003cbr/\u003e\n\n\u003cimg width=\"798\" alt=\"242920537-9cedf5bb-ad7e-4488-aa03-29765826182b\" src=\"https://github-production-user-asset-6210df.s3.amazonaws.com/73488911/267464235-98384f28-a7f8-440b-9c2c-6745bfe9135a.png\"\u003e\n\n\n\u003c/br\u003e\n\n## License\n\nMIT © [amir-alipour](https://github.com/amir-alipour) - [LICENSE](https://github.com/Amir-Alipour/reaplay/blob/master/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-player%2Freaplay","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freact-player%2Freaplay","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-player%2Freaplay/lists"}