MUI Audio Player

Material-UI based Audio Player. Check out the demo.

Installation

NPM

npm i @blackbox-vision/mui-audio-player

YARN

yarn add @blackbox-vision/mui-audio-player

Usage

The usage is really simple:

import React from 'react';
import Grid from '@material-ui/core/Grid';

import pink from '@material-ui/core/colors/pink';
import deepPurple from '@material-ui/core/colors/deepPurple';

import createTheme from '@material-ui/core/styles/createMuiTheme';
import ThemeProvider from '@material-ui/core/styles/MuiThemeProvider';

import { AudioPlayer } from '@blackbox-vision/mui-audio-player';

const theme = createTheme({
  palette: {
    type: 'light',
    primary: deepPurple,
    secondary: pink,
  },
});

export default class App extends React.Component {
  render() {
    return (
      <ThemeProvider theme={theme}>
        <Grid
          justify="center"
          alignContent="center"
          alignItems="center"
          container
          style={{ height: '100vh', backgroundColor: deepPurple['500'] }}
        >
          <Grid md={4} item />
          <Grid md={4} item>
            <AudioPlayer
              src="https://s9.converto.io/download-file/zwXZbmwDyWGN7qkqvVPMcQm0pIajpwdE/file.mp3"
              autoPlay={false}
              rounded={true}
              elevation={1}
              width="100%"
            />
          </Grid>
          <Grid md={4} item />
        </Grid>
      </ThemeProvider>
    );
  }
}

As you can see in the example, this component is pretty well themeable.

Props

These are the properties used by the AudioPlayer component:

| Properties | Types | Default Value | Description | | ---------- | ------- | ------------- | -------------------------------------------------------------------- | | src | string | none | Determines the url used by the player to load the audio source. | | autoPlay | boolean | false | Determines if the player starts reproducing the audio automatically. | | rounded | boolean | false | Determines if the player container has rounded borders. | | elevation | number | 1 | Determines if the player container has box-shadow applied. | | width | string | 500px | Determines the width of the player. | | height | string | 45px | Determines the height of the player. | | classNames | object | {} | Determines the classNames to be applied. (*) |

(*) classNames is a special property:

| Properties | Types | Default Value | Description | | ------------------- | ------ | ------------- | ----------------------------------------------------------------- | | classNames.player | string | none | Determines the className to be applied to the root container. | | classNames.loopIcon | string | none | Determines the classNames to be applied to the loop icon element. | | classNames.playIcon | string | none | Determines the classNames to be applied to the play icon element. | | classNames.muteIcon | string | none | Determines the classNames to be applied to the mute icon element. | | classNames.slider | string | none | Determines the classNames to be applied to the slider element. | | classNames.track | string | none | Determines the classNames to be applied to the track element. | | classNames.thumb | string | none | Determines the classNames to be applied to the thumb element. | | classNames.text | string | none | Determines the classNames to be applied to the text element. |

TODO

• [ ] Add volume bar.
• [ ] Add more tests.
• [ ] Add better styles for responsive design.

Issues

Please, open an issue following one of the issues templates. We will do our best to fix them.

Contributing

If you want to contribute to this project see contributing for more information.

License

Distributed under the MIT license. See LICENSE for more information.