# react-moskaj-audio-player > react h5 audio with customized icons_A React audio player with UI. Mobile compatible. Latest version **1.0.17** (published 2020-02-03) · MIT license · 0 weekly downloads ## Install ```sh npm install react-moskaj-audio-player pnpm add react-moskaj-audio-player yarn add react-moskaj-audio-player bun add react-moskaj-audio-player ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.0.17 | | Published | 2020-02-03 | | First published | 2019-12-29 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 2 | | Unpacked size | 53.1 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Author | NPM moskaj audio player | | Maintainers | moskaj | | Keywords | react, component, music, audio, player, mobile | ## Links - npm: https://www.npmjs.com/package/react-moskaj-audio-player - npm.io page: https://npm.io/package/react-moskaj-audio-player ## Dependencies (2) - [@iconify/react](https://npm.io/package/@iconify/react.md) ^1.1.1 - [@iconify/icons-mdi](https://npm.io/package/@iconify/icons-mdi.md) ^1.0.47 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 1.0.17 (latest) — 2020-02-03 - 1.0.16 — 2020-02-03 - 1.0.15 — 2020-01-14 - 1.0.14 — 2020-01-14 - 1.0.13 — 2020-01-13 - 1.0.11 — 2020-01-13 - 1.0.10 — 2020-01-12 - 1.0.9 — 2020-01-12 - 1.0.8 — 2020-01-10 - 1.0.7 — 2020-01-10 - 1.0.6 — 2019-12-29 - 1.0.5 — 2019-12-29 - 1.0.4 — 2019-12-29 - 1.0.3 — 2019-12-29 - 1.0.2 — 2019-12-29 - … 2 more at https://npm.io/package/react-moskaj-audio-player/versions ## README # React MoskaJ Audio Player * Based on React H5 Audio Player * Audio player component that provides consistent UI on different browsers. * Flexbox layout with SVG icons. Mobile friendly. * Accessibility supported, keyboards friendly. * Written in TypeScript. ![screenshot](http://uupload.ir/files/ct4f_react-moskaj-audio-player.png) Supported browsers: Chrome, Firefox, Safari, Opera, Edge, IE (≥10) ## Installation `$ npm i react-moskaj-audio-player` Or `$ yarn add react-moskaj-audio-player` ## Usage ```jsx import AudioPlayer from 'react-moskaj-audio-player'; import 'react-moskaj-audio-player/lib/styles.css'; const Player = () => ( console.log("onPlay")} // other props here /> ); ``` ## Props ### HTML Audio Tag Native Attributes | Props | Type | Default | Note | | ----------- | :-----: | :-------: | :-------------------:| | src | String | '' | | | preload | String | 'auto' | | | autoPlay | Boolean | false | Won't work on mobile | | loop | Boolean | false | | | muted | Boolean | false | | | loop | Boolean | false | | | volume | Number | 1.0 | Won't work on mobile | | crossOrigin | String | undefined | | | mediaGroup | String | undefined | | More native attributes detail: [MDN Audio element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio) The `controls` attribute defaults to `false` and should never be changed to `true` because this library is already providing UI. ### Other Props #### showVolumeControl {Boolean} [true] Show volume bar and mute button #### showLoopControl {Boolean} [true] Show loop toggle button #### showSkipControls {Boolean} [false] Show previous/Next buttons #### showJumpControls {Boolean} [true] Show Rewind/Forward buttons #### onClickPrevious {Function (event)} Called when click Previous button #### onClickNext {Function (event)} Called when click Next button #### onPlayError {Function (error)} Called when there's error clicking play button #### progressJumpStep {Number} [5000] Indicates the jump step when clicking rewind/forward button or left/right arrow key #### volumeJumpStep {Number} [.1] Indicates the jump step when pressing up/down arrow key #### progressUpdateInterval {Number} [20] Indicates the interval that the progress bar UI updates. #### listenInterval {Number} [1000] Indicates how often to call the `onListened` prop during playback, in milliseconds. #### onAbort {Function (event)} Called when unloading the audio player, like when switching to a different src file. Passed the event. #### onCanPlay {Function (event)} Called when enough of the file has been downloaded to be able to start playing. #### onEnded {Function (event)} Called when playback has finished to the end of the file. Passed the event. #### onError {Function (event)} Called when the audio tag encounters an error. Passed the event. #### onListen {Function (currentTime)} Called every `listenInterval` milliseconds during playback. #### onPause {Function (event)} Called when the user pauses playback. Passed the event. #### onPlay {Function (event)} Called when the user taps play. ## UI Overwrites React moskaj Audio Player provides built-in class names and SASS/LESS variables for developers to overwrite. ### SASS variables - $rhap_theme-color: #868686 !default; - $rhap_background-color: #fff !default; - $rhap_bar-color: #e4e4e4 !default; - $rhap_time-color: #333 !default; - $rhap_font-family: inherit !default; For LESS variables, just replace `$` with `@`. ## Advanced Usage ### Access to the audio element You can get direct access to the underlying audio element. First get a ref to ReactAudioPlayer: ```jsx (this.player = c)} /> // Use `createRef` also works ``` Then you can access the audio element like this: `this.player.audio` ## Migrations ### Breaking changes from 1.x to 2.x - Removed inline styles, import `css` or `scss` manually - Removed props `hidePlayer` - Use parent logic to hide player - Removed props `onDragStart`, `onDragMove`, `onDragEnd` - V2 isn't using drag events anymore ### Breaking changes from 0.x to 1.x In 1.x, we use `prop-types` package instead of using it directly in React. Thus we dropped support under `react@15.5.0`. The usage will remain the same. ## How to contribute Issues and PR's are welcome. ## Credits - Inspired by [React Audio Player](https://github.com/justinmc/react-audio-player). - Icon wrapper [iconify](https://iconify.design/) - Icons [Material Design Icons](https://github.com/Templarian/MaterialDesign) --- _Source: https://npm.io/package/react-moskaj-audio-player · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._