
Security News
NIST Under Federal Audit for NVD Processing Backlog and Delays
As vulnerability data bottlenecks grow, the federal government is formally investigating NIST’s handling of the National Vulnerability Database.
react-audio-player-pro
Advanced tools
React Audio Player Pro provides: single audio, playlist and playlist provider
React Audio Player Pro provides: single audio, playlist and playlist provider.
npm i react-audio-player-pro
Use ./flow-typed/react-audio-player-pro.js
.
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}
/>
</>
);
}
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',
}}
/>
</>
);
}
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>
</>
);
}
See license.
FAQs
React Audio Player Pro provides: single audio, playlist and playlist provider
The npm package react-audio-player-pro receives a total of 294 weekly downloads. As such, react-audio-player-pro popularity was classified as not popular.
We found that react-audio-player-pro demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
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.
Security News
As vulnerability data bottlenecks grow, the federal government is formally investigating NIST’s handling of the National Vulnerability Database.
Research
Security News
Socket’s Threat Research Team has uncovered 60 npm packages using post-install scripts to silently exfiltrate hostnames, IP addresses, DNS servers, and user directories to a Discord-controlled endpoint.
Security News
TypeScript Native Previews offers a 10x faster Go-based compiler, now available on npm for public testing with early editor and language support.