🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more

react-audio-player-pro

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-audio-player-pro

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

1.3.3
latest
Version published
Weekly downloads
213
50%
Maintainers
1
Weekly downloads
 
Created

React Audio Player Pro

GitHub license npm version Known Vulnerabilities Dependency count npm bundle size nodejs version Github CI GitHub Workflow Status Type definitions Website CodeFactor Package Quality GitHub stars

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

Live demo

Install

npm i react-audio-player-pro

Typing Flow

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

Usage example <Audio/>

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 (
        <>
            <AudioPlayerControlSprite/>
            <Audio
                // 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}

                // MediaMetadata - media meta data, optional
                // https://developer.mozilla.org/en-US/docs/Web/API/MediaMetadata/MediaMetadata
                mediaMetadata={mediaMetadata}

                // string - wrapper's class name, optional, deafult: ''
                className="my-class-name"

                // callback function - called on did mount, optional, default: noop
                onDidMount={console.log}

                // string - name for download file, optional, deafult: <src>
                downloadFileName="my-file.mp3"

                // boolean - show repeat button, optional, deafult: false
                useRepeatButton={true}
            />
        </>
    );
}

Usage example <AudioPlayer/>

import React from 'react';
import {AudioPlayerControlSprite, AudioPlayer, TrackType} from 'react-audio-player-pro';
import 'react-audio-player-pro/dist/style.css';

const audioTrackList: Array<TrackType> = [
    {
        // 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: <title> or <src>
        content: <CustomContent/>,

        // 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 (
        <>
            <AudioPlayerControlSprite/>
            <AudioPlayer
                // Array<TrackType> - 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/>

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<TrackType> = [
    {
        // string - path to audio file, required
        src: '/path/to/audio/file',

        // JSX.Element - custom content instead of title, optional, deafult: <title> or <src>
        content: <CustomContent/>,

        // 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 (
        <>
            <AudioPlayerControlSprite/>

            // No props
            <PlayListProvider>

                // PlayListProvider provide a button to add track to play list
                <AudioPlayer trackList={audioTrackList}/>

                // No props
                <PlayListPanel/>

            </PlayListProvider>
        </>
    );
}

License

See license.

FAQs

Package last updated on 19 May 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts