{"id":15063342,"url":"https://github.com/niloysikdar/react-awesome-audio","last_synced_at":"2026-03-01T13:01:51.005Z","repository":{"id":43730376,"uuid":"443510297","full_name":"niloysikdar/react-awesome-audio","owner":"niloysikdar","description":"A package with Optimized and Supercharged React hook to play audio without any DOM element 💪🎧","archived":false,"fork":false,"pushed_at":"2022-02-21T11:32:34.000Z","size":899,"stargazers_count":30,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-31T09:01:35.086Z","etag":null,"topics":["audio-player","hacktoberfest","hacktoberfest-accepted","hacktoberfest2022","hooks","npm-package","react"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-awesome-audio","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/niloysikdar.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}},"created_at":"2022-01-01T09:45:20.000Z","updated_at":"2023-12-03T08:49:23.000Z","dependencies_parsed_at":"2022-08-21T22:20:28.535Z","dependency_job_id":null,"html_url":"https://github.com/niloysikdar/react-awesome-audio","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/niloysikdar/react-awesome-audio","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/niloysikdar%2Freact-awesome-audio","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/niloysikdar%2Freact-awesome-audio/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/niloysikdar%2Freact-awesome-audio/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/niloysikdar%2Freact-awesome-audio/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/niloysikdar","download_url":"https://codeload.github.com/niloysikdar/react-awesome-audio/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/niloysikdar%2Freact-awesome-audio/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29969700,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-01T12:56:10.327Z","status":"ssl_error","status_checked_at":"2026-03-01T12:55:24.744Z","response_time":124,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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-player","hacktoberfest","hacktoberfest-accepted","hacktoberfest2022","hooks","npm-package","react"],"created_at":"2024-09-24T23:55:12.775Z","updated_at":"2026-03-01T13:01:50.980Z","avatar_url":"https://github.com/niloysikdar.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-awesome-audio\n\n### Optimized and Supercharged React hook to play audio without any DOM element 💪🎧\n\nFind the npm package [here](https://www.npmjs.com/package/react-awesome-audio)\n\n\u003cp\u003e\n  \u003ca href=\"https://badge.fury.io/js/react-awesome-audio\"\u003e\u003cimg src=\"https://badge.fury.io/js/react-awesome-audio.svg\" alt=\"npm version\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n### Star the [GitHub repo](https://github.com/niloysikdar/react-awesome-audio) to keep the developer motivated ✨\n\n## Installation\n\n- using npm\n\n```\nnpm i react-awesome-audio\n```\n\nor\n\n```\nnpm install --save react-awesome-audio\n```\n\n- using yarn\n\n```\nyarn add react-awesome-audio\n```\n\nAlso be sure you have `react` installed in your app at version 16.8 or above.\n\n## Usage\n\n### Using audio URL\n\n    import { useAudio } from \"react-awesome-audio\";\n\n    const App = () =\u003e {\n        const { isPlaying, play, pause, toggle } = useAudio({\n            src: \"https://p.scdn.co/mp3-preview/d09498fe7e41e26b90682c3b5a0819bbcc3378e2\",\n            loop: true,\n        });\n\n        return (\n            \u003cdiv\u003e\n                \u003cbutton onClick={toggle}\u003e{isPlaying ? \"Pause\" : \"Play\"}\u003c/button\u003e\n            \u003c/div\u003e\n        );\n    };\n\n    export default App;\n\n### Using asset audio\n\n```\nimport { useAudio } from \"react-awesome-audio\";\nimport song from \"./assets/song.mp3\";\n\nconst App = () =\u003e {\n  const { isPlaying, play, pause, toggle } = useAudio({\n    src: song,\n    loop: true,\n  });\n\n  return (\n    \u003cdiv\u003e\n      \u003cbutton onClick={toggle}\u003e{isPlaying ? \"Pause\" : \"Play\"}\u003c/button\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default App;\n```\n\n**_Note: To import audio file from assets in TypeScript, you need to use require() instead of ES6 import, [see this](https://stackoverflow.com/a/59456219) for more details._**\n\n### Example\n\nSee the [example directory](https://github.com/niloysikdar/react-awesome-audio/tree/main/example) 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## Options\n\n| Option         | Type     | Default    | Description                                                                                 |\n| -------------- | -------- | ---------- | ------------------------------------------------------------------------------------------- |\n| `src`          | String   | `required` | Audio source                                                                                |\n| `loop`         | Boolean  | false      | Loop the audio                                                                              |\n| `volume`       | Number   | 1 (max)    | Volume of the audio, ranging from 0(min) to 1(max)                                          |\n| `muted`        | Boolean  | false      | Mute the audio, `Note`: if you pass both volume and `muted: true`, then audio will be muted |\n| `onLoadedData` | Function | () =\u003e {}   | call the function when the audio data has been loaded                                       |\n| `onError`      | Function | () =\u003e {}   | call the function when the audio encounters an error                                        |\n| `onEnded`      | Function | () =\u003e {}   | call the function when the audio ends                                                       |\n\n## Bugs and Features\n\nSee the [issues](https://github.com/niloysikdar/react-awesome-audio/issues) for a list of proposed features (and known issues). Feel free to raise new issues.\n\n## License\n\nDistributed under the MIT License. See [LICENSE](https://github.com/niloysikdar/react-awesome-audio/blob/main/LICENSE) for more information.\n\n## Author\n\n### Niloy Sikdar\n\n- [niloysikdar30@gmail.com](mailto:niloysikdar30@gmail.com)\n- [GitHub](https://github.com/niloysikdar)\n- [LinkedIn](https://www.linkedin.com/in/niloysikdar)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fniloysikdar%2Freact-awesome-audio","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fniloysikdar%2Freact-awesome-audio","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fniloysikdar%2Freact-awesome-audio/lists"}