{"id":13504457,"url":"https://github.com/justinmc/react-audio-player","last_synced_at":"2025-05-15T09:06:15.988Z","repository":{"id":5722236,"uuid":"53771219","full_name":"justinmc/react-audio-player","owner":"justinmc","description":"A simple React wrapper on the HTML5 audio tag","archived":false,"fork":false,"pushed_at":"2023-11-12T09:25:30.000Z","size":10413,"stargazers_count":593,"open_issues_count":68,"forks_count":102,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-04-14T15:00:29.613Z","etag":null,"topics":["audio","audio-tag","react"],"latest_commit_sha":null,"homepage":null,"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/justinmc.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":"2016-03-13T06:38:56.000Z","updated_at":"2025-04-10T13:17:55.000Z","dependencies_parsed_at":"2024-06-18T12:25:13.636Z","dependency_job_id":"543c8051-abf4-4aea-a2da-963e2b88230e","html_url":"https://github.com/justinmc/react-audio-player","commit_stats":{"total_commits":142,"total_committers":27,"mean_commits":"5.2592592592592595","dds":0.4577464788732394,"last_synced_commit":"27b0de14b6dce16723430b42e4cfabd3af295b78"},"previous_names":[],"tags_count":31,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/justinmc%2Freact-audio-player","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/justinmc%2Freact-audio-player/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/justinmc%2Freact-audio-player/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/justinmc%2Freact-audio-player/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/justinmc","download_url":"https://codeload.github.com/justinmc/react-audio-player/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254310515,"owners_count":22049469,"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-tag","react"],"created_at":"2024-08-01T00:00:40.686Z","updated_at":"2025-05-15T09:06:15.955Z","avatar_url":"https://github.com/justinmc.png","language":"TypeScript","funding_links":[],"categories":["UI Components","TypeScript"],"sub_categories":["Audio / Video"],"readme":"# React Audio Player\nThis is a light React wrapper around the HTML5 audio tag.  It provides the ability to manipulate the player and listen to events through a nice React interface.\n\n## Installation\n\n    npm install --save react-audio-player\n\nAlso be sure you have `react` and `react-dom` installed in your app at version 15 or above.\n\n## Usage\n\n    import ReactAudioPlayer from 'react-audio-player';\n    //...\n    \u003cReactAudioPlayer\n      src=\"my_audio_file.ogg\"\n      autoPlay\n      controls\n    /\u003e\n\n### Example\n\nSee 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`.\n\n## Props\n\n### Props - Native/React Attributes\nSee the [audio tag documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio) for detailed explanations of these attributes.\n\nProp | Type | Default | Notes\n--- | --- | --- | ---\n`autoPlay` | Boolean | false | ---\n`children` | Element | null | ---\n`className` | String | *empty string* | ---\n`controls` | Boolean | false | ---\n`crossOrigin` | String | *empty string* | See [MDN's article on CORS](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes) for more about this attribute.\n`controlsList` | String | *empty string* | For Chrome 58+. Only available in React 15.6.2+\n`id` | String | *empty string* | ---\n`loop` | Boolean | false | ---\n`muted` | Boolean | false | ---\n`volume` | Number | 1.0 | ---\n`preload` | String | 'metadata' | ---\n`src` | String | *empty string* | ---\n`style` | Object | --- | ---\n\n### Props - Events\n\nProp | Type | Description\n--- | --- | --- \n`listenInterval` | Number | Indicates how often to call the `onListened` prop during playback, in milliseconds. Default is 10000.\n`onAbort` | Function | called when unloading the audio player, like when switching to a different src file. Passed the event.\n`onCanPlay` | Function | called when enough of the file has been downloaded to be able to start playing.  Passed the event.\n`onCanPlayThrough` | Function | called when enough of the file has been downloaded to play through the entire file.  Passed the event.\n`onEnded` | Function | called when playback has finished to the end of the file. Passed the event.\n`onError` | Function | called when the audio tag encounters an error. Passed the event.\n`onListen` | Function | called every `listenInterval` milliseconds during playback.  Passed the event.\n`onPause` | Function | called when the user pauses playback. Passed the event.\n`onPlay` | Function | called when the user taps play.  Passed the event.\n`onSeeked` | Function | called when the user drags the time indicator to a new time. Passed the event.\n`onVolumeChanged` | Function | called when the user changes the volume, such as by dragging the volume slider | \n`onLoadedMetadata` | Function | called when the metadata for the given audio file has finished downloading.  Passed the event.\n\n## Advanced Usage\n\n### Access to the audio element\nYou can get direct access to the underlying audio element.  First get a ref to ReactAudioPlayer:\n\n    \u003cReactAudioPlayer\n      ref={(element) =\u003e { this.rap = element; }}\n    /\u003e\n\nThen you can access the audio element like this:\n\n    this.rap.audioEl\n\nThis is especially useful if you need access to read-only attributes of the audio tag such as `buffered` and `played`.  See the [audio tag documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio) for more on these attributes.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjustinmc%2Freact-audio-player","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjustinmc%2Freact-audio-player","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjustinmc%2Freact-audio-player/lists"}