https://github.com/tderflinger/react-nano-audio
A minimalistic audio playing component for React.
https://github.com/tderflinger/react-nano-audio
audio component mp3 player react
Last synced: about 1 month ago
JSON representation
A minimalistic audio playing component for React.
- Host: GitHub
- URL: https://github.com/tderflinger/react-nano-audio
- Owner: tderflinger
- License: mit
- Created: 2020-01-03T20:15:13.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T04:53:25.000Z (over 3 years ago)
- Last Synced: 2025-02-14T19:06:24.060Z (over 1 year ago)
- Topics: audio, component, mp3, player, react
- Language: JavaScript
- Size: 4.84 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-nano-audio
A minimalistic audio playing component for React.
The player can start, pause and resume the playing of the audio file.
It has keyboard accessibility built in. The enter key starts and pauses the
playing of the audio file.
Looks like this: 
## Installation
## Usage
Element usage example:
```jsx
import Audio from "react-nano-audio";
Play Audio
;
```
Props:
- audioUrl [string]: the URL of the audio file to play. The audio file needs to be publicly accessible.
Tested with MP3 files, but should work with other browser supported audio files too.
- iconWidth [string]: the width of the icon
- iconHeight [string]: the height of the icon
## Building
Go to the react-nano-audio directory and call:
```bash
npm run build
```
## Storybook
To invoke Storybook run:
```bash
npm run storybook
```
## References
For the play and pause buttons react-nano-audio uses the Bootstrap icons
play and pause.
This component builds upon the following projects:
- [React](https://reactjs.org/)
- [Bootstrap Icons](https://icons.getbootstrap.com/)
- [Storybook](https://storybook.js.org/)
- [Rollup](https://rollupjs.org)
- [Babel](https://babeljs.io/)
## License
MIT license