https://github.com/justinmc/react-audio-player

A simple React wrapper on the HTML5 audio tag
https://github.com/justinmc/react-audio-player

audio audio-tag react

Last synced: about 2 months ago
JSON representation

A simple React wrapper on the HTML5 audio tag

• Host: GitHub
• URL: https://github.com/justinmc/react-audio-player
• Owner: justinmc
• License: mit
• Created: 2016-03-13T06:38:56.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2023-11-12T09:25:30.000Z (11 months ago)
• Last Synced: 2024-07-25T03:44:10.183Z (2 months ago)
• Topics: audio, audio-tag, react
• Language: TypeScript
• Size: 9.93 MB
• Stars: 577
• Watchers: 8
• Forks: 102
• Open Issues: 64
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-react - react-audio-player - A simple React wrapper on the HTML5 audio tag.  (UI Components / Audio / Video)

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';

    //...

    

### 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:

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