material-ui-audio-player

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,
    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
• volumeSlider
• downloadsIcon
• pauseIcon
• loopIcon
• progressTime
• downloadsContainer
• downloadsItemLink
• downloadsItemText

Changelog

1.6.0 - 2021-02-28

Added

• Add displaySlider prop
• Add Small AudioPlayer story
• Add CloseIcon with displayCloseButton prop