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-2.mp3',
];
<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.
-
default:
1
-
type:
number
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
-
type:
func
onPaused
This callback triggers when the player paused after the play
-
type:
func
onFinished
This callback triggers when the player finish playing
-
type:
func
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.
-
type:
func
icons
Provide custom icon component from Material-ui icons for specific icon.
-
type:
object
- default:
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
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