Awesome

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.

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

`onClose`

This callback triggers when you close the player with help of the close button displayCloseButton

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

`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