Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/webbestmaster/react-audio-player-pro
React Audio Player Pro provides: single audio, playlist and playlist provider
https://github.com/webbestmaster/react-audio-player-pro
Last synced: 3 months ago
JSON representation
React Audio Player Pro provides: single audio, playlist and playlist provider
- Host: GitHub
- URL: https://github.com/webbestmaster/react-audio-player-pro
- Owner: webbestmaster
- License: mit
- Created: 2020-09-04T15:37:41.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-09-24T22:12:03.000Z (5 months ago)
- Last Synced: 2024-11-08T11:53:17.256Z (3 months ago)
- Language: TypeScript
- Homepage: http://webbestmaster.github.io/react-audio-player-pro
- Size: 20.2 MB
- Stars: 18
- Watchers: 2
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: readme.md
- License: license
Awesome Lists containing this project
README
# React Audio Player Pro
[](https://github.com/webbestmaster/react-audio-player-pro/blob/master/license)
[](https://www.npmjs.com/package/react-audio-player-pro)
[](https://snyk.io/test/github/webbestmaster/react-audio-player-pro)
[](https://libraries.io/npm/react-audio-player-pro)
[](https://bundlephobia.com/package/react-audio-player-pro)
[](https://nodejs.org/en/docs)
[](https://github.com/webbestmaster/react-audio-player-pro/actions/workflows/github-ci.yml)
[](https://github.com/webbestmaster/react-audio-player-pro/actions/workflows/github-ci.yml)
[](https://www.typescriptlang.org)
[](https://webbestmaster.github.io/react-audio-player-pro)
[](https://www.codefactor.io/repository/github/webbestmaster/react-audio-player-pro)
[](https://packagequality.com/#?package=react-audio-player-pro)
[](https://github.com/webbestmaster/react-audio-player-pro)
React Audio Player Pro provides: single audio, playlist and playlist provider.
**[Live demo](https://webbestmaster.github.io/react-audio-player-pro)**
## Install
```bash
npm i react-audio-player-pro
```
### Typing Flow
Use `./flow-typed/react-audio-player-pro.js`.
## Usage example <Audio/>
```javascript
import React from 'react';
import {AudioPlayerControlSprite, Audio} from 'react-audio-player-pro';
import 'react-audio-player-pro/dist/style.css';
const mediaMetadata = {
// required
title: 'Pure Water',
// optional
artist: 'Meydän',
// optional
album: 'Interplanetary Forest',
// optional
artwork: [
// src, sizes and type is required
{src: '/path/to/image/64px/64px', sizes: '64x64', type: 'image/png'},
{src: '/path/to/image/128px/128px', sizes: '128x128', type: 'image/png'},
],
};
export function ExampleAudio() {
return (
<>
downloadFileName="my-file.mp3"
// boolean - show repeat button, optional, deafult: false
useRepeatButton={true}
/>
>
);
}
```
## Usage example <AudioPlayer/>
```javascript
import React from 'react';
import {AudioPlayerControlSprite, AudioPlayer, TrackType} from 'react-audio-player-pro';
import 'react-audio-player-pro/dist/style.css';
const audioTrackList: Array = [
{
// string - path to audio file, required
src: '/path/to/audio/file',
// string - 'none' | 'metadata' | 'auto', default: 'auto', optional
preload: 'auto',
// duration - number, default: 0, optional
// will updated automatically when track started or metadata loaded
duration: 100,
// JSX.Element - custom content instead of title, optional, deafult: or
content: ,
// MediaMetadata - media meta data, see `mediaMetadata` above
// https://developer.mozilla.org/en-US/docs/Web/API/MediaMetadata/MediaMetadata
// optional
mediaMetadata: {
title: 'Lesser Faith',
artist: 'J. Syreus Bach',
album: 'Ability to Break ~ Energetic Tracks',
artwork: [
{src: '/path/to/image/64px/64px', sizes: '64x64', type: 'image/png'},
{src: '/path/to/image/128px/128px', sizes: '128x128', type: 'image/png'},
],
},
},
// other tracks here...
];
export function ExampleAudioPlayer() {
return (
<>
- list of track, see `audioTrackList` above, required
trackList={audioTrackList}
// string - wrapper's class name, optional, deafult: ''
className="my-class-name"
// callback function - called on did mount, optional, default: noop
onDidMount={console.log}
// default player state, optional
defaultState={{
// boolean - is player muted, optional, default: false
isMuted: false,
// number - active song index, optional, default: 0
activeIndex: 0,
// boolean - is shuffle on, optional, default: false
isShuffleOn: false,
// boolean - is track list open, optional, default: true
isTrackListOpen: true,
// string: 'none' | 'all' | 'one' - repeating state, optional, default: 'none'
repeatingState: 'none',
}}
/>
>
);
}
```
## Usage example <PlayListPanel/> and <PlayListProvider/>
```javascript
import React from 'react';
import {AudioPlayerControlSprite, PlayListPanel, PlayListProvider, AudioPlayer, TrackType} from 'react-audio-player-pro';
import 'react-audio-player-pro/dist/style.css';
const audioTrackList: Array = [
{
// string - path to audio file, required
src: '/path/to/audio/file',
// JSX.Element - custom content instead of title, optional, deafult: or
content: ,
// MediaMetadata - media meta data, see `mediaMetadata` above
// https://developer.mozilla.org/en-US/docs/Web/API/MediaMetadata/MediaMetadata
// optional
mediaMetadata: {
title: 'Lesser Faith',
artist: 'J. Syreus Bach',
album: 'Ability to Break ~ Energetic Tracks',
artwork: [
{src: '/path/to/image/64px/64px', sizes: '64x64', type: 'image/png'},
{src: '/path/to/image/128px/128px', sizes: '128x128', type: 'image/png'},
],
},
},
// other tracks here...
];
export function PlayListProvider() {
return (
<>
// No props
// PlayListProvider provide a button to add track to play list
// No props
>
);
}
```
## License
See [license](license).