{"id":20995099,"url":"https://github.com/blackboxvision/mui-audio-player","last_synced_at":"2025-07-22T23:02:37.784Z","repository":{"id":34304374,"uuid":"147095892","full_name":"BlackBoxVision/mui-audio-player","owner":"BlackBoxVision","description":"🚀 Material-UI based Audio Player","archived":false,"fork":false,"pushed_at":"2022-12-02T10:42:17.000Z","size":2930,"stargazers_count":10,"open_issues_count":7,"forks_count":5,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-06-29T08:02:58.865Z","etag":null,"topics":["audio","library","material-ui","music","player","react"],"latest_commit_sha":null,"homepage":"https://blackboxvision.github.io/mui-audio-player/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/BlackBoxVision.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-09-02T15:05:27.000Z","updated_at":"2023-05-05T10:46:06.000Z","dependencies_parsed_at":"2023-01-15T06:09:49.789Z","dependency_job_id":null,"html_url":"https://github.com/BlackBoxVision/mui-audio-player","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/BlackBoxVision/mui-audio-player","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BlackBoxVision%2Fmui-audio-player","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BlackBoxVision%2Fmui-audio-player/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BlackBoxVision%2Fmui-audio-player/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BlackBoxVision%2Fmui-audio-player/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BlackBoxVision","download_url":"https://codeload.github.com/BlackBoxVision/mui-audio-player/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BlackBoxVision%2Fmui-audio-player/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266586840,"owners_count":23952200,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-22T02:00:09.085Z","response_time":66,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["audio","library","material-ui","music","player","react"],"created_at":"2024-11-19T07:21:36.685Z","updated_at":"2025-07-22T23:02:37.744Z","avatar_url":"https://github.com/BlackBoxVision.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# MUI Audio Player [![npm version](https://badge.fury.io/js/%40blackbox-vision%2Fmui-audio-player.svg)](https://badge.fury.io/js/%40blackbox-vision%2Fmui-audio-player) [![License: MIT](https://img.shields.io/badge/License-MIT-brightgreen.svg)](https://opensource.org/licenses/MIT) [![Known Vulnerabilities](https://snyk.io/test/github/blackboxvision/mui-audio-player/badge.svg)](https://snyk.io/test/github/blackboxvision/mui-audio-player)\n\nMaterial-UI based Audio Player. Check out the [demo](https://blackboxvision.github.io/mui-audio-player/).\n\n## Installation\n\n### NPM\n\n```bash\nnpm i @blackbox-vision/mui-audio-player\n```\n\n### YARN\n\n```bash\nyarn add @blackbox-vision/mui-audio-player\n```\n\n### Usage\n\nThe usage is really simple:\n\n```javascript\nimport React from 'react';\nimport Grid from '@material-ui/core/Grid';\n\nimport pink from '@material-ui/core/colors/pink';\nimport deepPurple from '@material-ui/core/colors/deepPurple';\n\nimport createTheme from '@material-ui/core/styles/createMuiTheme';\nimport ThemeProvider from '@material-ui/core/styles/MuiThemeProvider';\n\nimport { AudioPlayer } from '@blackbox-vision/mui-audio-player';\n\nconst theme = createTheme({\n  palette: {\n    type: 'light',\n    primary: deepPurple,\n    secondary: pink,\n  },\n});\n\nexport default class App extends React.Component {\n  render() {\n    return (\n      \u003cThemeProvider theme={theme}\u003e\n        \u003cGrid\n          justify=\"center\"\n          alignContent=\"center\"\n          alignItems=\"center\"\n          container\n          style={{ height: '100vh', backgroundColor: deepPurple['500'] }}\n        \u003e\n          \u003cGrid md={4} item /\u003e\n          \u003cGrid md={4} item\u003e\n            \u003cAudioPlayer\n              src=\"https://s9.converto.io/download-file/zwXZbmwDyWGN7qkqvVPMcQm0pIajpwdE/file.mp3\"\n              autoPlay={false}\n              rounded={true}\n              elevation={1}\n              width=\"100%\"\n            /\u003e\n          \u003c/Grid\u003e\n          \u003cGrid md={4} item /\u003e\n        \u003c/Grid\u003e\n      \u003c/ThemeProvider\u003e\n    );\n  }\n}\n```\n\nAs you can see in the example, this component is pretty well themeable.\n\n## Props\n\nThese are the properties used by the `AudioPlayer` component:\n\n| Properties | Types   | Default Value | Description                                                          |\n| ---------- | ------- | ------------- | -------------------------------------------------------------------- |\n| src        | string  | none          | Determines the url used by the player to load the audio source.      |\n| autoPlay   | boolean | false         | Determines if the player starts reproducing the audio automatically. |\n| rounded    | boolean | false         | Determines if the player container has rounded borders.              |\n| elevation  | number  | 1             | Determines if the player container has box-shadow applied.           |\n| width      | string  | 500px         | Determines the width of the player.                                  |\n| height     | string  | 45px          | Determines the height of the player.                                 |\n| classNames | object  | {}            | Determines the classNames to be applied. (\\*)                        |\n\n(\\*) `classNames` is a special property:\n\n| Properties          | Types  | Default Value | Description                                                       |\n| ------------------- | ------ | ------------- | ----------------------------------------------------------------- |\n| classNames.player   | string | none          | Determines the className to be applied to the root container.     |\n| classNames.loopIcon | string | none          | Determines the classNames to be applied to the loop icon element. |\n| classNames.playIcon | string | none          | Determines the classNames to be applied to the play icon element. |\n| classNames.muteIcon | string | none          | Determines the classNames to be applied to the mute icon element. |\n| classNames.slider   | string | none          | Determines the classNames to be applied to the slider element.    |\n| classNames.track    | string | none          | Determines the classNames to be applied to the track element.     |\n| classNames.thumb    | string | none          | Determines the classNames to be applied to the thumb element.     |\n| classNames.text     | string | none          | Determines the classNames to be applied to the text element.      |\n\n## TODO\n\n- [ ] Add `volume bar`.\n- [ ] Add more tests.\n- [ ] Add better styles for responsive design.\n\n## Issues\n\nPlease, 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.\n\n## Contributing\n\nIf you want to contribute to this project see [contributing](https://github.com/BlackBoxVision/mui-audio-player/blob/master/CONTRIBUTING.md) for more information.\n\n## License\n\nDistributed under the MIT license. See [LICENSE](https://github.com/BlackBoxVision/mui-audio-player/blob/master/LICENSE) for more information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblackboxvision%2Fmui-audio-player","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fblackboxvision%2Fmui-audio-player","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblackboxvision%2Fmui-audio-player/lists"}