# react-audio-player

> A simple React wrapper for the audio tag

Latest version **0.17.0** (published 2021-04-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-audio-player
pnpm add react-audio-player
yarn add react-audio-player
bun add react-audio-player
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.17.0 |
| Published | 2021-04-19 |
| First published | 2016-03-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 1.3 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 600 |
| Author | Justin McCandless |
| Maintainers | justinmc |
| Keywords | react, audio, player, wrapper, simple |

## Links

- npm: https://www.npmjs.com/package/react-audio-player
- Repository: https://github.com/justinmc/react-audio-player
- Homepage: https://github.com/justinmc/react-audio-player#readme
- Issues: https://github.com/justinmc/react-audio-player/issues
- npm.io page: https://npm.io/package/react-audio-player

## Dependencies (1)

- [prop-types](https://npm.io/package/prop-types.md) ^15.7.2

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.17.0 (latest) — 2021-04-19
- 0.16.1 — 2021-03-29
- 0.16.0 — 2021-03-29
- 0.15.0 — 2021-03-29
- 0.14.0 — 2020-10-06
- 0.13.0 — 2020-04-20
- 0.12.0 — 2020-04-20
- 0.11.1 — 2019-05-27
- 0.11.0 — 2018-10-10
- 0.10.0 — 2018-04-16
- 0.9.1 — 2018-04-16
- 0.9.0 — 2018-01-06
- 0.8.0 — 2018-01-05
- 0.6.4 — 2017-11-28
- 0.6.3 — 2017-11-28
- … 20 more at https://npm.io/package/react-audio-player/versions

## README

# React Audio Player
This 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.

## Installation

    npm install --save react-audio-player

Also be sure you have `react` and `react-dom` installed in your app at version 15 or above.

## Usage

    import ReactAudioPlayer from 'react-audio-player';
    //...
    <ReactAudioPlayer
      src="my_audio_file.ogg"
      autoPlay
      controls
    />

### Example

See 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`.

## Props

### Props - Native/React Attributes
See the [audio tag documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio) for detailed explanations of these attributes.

Prop | Type | Default | Notes
--- | --- | --- | ---
`autoPlay` | Boolean | false | ---
`children` | Element | null | ---
`className` | String | *empty string* | ---
`controls` | Boolean | false | ---
`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.
`controlsList` | String | *empty string* | For Chrome 58+. Only available in React 15.6.2+
`id` | String | *empty string* | ---
`loop` | Boolean | false | ---
`muted` | Boolean | false | ---
`volume` | Number | 1.0 | ---
`preload` | String | 'metadata' | ---
`src` | String | *empty string* | ---
`style` | Object | --- | ---

### Props - Events

Prop | Type | Description
--- | --- | --- 
`listenInterval` | Number | Indicates how often to call the `onListened` prop during playback, in milliseconds. Default is 10000.
`onAbort` | Function | called when unloading the audio player, like when switching to a different src file. Passed the event.
`onCanPlay` | Function | called when enough of the file has been downloaded to be able to start playing.  Passed the event.
`onCanPlayThrough` | Function | called when enough of the file has been downloaded to play through the entire file.  Passed the event.
`onEnded` | Function | called when playback has finished to the end of the file. Passed the event.
`onError` | Function | called when the audio tag encounters an error. Passed the event.
`onListen` | Function | called every `listenInterval` milliseconds during playback.  Passed the event.
`onPause` | Function | called when the user pauses playback. Passed the event.
`onPlay` | Function | called when the user taps play.  Passed the event.
`onSeeked` | Function | called when the user drags the time indicator to a new time. Passed the event.
`onVolumeChanged` | Function | called when the user changes the volume, such as by dragging the volume slider | 
`onLoadedMetadata` | Function | called when the metadata for the given audio file has finished downloading.  Passed the event.

## Advanced Usage

### Access to the audio element
You can get direct access to the underlying audio element.  First get a ref to ReactAudioPlayer:

    <ReactAudioPlayer
      ref={(element) => { this.rap = element; }}
    />

Then you can access the audio element like this:

    this.rap.audioEl

This 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.

---
_Source: https://npm.io/package/react-audio-player · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._