tderflinger / react-nano-audio

A minimalistic audio playing component for React.

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:

import Audio from "react-nano-audio";

<Audio
  audioUrl="https://example.com/test.mp3"
  iconWidth="18px"
  iconHeight="18px"
>
  Play Audio
</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:

npm run build

Storybook

To invoke Storybook run:

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
• Bootstrap Icons
• Storybook
• Rollup
• Babel

License

MIT license