{"id":13421988,"url":"https://github.com/Werter12/material-ui-audio-player","last_synced_at":"2025-03-15T10:31:33.520Z","repository":{"id":38429338,"uuid":"199013168","full_name":"Werter12/material-ui-audio-player","owner":"Werter12","description":"Audio player react component for material ui design","archived":false,"fork":false,"pushed_at":"2023-03-01T11:34:11.000Z","size":5501,"stargazers_count":77,"open_issues_count":20,"forks_count":23,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-22T23:34:14.689Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","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/Werter12.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2019-07-26T12:31:31.000Z","updated_at":"2024-12-06T16:03:30.000Z","dependencies_parsed_at":"2024-04-17T11:37:20.979Z","dependency_job_id":"827c6183-01b8-40a1-99d8-e914f7ec35a7","html_url":"https://github.com/Werter12/material-ui-audio-player","commit_stats":{"total_commits":185,"total_committers":10,"mean_commits":18.5,"dds":"0.11351351351351346","last_synced_commit":"f64507dae385e147f750e40e300ef0dcc67ee9ab"},"previous_names":[],"tags_count":39,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Werter12%2Fmaterial-ui-audio-player","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Werter12%2Fmaterial-ui-audio-player/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Werter12%2Fmaterial-ui-audio-player/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Werter12%2Fmaterial-ui-audio-player/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Werter12","download_url":"https://codeload.github.com/Werter12/material-ui-audio-player/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243719088,"owners_count":20336591,"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","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":[],"created_at":"2024-07-30T23:00:35.011Z","updated_at":"2025-03-15T10:31:32.965Z","avatar_url":"https://github.com/Werter12.png","language":"TypeScript","funding_links":[],"categories":["UI Components"],"sub_categories":["Audio / Video"],"readme":"# Material UI Audio Player\n\n[![NPM version](https://img.shields.io/npm/v/material-ui-audio-player.svg?style=flat)](https://www.npmjs.org/package/material-ui-audio-player)\n[![Build Status](https://travis-ci.com/Werter12/material-ui-audio-player.svg?branch=master)](https://travis-ci.com/github/Werter12/material-ui-audio-player)\n[![Package Size](https://img.shields.io/bundlephobia/min/material-ui-audio-player)](https://img.shields.io/bundlephobia/min/material-ui-audio-player)\n\nAudio player for material ui design developed with react.js. Requires Material UI 4 version.\n\n_Demo:_ https://werter12.github.io/material-ui-audio-player/\n\n## Base\n\nJust add your audio link to `src` and your ready to go.\n\n```javascript\nimport { createMuiTheme, ThemeProvider } from '@material-ui/core';\nimport AudioPlayer from 'material-ui-audio-player';\n\nconst muiTheme = createMuiTheme({});\n\n\u003cThemeProvider theme={muiTheme}\u003e\n  \u003cAudioPlayer src=\"https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3\" /\u003e\n\u003c/ThemeProvider\u003e;\n```\n\n## Available props\n\nA bunch of props will help to customize component.\n\n```javascript\nimport { createMuiTheme, ThemeProvider } from '@material-ui/core';\nimport AudioPlayer from 'material-ui-audio-player';\n\nconst muiTheme = createMuiTheme({});\n\nconst src = [\n  'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3',\n  'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.wav',\n];\n\n\u003cThemeProvider theme={muiTheme}\u003e\n  \u003cAudioPlayer\n    elevation={1}\n    width=\"100%\"\n    variation=\"default\"\n    spacing={3}\n    download={true}\n    autoplay={true}\n    order=\"standart\"\n    preload=\"auto\"\n    loop={true}\n    src={src}\n  /\u003e\n\u003c/ThemeProvider\u003e;\n```\n\n### `src`\n\nCould accept audio link or array of audio links.\n\n- _type:_ `string` | `array`\n- _required_\n\n### `width`\n\nCorresponds to style property `width`.\n\n- _default:_ `100%`\n- _type:_ `string`\n\n### `variation`\n\nComponent view variation.\n\n- _default:_ `default`\n- _options:_ `default`, `primary`, `secondary`\n- _type:_ `string`\n\n### `download`\n\nDisplay download button (icon) with dropdown of available audio tracks for download.\n\n- _default:_ `false`\n- _type:_ `boolean`\n\n### `volume`\n\nDisplay volume control button (icon).\n\n- _default:_ `true`\n- _type:_ `boolean`\n\n### `autoplay`\n\nCorresponds to HTML audio `autoplay` attribute.\n\n- _default:_ `false`\n- _type:_ `boolean`\n\n### `elevation`\n\nShadow depth. Corresponds to `elevation` prop of `Material Ui` `Paper` component.\n\n- _default:_ `1`\n- _type:_ `number`\n\n### `rounded`\n\nRounded corners of the container. Corresponds to `square` prop of `Material Ui` `Paper` component.\n\n- _default:_ `false`\n- _type:_ `boolean`\n\n### `spacing`\n\nSpacing for root `Grid` container. Corresponds to `spacing` prop of `Material Ui` `Grid` component.\n\n- _default:_ `3` (`2` - mobile)\n- _type:_ `number`\n\n### `order`\n\nOrder of `Slider` and controls buttons.\n\n- _default:_ `standart`\n- _options:_ `standart`, `reverse`\n- _type:_ `string`\n\n### `loop`\n\nDisplay loop button.\n\n- _default:_ `false`\n- _type:_ `boolean`\n\n### `preload`\n\nCorresponds to HTML audio attribute `preload`.\n\n- _default:_ `auto`\n- _type:_ `string`\n\n### `onPlayed`\n\nThis callback triggers when the player started play after pause or initial state\n\n- _type:_ `func`\n\n### `onPaused`\n\nThis callback triggers when the player paused after the play\n\n- _type:_ `func`\n\n### `onFinished`\n\nThis callback triggers when the player finish playing\n\n- _type:_ `func`\n\n### `onClose`\n\nThis callback triggers when you close the player with help of the close button `displayCloseButton`\n\n- _type:_ `func`\n\n### `time`\n\nThis prop helps to customize time displaying. `double` - means that two timers will be present. `single` - only one.\n\n- _default:_ `double`\n- _options:_ `double`, `single`\n- _type:_ `string`\n\n### `timePosition`\n\nThis prop helps to position `single` timer before (`start`) or after (`end`) the slider.\n\n- _default:_ `start`\n- _options:_ `start`, `end`\n- _type:_ `string`\n\n### `useStyles`\n\nThe attribute for customizing component styles. Accept the result of\n`makeStyles` function.\n\n- _type:_ `func`\n\n### `icons`\n\nProvide custom icon component from Material-ui icons for specific icon.\n\n- _type:_ `object`\n- _default:_\n\n```\n  const icons = {\n    PlayIcon: PlayCircleFilledWhite,\n    ReplayIcon: Replay,\n    PauseIcon: PauseCircleFilled,\n    VolumeUpIcon: VolumeUp,\n    VolumeOffIcon: VolumeOff,\n    CloseIcon: Close,\n  }\n```\n\n### `displaySlider`\n\nDisplay slider with time.\n\n- _default:_ `true`\n- _type:_ `boolean`\n\n### `displayCloseButton`\n\nDisplay close button (icon).\n\n- _default:_ `false`\n- _type:_ `boolean`\n\n### `muted`\n\nProp 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)\n\n- _default:_ `null`\n- _options:_ `true`, `false`\n- _type:_ `boolean`\n\n### `getPlayer`\n\nCallback 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.\n\n- _type:_ `func`\n-  function_params:_ `player`, `dispatch`\n\n## Customize component styles\n\n```javascript\nimport { createMuiTheme, ThemeProvider } from '@material-ui/core';\nimport AudioPlayer from 'material-ui-audio-player';\n\nconst muiTheme = createMuiTheme({});\n\nconst useStyles = makeStyles((theme) =\u003e {\n  return {\n    root: {\n      [theme.breakpoints.down('sm')]: {\n        width: '100%',\n      },\n    },\n    loopIcon: {\n      color: '#3f51b5',\n      '\u0026.selected': {\n        color: '#0921a9',\n      },\n      '\u0026:hover': {\n        color: '#7986cb',\n      },\n      [theme.breakpoints.down('sm')]: {\n        display: 'none',\n      },\n    },\n    playIcon: {\n      color: '#f50057',\n      '\u0026:hover': {\n        color: '#ff4081',\n      },\n    },\n    replayIcon: {\n      color: '#e6e600',\n    },\n    pauseIcon: {\n      color: '#0099ff',\n    },\n    volumeIcon: {\n      color: 'rgba(0, 0, 0, 0.54)',\n    },\n    volumeSlider: {\n      color: 'black',\n    },\n    progressTime: {\n      color: 'rgba(0, 0, 0, 0.54)',\n    },\n    mainSlider: {\n      color: '#3f51b5',\n      '\u0026 .MuiSlider-rail': {\n        color: '#7986cb',\n      },\n      '\u0026 .MuiSlider-track': {\n        color: '#3f51b5',\n      },\n      '\u0026 .MuiSlider-thumb': {\n        color: '#303f9f',\n      },\n    },\n  };\n});\n\n\u003cThemeProvider theme={muiTheme}\u003e\n  \u003cAudioPlayer\n    width=\"500px\"\n    useStyles={useStyles}\n    src=\"https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3\"\n    loop={true}\n  /\u003e\n\u003c/ThemeProvider\u003e;\n```\n\n### Available classes\n\n- root\n- playIcon\n- replayIcon\n- pauseIcon\n- volumeIcon\n- muteIcon\n- mainSlider\n- volumeSliderContainer\n- volumeSlider\n- downloadsIcon\n- pauseIcon\n- loopIcon\n- progressTime\n- downloadsContainer\n- downloadsItemLink\n- downloadsItemText\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FWerter12%2Fmaterial-ui-audio-player","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FWerter12%2Fmaterial-ui-audio-player","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FWerter12%2Fmaterial-ui-audio-player/lists"}