material-ui-audio-player
    TypeScript icon, indicating that this package has built-in type declarations

    1.7.1 • Public • Published

    Material UI Audio Player

    NPM version Build Status Package Size

    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

    Install

    npm i material-ui-audio-player

    DownloadsWeekly Downloads

    2,141

    Version

    1.7.1

    License

    MIT

    Unpacked Size

    104 kB

    Total Files

    59

    Last publish

    Collaborators

    • werter12