MUI Audio Player

Material-UI based Audio Player.

Installation

You can install this library via NPM or YARN.

NPM

npm i mui-audio-player

YARN

yarn add mui-audio-player

Usage

You can check it out the basic usage example. Or:

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 '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	keys	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.

Issues

If you found a bug, or you have an answer, or whatever. Please, open an issue. We will do our best to fix it.

Contributing

Of course, if you see something that you want to upgrade from this library, or a bug that needs to be solved, PRs are welcome!

License

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