material-ui-audio-player alternatives and similar libraries
Based on the "Audio / Video" category.
Alternatively, view material-ui-audio-player alternatives based on common mentions on social networks and blogs.
-
react-player
A react component for playing a variety of URLs, including file paths, YouTube, SoundCloud and Vimeo. -
react-soundplayer
Create custom SoundCloud players with React. -
react-youtube
React.js powered YouTube player component. -
react-video
React component to load video from Vimeo or Youtube across any device. -
react-dailymotion
Dailymotion player component for React.
Get performance insights in less than 4 minutes
* Code Quality Rankings and insights are calculated and provided by Lumnify.
They vary from L1 to L5 with "L5" being the highest. Visit our partner's website for more details.
Do you think we are missing an alternative of material-ui-audio-player or a related project?
README
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://converter-audio-example-1.s3.eu-central-1.amazonaws.com/Russell%2C%2BMale%2B-%2BEnglish%2C%2BAustralian+(1)+(online-audio-converter.com).wav',
'https://converter-audio-examples.s3.eu-central-1.amazonaws.com/Russell%2C+Male+-+English%2C+Australian.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
}
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
- volumeSlider
- downloadsIcon
- pauseIcon
- loopIcon
- progressTime
- downloadsContainer
- downloadsItemLink
- downloadsItemText