Material UI Audio Player
Audio player for material ui design developed with react.js. Requires Material UI 4 version.
Demo: https://werter12.github.io/material-ui-audio-player/
Base
Just add your audio link to src
and your ready to go.
import { createMuiTheme, ThemeProvider } from '@material-ui/core';
import AudioPlayer from 'material-ui-audio-player';
const muiTheme = createMuiTheme({});
<ThemeProvider theme={muiTheme}>
<AudioPlayer src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" />
</ThemeProvider>;
Available props
A bunch of props will help to customize component.
import { createMuiTheme, ThemeProvider } from '@material-ui/core';
import AudioPlayer from 'material-ui-audio-player';
const muiTheme = createMuiTheme({});
const src = [
'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3',
'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.wav',
];
<ThemeProvider theme={muiTheme}>
<AudioPlayer
elevation={1}
width="100%"
variation="default"
spacing={3}
download={true}
autoplay={true}
order="standart"
preload="auto"
loop={true}
src={src}
/>
</ThemeProvider>;
src
Could accept audio link or array of audio links.
- type:
string
| array
- required
width
Corresponds to style property width
.
- default:
100%
- type:
string
variation
Component view variation.
- default:
default
- options:
default
, primary
, secondary
- type:
string
download
Display download button (icon) with dropdown of available audio tracks for download.
- default:
false
- type:
boolean
volume
Display volume control button (icon).
- default:
true
- type:
boolean
autoplay
Corresponds to HTML audio autoplay
attribute.
- default:
false
- type:
boolean
elevation
Shadow depth. Corresponds to elevation
prop of Material Ui
Paper
component.
rounded
Rounded corners of the container. Corresponds to square
prop of Material Ui
Paper
component.
- default:
false
- type:
boolean
spacing
Spacing for root Grid
container. Corresponds to spacing
prop of Material Ui
Grid
component.
- default:
3
(2
- mobile) - type:
number
order
Order of Slider
and controls buttons.
- default:
standart
- options:
standart
, reverse
- type:
string
loop
Display loop button.
- default:
false
- type:
boolean
preload
Corresponds to HTML audio attribute preload
.
- default:
auto
- type:
string
onPlayed
This callback triggers when the player started play after pause or initial state
onPaused
This callback triggers when the player paused after the play
onFinished
This callback triggers when the player finish playing
onClose
This callback triggers when you close the player with help of the close button displayCloseButton
time
This prop helps to customize time displaying. double
- means that two timers will be present. single
- only one.
- default:
double
- options:
double
, single
- type:
string
timePosition
This prop helps to position single
timer before (start
) or after (end
) the slider.
- default:
start
- options:
start
, end
- type:
string
useStyles
The attribute for customizing component styles. Accept the result of
makeStyles
function.
icons
Provide custom icon component from Material-ui icons for specific icon.
const icons = {
PlayIcon: PlayCircleFilledWhite,
ReplayIcon: Replay,
PauseIcon: PauseCircleFilled,
VolumeUpIcon: VolumeUp,
VolumeOffIcon: VolumeOff,
CloseIcon: Close,
}
displaySlider
Display slider with time.
- default:
true
- type:
boolean
displayCloseButton
Display close button (icon).
- default:
false
- type:
boolean
muted
Prop for controling mute state of the audio and volume button. (By default is null. When any boolean passed, the mute state for button and audio will be completly controlled from external source)
- default:
null
- options:
true
, false
- type:
boolean
getPlayer
Callback for getting access to HTML audio player instance and dispatch
react function (from useReducer
) in order to change player's state directly (programmatically). Check out Controlled AudioPlayer
section in the storybook.
- type:
func
- function_params:_
player
, dispatch
Customize component styles
import { createMuiTheme, ThemeProvider } from '@material-ui/core';
import AudioPlayer from 'material-ui-audio-player';
const muiTheme = createMuiTheme({});
const useStyles = makeStyles((theme) => {
return {
root: {
[theme.breakpoints.down('sm')]: {
width: '100%',
},
},
loopIcon: {
color: '#3f51b5',
'&.selected': {
color: '#0921a9',
},
'&:hover': {
color: '#7986cb',
},
[theme.breakpoints.down('sm')]: {
display: 'none',
},
},
playIcon: {
color: '#f50057',
'&:hover': {
color: '#ff4081',
},
},
replayIcon: {
color: '#e6e600',
},
pauseIcon: {
color: '#0099ff',
},
volumeIcon: {
color: 'rgba(0, 0, 0, 0.54)',
},
volumeSlider: {
color: 'black',
},
progressTime: {
color: 'rgba(0, 0, 0, 0.54)',
},
mainSlider: {
color: '#3f51b5',
'& .MuiSlider-rail': {
color: '#7986cb',
},
'& .MuiSlider-track': {
color: '#3f51b5',
},
'& .MuiSlider-thumb': {
color: '#303f9f',
},
},
};
});
<ThemeProvider theme={muiTheme}>
<AudioPlayer
width="500px"
useStyles={useStyles}
src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"
loop={true}
/>
</ThemeProvider>;
Available classes
- root
- playIcon
- replayIcon
- pauseIcon
- volumeIcon
- muteIcon
- mainSlider
- volumeSliderContainer
- volumeSlider
- downloadsIcon
- pauseIcon
- loopIcon
- progressTime
- downloadsContainer
- downloadsItemLink
- downloadsItemText