React Audio Player Pro

React Audio Player Pro provides: single audio, playlist and playlist provider.

Live demo

Install

1npm i react-audio-player-pro

Typing Flow

Use ./flow-typed/react-audio-player-pro.js.

Usage example <Audio/>

1import React from 'react';
2import {AudioPlayerControlSprite, Audio} from 'react-audio-player-pro';
3import 'react-audio-player-pro/dist/style.css';
4
5const mediaMetadata = {
6
7    // required
8    title: 'Pure Water',
9
10    // optional
11    artist: 'Meydän',
12
13    // optional
14    album: 'Interplanetary Forest',
15
16    // optional
17    artwork: [
18
19        // src, sizes and type is required
20        {src: '/path/to/image/64px/64px', sizes: '64x64', type: 'image/png'},
21        {src: '/path/to/image/128px/128px', sizes: '128x128', type: 'image/png'},
22    ],
23};
24
25export function ExampleAudio() {
26    return (
27        <>
28            <AudioPlayerControlSprite/>
29            <Audio
30                // string - path to audio file, required
31                src="/path/to/audio/file"
32
33                // string - 'none' | 'metadata' | 'auto', default: 'auto', optional
34                preload="auto"
35
36                // duration - number, default: 0, optional
37                // will updated automatically when track started or metadata loaded
38                duration={100}
39
40                // MediaMetadata - media meta data, optional
41                // https://developer.mozilla.org/en-US/docs/Web/API/MediaMetadata/MediaMetadata
42                mediaMetadata={mediaMetadata}
43
44                // string - wrapper's class name, optional, deafult: ''
45                className="my-class-name"
46
47                // callback function - called on did mount, optional, default: noop
48                onDidMount={console.log}
49
50                // string - name for download file, optional, deafult: <src>
51                downloadFileName="my-file.mp3"
52
53                // boolean - show repeat button, optional, deafult: false
54                useRepeatButton={true}
55            />
56        </>
57    );
58}

Usage example <AudioPlayer/>

1import React from 'react';
2import {AudioPlayerControlSprite, AudioPlayer, TrackType} from 'react-audio-player-pro';
3import 'react-audio-player-pro/dist/style.css';
4
5const audioTrackList: Array<TrackType> = [
6    {
7        // string - path to audio file, required
8        src: '/path/to/audio/file',
9
10        // string - 'none' | 'metadata' | 'auto', default: 'auto', optional
11        preload: 'auto',
12
13        // duration - number, default: 0, optional
14        // will updated automatically when track started or metadata loaded
15        duration: 100,
16
17        // JSX.Element - custom content instead of title, optional, deafult: <title> or <src>
18        content: <CustomContent/>,
19
20        // MediaMetadata - media meta data, see `mediaMetadata` above
21        // https://developer.mozilla.org/en-US/docs/Web/API/MediaMetadata/MediaMetadata
22        // optional
23        mediaMetadata: {
24            title: 'Lesser Faith',
25            artist: 'J. Syreus Bach',
26            album: 'Ability to Break ~ Energetic Tracks',
27            artwork: [
28                {src: '/path/to/image/64px/64px', sizes: '64x64', type: 'image/png'},
29                {src: '/path/to/image/128px/128px', sizes: '128x128', type: 'image/png'},
30            ],
31        },
32    },
33    // other tracks here...
34];
35
36export function ExampleAudioPlayer() {
37    return (
38        <>
39            <AudioPlayerControlSprite/>
40            <AudioPlayer
41                // Array<TrackType> - list of track, see `audioTrackList` above, required
42                trackList={audioTrackList}
43
44                // string - wrapper's class name, optional, deafult: ''
45                className="my-class-name"
46
47                // callback function - called on did mount, optional, default: noop
48                onDidMount={console.log}
49
50                // default player state, optional
51                defaultState={{
52                    // boolean - is player muted, optional, default: false
53                    isMuted: false,
54
55                    // number - active song index, optional, default: 0
56                    activeIndex: 0,
57
58                    // boolean - is shuffle on, optional, default: false
59                    isShuffleOn: false,
60
61                    // boolean - is track list open, optional, default: true
62                    isTrackListOpen: true,
63
64                    // string: 'none' | 'all' | 'one' - repeating state, optional, default: 'none'
65                    repeatingState: 'none',
66                }}
67            />
68        </>
69    );
70}

Usage example <PlayListPanel/> and <PlayListProvider/>

1import React from 'react';
2import {AudioPlayerControlSprite, PlayListPanel, PlayListProvider, AudioPlayer, TrackType} from 'react-audio-player-pro';
3import 'react-audio-player-pro/dist/style.css';
4
5const audioTrackList: Array<TrackType> = [
6    {
7        // string - path to audio file, required
8        src: '/path/to/audio/file',
9
10        // JSX.Element - custom content instead of title, optional, deafult: <title> or <src>
11        content: <CustomContent/>,
12
13        // MediaMetadata - media meta data, see `mediaMetadata` above
14        // https://developer.mozilla.org/en-US/docs/Web/API/MediaMetadata/MediaMetadata
15        // optional
16        mediaMetadata: {
17            title: 'Lesser Faith',
18            artist: 'J. Syreus Bach',
19            album: 'Ability to Break ~ Energetic Tracks',
20            artwork: [
21                {src: '/path/to/image/64px/64px', sizes: '64x64', type: 'image/png'},
22                {src: '/path/to/image/128px/128px', sizes: '128x128', type: 'image/png'},
23            ],
24        },
25    },
26    // other tracks here...
27];
28
29export function PlayListProvider() {
30    return (
31        <>
32            <AudioPlayerControlSprite/>
33
34            // No props
35            <PlayListProvider>
36
37                // PlayListProvider provide a button to add track to play list
38                <AudioPlayer trackList={audioTrackList}/>
39
40                // No props
41                <PlayListPanel/>
42
43            </PlayListProvider>
44        </>
45    );
46}

License

See license.