Popularity
0.9
Growing
Activity
7.5
Growing
12
0
5

Monthly Downloads: 0
Programming language: TypeScript
Tags: UI Components     Audio / Video    
Latest version: v1.1.7

material-ui-audio-player alternatives and similar libraries

Based on the "Audio / Video" category

Do you think we are missing an alternative of material-ui-audio-player or a related project?

Add another 'Audio / Video' Library

README

Material UI Audio Player

Dependency Status NPM version Build Status

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

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

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