https://github.com/blackboxvision/mui-audio-player
🚀 Material-UI based Audio Player
https://github.com/blackboxvision/mui-audio-player
audio library material-ui music player react
Last synced: 11 months ago
JSON representation
🚀 Material-UI based Audio Player
- Host: GitHub
- URL: https://github.com/blackboxvision/mui-audio-player
- Owner: BlackBoxVision
- License: mit
- Created: 2018-09-02T15:05:27.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2022-12-02T10:42:17.000Z (over 3 years ago)
- Last Synced: 2025-06-29T08:02:58.865Z (12 months ago)
- Topics: audio, library, material-ui, music, player, react
- Language: TypeScript
- Homepage: https://blackboxvision.github.io/mui-audio-player/
- Size: 2.79 MB
- Stars: 10
- Watchers: 3
- Forks: 5
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# MUI Audio Player [](https://badge.fury.io/js/%40blackbox-vision%2Fmui-audio-player) [](https://opensource.org/licenses/MIT) [](https://snyk.io/test/github/blackboxvision/mui-audio-player)
Material-UI based Audio Player. Check out the [demo](https://blackboxvision.github.io/mui-audio-player/).
## Installation
### NPM
```bash
npm i @blackbox-vision/mui-audio-player
```
### YARN
```bash
yarn add @blackbox-vision/mui-audio-player
```
### Usage
The usage is really simple:
```javascript
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 (
);
}
}
```
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](https://github.com/BlackBoxVision/mui-audio-player/issues) 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](https://github.com/BlackBoxVision/mui-audio-player/blob/master/CONTRIBUTING.md) for more information.
## License
Distributed under the MIT license. See [LICENSE](https://github.com/BlackBoxVision/mui-audio-player/blob/master/LICENSE) for more information.