{"id":16317424,"url":"https://github.com/samhirtarif/react-audio-player","last_synced_at":"2025-03-20T22:30:46.770Z","repository":{"id":174371244,"uuid":"645837579","full_name":"samhirtarif/react-audio-player","owner":"samhirtarif","description":"A mobile-friendly audio player for React with a modern look and convenient usage","archived":false,"fork":false,"pushed_at":"2023-12-01T03:23:23.000Z","size":1696,"stargazers_count":12,"open_issues_count":8,"forks_count":8,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-17T18:08:23.043Z","etag":null,"topics":["audio","audio-playback","audio-player","react","react-audio","react-audio-player","react-audioplayer","reactjs","voice","voice-play","voice-playback","voice-player"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-audio-player-component","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/samhirtarif.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":"2023-05-26T14:50:23.000Z","updated_at":"2025-03-01T13:09:25.000Z","dependencies_parsed_at":"2024-10-23T04:09:17.956Z","dependency_job_id":null,"html_url":"https://github.com/samhirtarif/react-audio-player","commit_stats":{"total_commits":22,"total_committers":4,"mean_commits":5.5,"dds":"0.40909090909090906","last_synced_commit":"d5d535cd2ef696b9b0b05a86cf8cb3020a630f12"},"previous_names":["samhirtarif/react-audio-player"],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samhirtarif%2Freact-audio-player","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samhirtarif%2Freact-audio-player/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samhirtarif%2Freact-audio-player/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samhirtarif%2Freact-audio-player/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/samhirtarif","download_url":"https://codeload.github.com/samhirtarif/react-audio-player/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244703641,"owners_count":20496153,"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","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-playback","audio-player","react","react-audio","react-audio-player","react-audioplayer","reactjs","voice","voice-play","voice-playback","voice-player"],"created_at":"2024-10-10T22:08:24.336Z","updated_at":"2025-03-20T22:30:46.381Z","avatar_url":"https://github.com/samhirtarif.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# **react-audio-player-component**\nA mobile-friendly audio player for React with a modern look and convenient usage.\n\n[![NPM downloads][npm-download-img]][npm-download-url]\n[![Run ESlint][eslint-img]][eslint-url]\n[![Run Unit tests][test-img]][test-url] \n[![Run Unit tests][browser-test-img]][browser-test-url] \n\n[npm-download-img]: https://img.shields.io/npm/dm/react-audio-player-component.svg?style=round-square\n[npm-download-url]: https://www.npmjs.com/package/react-audio-player-component\n[eslint-img]: https://github.com/samhirtarif/react-audio-player/actions/workflows/lint.yml/badge.svg\n[eslint-url]: https://github.com/samhirtarif/react-audio-player/actions/workflows/lint.yml\n[test-img]: https://github.com/samhirtarif/react-audio-player/actions/workflows/unit-tests.yml/badge.svg\n[test-url]: https://github.com/samhirtarif/react-audio-player/actions/workflows/unit-tests.yml\n[browser-test-img]: https://github.com/samhirtarif/react-audio-player/actions/workflows/browser-tests.yml/badge.svg\n[browser-test-url]: https://github.com/samhirtarif/react-audio-player/actions/workflows/browser-tests.yml\n\n## Installation\n```sh\nnpm install react-audio-player-component\n```\n\n## **AudioPlayer** Component ([Example](https://stackblitz.com/edit/stackblitz-starters-t5nci5?file=src%2FApp.tsx))\n\n![screenshot](./assets/AudioPlayer.png)\n\u003cbr /\u003e\u003cbr /\u003e\n![screenshot](./assets/AudioPlayerMinimal.png)\n\u003cbr /\u003e\n*Minimal Audio player*\n\n```js\nimport React, { useState } from 'react';\nimport { AudioPlayer } from 'react-audio-player-component';\n\nconst Player = () =\u003e {\n  return (\n    \u003cAudioPlayer \n      src=\"audios/test.mp3\"\n      minimal={false}\n      width={350}\n      trackHeight={75}\n      barWidth={1}\n      gap={1}\n\n      visualise={true}\n      backgroundColor=\"#FFF8DE\"\n      barColor=\"#C1D0B5\"\n      barPlayedColor=\"#99A98F\"\n\n      skipDuration={2}\n      showLoopOption={true}\n      showVolumeControl={true}\n\n      // seekBarColor=\"purple\"\n      // volumeControlColor=\"blue\"\n      // hideSeekBar={true}\n      // hideTrackKnobWhenPlaying={true}\n    /\u003e\n  )\n}\n\n```\n## Audio element native props\n| Props  | Description | Default | Optional |\n| :------------ |:--------------- |:--------------- | :--------------- |\n| **`src`**  | The address or URL of the a audio resource that is to be considered | N/A | No |\n| **`volume`** | Initial volume level for the audio, minimum being `0`, maximum being `1` | `0.75` | Yes |\n| **`loop`** | Sets a flag to specify whether playback should restart after it completes | `false` | Yes |\n| **`muted`** | Sets a flag that indicates whether the audio is muted | `false` | Yes |\n| **`autoplay`** | Sets a value that indicates whether to start playing the media automatically | `false` | Yes |\n| **`crossOrigin`** | The CORS setting for this media element. [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/crossOrigin) | `null` | Yes |\n| **`autoplay`** | Sets a value indicating what data should be preloaded, if any. Allowed values `\"\"`, `\"none\"`, `\"metadata\"`, `\"auto\"` | `\"\"` | Yes |\n| **`playbackRate`** | Sets the rate at which media is being played back | `1.0` | Yes |\n---\n\u003cbr\u003e\n\n## Audio element events\n#### `AudioPlayer` supports all the events for `HTMLMediaElement` ([MDN Reference](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement#events)). All of the events listed in the MDN docs can be passed as a prop to the `AudioPlayer`\n---\n\u003cbr\u003e\n\n## Audio player props\n| Props  | Description | Default | Optional |\n| :------------ |:--------------- |:--------------- | :--------------- |\n| **`minimal`** | Displays a minimal version of the audio player, with only the play/pause button, track bar and timestamp | `false` | Yes |\n| **`width`** | Width of the audio player | N/A | No |\n| **`barWidth`** | Width of each individual bar in the visualization | `2` | Yes |     \n| **`gap`** |  Gap between each bar in the visualization | `1` | Yes |\n| **`visualise`** |  Represents whether the audio visualization (waveform) should be displayed | `true` | Yes |\n| **`trackHeight`** |  Height of the visualization / trackbar area | `75` | Yes |\n| **`backgroundColor`** |  Background color for the audio player | `#EFEFEF` | Yes |\n| **`barColor`** |  Color for the bars in the visualization. This only applies to bars that have not currently been played | `\"rgb(184, 184, 184)\"\"` | Yes |\n| **`barPlayedColor`** |  Color for the bars that have been played | `\"rgb(160, 198, 255)\"\"` | Yes |\n| **`allowSkip`** |  Represents whether the skip forward/backward options should be displayed | `true` | Yes |\n| **`skipDuration`** |  The number of seconds to skip forward/backward | `5` | Yes |\n| **`showLoopOption`** |  Represents whether to show the loop options | `true` | Yes |\n| **`showVolumeControl`** |  Represents whether the volume control should be shown | `true` | Yes |\n| **`seekBarColor`** |  Color for the audio seek bar | `rgba(140, 140, 140)` | Yes |\n| **`volumeControlColor`** |  Color for the volumn control | `rgba(140, 140, 140)` | Yes |\n| **`hideSeekBar`** |  Hides the seek bar if set to `true`, the audio will still be seekable | `false` | Yes |\n| **`hideSeekKnobWhenPlaying`** |  Hides the seek knob when audio is playing if set to `true` | `false` | Yes |\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsamhirtarif%2Freact-audio-player","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsamhirtarif%2Freact-audio-player","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsamhirtarif%2Freact-audio-player/lists"}