{"id":25580378,"url":"https://github.com/tderflinger/react-nano-audio","last_synced_at":"2026-05-12T07:37:06.002Z","repository":{"id":41735329,"uuid":"231658358","full_name":"tderflinger/react-nano-audio","owner":"tderflinger","description":"A minimalistic audio playing component for React.","archived":false,"fork":false,"pushed_at":"2023-01-05T04:53:25.000Z","size":5070,"stargazers_count":1,"open_issues_count":20,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-14T19:06:24.060Z","etag":null,"topics":["audio","component","mp3","player","react"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/tderflinger.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":"2020-01-03T20:15:13.000Z","updated_at":"2020-10-23T00:11:48.000Z","dependencies_parsed_at":"2023-02-03T10:31:25.713Z","dependency_job_id":null,"html_url":"https://github.com/tderflinger/react-nano-audio","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tderflinger%2Freact-nano-audio","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tderflinger%2Freact-nano-audio/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tderflinger%2Freact-nano-audio/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tderflinger%2Freact-nano-audio/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tderflinger","download_url":"https://codeload.github.com/tderflinger/react-nano-audio/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239952637,"owners_count":19723924,"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","component","mp3","player","react"],"created_at":"2025-02-21T04:15:50.907Z","updated_at":"2026-03-30T21:30:17.864Z","avatar_url":"https://github.com/tderflinger.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-nano-audio\n\nA minimalistic audio playing component for React.\n\nThe player can start, pause and resume the playing of the audio file.\n\nIt has keyboard accessibility built in. The enter key starts and pauses the\nplaying of the audio file.\n\nLooks like this: ![audio](./src/play.svg)\n\n## Installation\n\n## Usage\n\nElement usage example:\n\n```jsx\nimport Audio from \"react-nano-audio\";\n\n\u003cAudio\n  audioUrl=\"https://example.com/test.mp3\"\n  iconWidth=\"18px\"\n  iconHeight=\"18px\"\n\u003e\n  Play Audio\n\u003c/Audio\u003e;\n```\n\nProps:\n\n- audioUrl [string]: the URL of the audio file to play. The audio file needs to be publicly accessible.\n  Tested with MP3 files, but should work with other browser supported audio files too.\n- iconWidth [string]: the width of the icon\n- iconHeight [string]: the height of the icon\n\n## Building\n\nGo to the react-nano-audio directory and call:\n\n```bash\nnpm run build\n```\n\n## Storybook\n\nTo invoke Storybook run:\n\n```bash\nnpm run storybook\n```\n\n## References\n\nFor the play and pause buttons react-nano-audio uses the Bootstrap icons\nplay and pause.\n\nThis component builds upon the following projects:\n\n- [React](https://reactjs.org/)\n- [Bootstrap Icons](https://icons.getbootstrap.com/)\n- [Storybook](https://storybook.js.org/)\n- [Rollup](https://rollupjs.org)\n- [Babel](https://babeljs.io/)\n\n## License\n\nMIT license\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftderflinger%2Freact-nano-audio","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftderflinger%2Freact-nano-audio","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftderflinger%2Freact-nano-audio/lists"}