├── .eslintrc.js ├── .gitignore ├── .prettierrc.js ├── LICENSE ├── README.md ├── dist ├── react-aplayer.min.js └── react-aplayer.min.js.map ├── package-lock.json ├── package.json ├── public ├── index.html └── manifest.json ├── src ├── app.css ├── app.js ├── data-legacy-format.json ├── data.js ├── events.js ├── index.js └── react-aplayer.js ├── webpack.config.js └── yarn.lock /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: ['prettier'], 3 | rules: { 4 | 'prettier/prettier': 'error' 5 | } 6 | }; 7 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .idea 2 | node_modules/ 3 | build/ 4 | yarn-error.log 5 | -------------------------------------------------------------------------------- /.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | singleQuote: true, 3 | trailingComma: 'es5', 4 | overrides: [ 5 | { 6 | files: ['src/**/*.json'], 7 | options: { parser: 'json' } 8 | }, 9 | { 10 | files: ['src/**/*.css'], 11 | options: { 12 | tabWidth: 4 13 | } 14 | }, 15 | { 16 | files: ['*.js', '.*.js'], 17 | options: { 18 | trailingComma: 'none' 19 | } 20 | } 21 | ] 22 | }; 23 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Hiitea, Sabrina Luo 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | # React-APlayer 3 | [![npm](https://img.shields.io/npm/v/react-aplayer.svg)](https://www.npmjs.com/package/react-aplayer) 4 | [![GitHub tag](https://img.shields.io/github/tag/sabrinaluo/react-aplayer.svg)](https://github.com/sabrinaluo/react-aplayer/releases) [![npm](https://img.shields.io/npm/dm/react-aplayer.svg)](https://www.npmjs.com/package/react-aplayer) [![license](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/sabrinaluo/react-aplayer/blob/master/LICENSE) 5 | 6 | 🍭 Wow, A react wrapper of the beautiful HTML5 music [APlayer](https://github.com/MoePlayer/APlayer) 7 | 8 | ## Introduction 9 | [Demo](http://sabrinaluo.github.io/react-aplayer/) 10 | 11 | ### List with lyrics 12 | ![image](https://user-images.githubusercontent.com/5300359/38107595-f7fd325a-33c4-11e8-9a9a-5d60613c9458.png) 13 | 14 | ### :star2: Fixed Mode 15 | ![image](https://user-images.githubusercontent.com/5300359/38107623-11ad0874-33c5-11e8-8e0b-1e9625571e4b.png) 16 | 17 | ## Usage 18 | 19 | ### Install 20 | ``` 21 | npm install react-aplayer --save 22 | ``` 23 | 24 | ### Example 25 | Check `src/app.js` to get more example; 26 | 27 | ```javascript 28 | import React from 'react'; 29 | import ReactAplayer from 'react-aplayer'; 30 | 31 | export default class App extends React.Component { 32 | // event binding example 33 | onPlay = () => { 34 | console.log('on play'); 35 | }; 36 | 37 | onPause = () => { 38 | console.log('on pause'); 39 | }; 40 | 41 | // example of access aplayer instance 42 | onInit = ap => { 43 | this.ap = ap; 44 | }; 45 | 46 | render() { 47 | const props = { 48 | theme: '#F57F17', 49 | lrcType: 3, 50 | audio: [ 51 | { 52 | name: '光るなら', 53 | artist: 'Goose house', 54 | url: 'https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.mp3', 55 | cover: 'https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.jpg', 56 | lrc: 'https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.lrc', 57 | theme: '#ebd0c2' 58 | } 59 | ] 60 | }; 61 | 62 | return ( 63 |
64 | 70 | {/* example of access aplayer instance API */} 71 | 72 |
73 | ); 74 | } 75 | } 76 | ``` 77 | 78 | ### Props 79 | **`onInit`** as a callback function will be invoked when aplayer instance get initialized and with the instance as parameter, through which you can get the full control of aplayer API. *see `onInit` in above example* 80 | 81 | Other props are exactly the same with original APlayer, please check the [docs](https://aplayer.js.org/#/home) for more details. 82 | 83 | ### Event Handlers 84 | Event handlers are triggered when corresponding event happens, it takes a callback function as parameter. 85 | 86 | All the event handlers in `react-aplayer` are in a format of captalized event name prefixed with `on`, e.g. in aplayer, event `play` will be `onPlay` in react-aplayer, 87 | 88 | Please check the [docs](https://aplayer.js.org/#/home?id=event-binding) for more events. 89 | 90 | ### APlayer Instance 91 | APlayer Instance can be accessed through `onInit` 92 | 93 | ## LICENSE 94 | [MIT License](https://github.com/sabrinaluo/react-aplayer/blob/master/LICENSE) 95 | -------------------------------------------------------------------------------- /dist/react-aplayer.min.js: -------------------------------------------------------------------------------- 1 | !function(e,a){if("object"===typeof exports&&"object"===typeof module)module.exports=a(require("react"),require("prop-types"),require("aplayer"));else if("function"===typeof define&&define.amd)define(["react","prop-types","aplayer"],a);else{var r="object"===typeof exports?a(require("react"),require("prop-types"),require("aplayer")):a(e.react,e["prop-types"],e.aplayer);for(var t in r)("object"===typeof exports?exports:e)[t]=r[t]}}(this,function(e,a,r){return function(e){function a(t){if(r[t])return r[t].exports;var o=r[t]={i:t,l:!1,exports:{}};return e[t].call(o.exports,o,o.exports,a),o.l=!0,o.exports}var r={};return a.m=e,a.c=r,a.d=function(e,r,t){a.o(e,r)||Object.defineProperty(e,r,{configurable:!1,enumerable:!0,get:t})},a.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(r,"a",r),r},a.o=function(e,a){return Object.prototype.hasOwnProperty.call(e,a)},a.p="",a(a.s=0)}([function(e,a,r){"use strict";function t(e){return e&&e.__esModule?e:{default:e}}function o(e,a){var r={};for(var t in e)a.indexOf(t)>=0||Object.prototype.hasOwnProperty.call(e,t)&&(r[t]=e[t]);return r}function l(e,a){if(!(e instanceof a))throw new TypeError("Cannot call a class as a function")}function i(e,a){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!a||"object"!==typeof a&&"function"!==typeof a?e:a}function n(e,a){if("function"!==typeof a&&null!==a)throw new TypeError("Super expression must either be null or a function, not "+typeof a);e.prototype=Object.create(a&&a.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),a&&(Object.setPrototypeOf?Object.setPrototypeOf(e,a):e.__proto__=a)}Object.defineProperty(a,"__esModule",{value:!0});var p=Object.assign||function(e){for(var a=1;a=0&&g.splice(a,1)}function n(e){var a=document.createElement("style");return e.attrs.type="text/css",s(a,e.attrs),l(e,a),a}function p(e){var a=document.createElement("link");return e.attrs.type="text/css",e.attrs.rel="stylesheet",s(a,e.attrs),l(e,a),a}function s(e,a){Object.keys(a).forEach(function(r){e.setAttribute(r,a[r])})}function y(e,a){var r,t,o,l;if(a.transform&&e.css){if(!(l=a.transform(e.css)))return function(){};e.css=l}if(a.singleton){var s=x++;r=m||(m=n(a)),t=f.bind(null,r,s,!1),o=f.bind(null,r,s,!0)}else e.sourceMap&&"function"===typeof URL&&"function"===typeof URL.createObjectURL&&"function"===typeof URL.revokeObjectURL&&"function"===typeof Blob&&"function"===typeof btoa?(r=p(a),t=d.bind(null,r,a),o=function(){i(r),r.href&&URL.revokeObjectURL(r.href)}):(r=n(a),t=c.bind(null,r),o=function(){i(r)});return t(e),function(a){if(a){if(a.css===e.css&&a.media===e.media&&a.sourceMap===e.sourceMap)return;t(e=a)}else o()}}function f(e,a,r,t){var o=r?"":t.css;if(e.styleSheet)e.styleSheet.cssText=v(a,o);else{var l=document.createTextNode(o),i=e.childNodes;i[a]&&e.removeChild(i[a]),i.length?e.insertBefore(l,i[a]):e.appendChild(l)}}function c(e,a){var r=a.css,t=a.media;if(t&&e.setAttribute("media",t),e.styleSheet)e.styleSheet.cssText=r;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(r))}}function d(e,a,r){var t=r.css,o=r.sourceMap,l=void 0===a.convertToAbsoluteUrls&&o;(a.convertToAbsoluteUrls||l)&&(t=w(t)),o&&(t+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(o))))+" */");var i=new Blob([t],{type:"text/css"}),n=e.href;e.href=URL.createObjectURL(i),n&&URL.revokeObjectURL(n)}var u={},h=function(e){var a;return function(){return"undefined"===typeof a&&(a=e.apply(this,arguments)),a}}(function(){return window&&document&&document.all&&!window.atob}),b=function(e){var a={};return function(r){if("undefined"===typeof a[r]){var t=e.call(this,r);if(t instanceof window.HTMLIFrameElement)try{t=t.contentDocument.head}catch(e){t=null}a[r]=t}return a[r]}}(function(e){return document.querySelector(e)}),m=null,x=0,g=[],w=r(8);e.exports=function(e,a){if("undefined"!==typeof DEBUG&&DEBUG&&"object"!==typeof document)throw new Error("The style-loader cannot be used in a non-browser environment");a=a||{},a.attrs="object"===typeof a.attrs?a.attrs:{},a.singleton||(a.singleton=h()),a.insertInto||(a.insertInto="head"),a.insertAt||(a.insertAt="bottom");var r=o(e,a);return t(r,a),function(e){for(var l=[],i=0;i= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar capitalize = function capitalize(str) {\n return str[0].toUpperCase() + str.slice(1);\n};\n\nvar eventsPropTypes = _events2.default.reduce(function (acc, event) {\n acc['on' + capitalize(event)] = _propTypes2.default.func;\n return acc;\n}, {});\n\nvar audioItemShape = _propTypes2.default.shape({\n name: _propTypes2.default.string,\n artist: _propTypes2.default.string,\n url: _propTypes2.default.string,\n cover: _propTypes2.default.string,\n lrc: _propTypes2.default.string,\n theme: _propTypes2.default.string,\n type: _propTypes2.default.string\n});\n\nvar ReactAplayer = function (_React$Component) {\n _inherits(ReactAplayer, _React$Component);\n\n function ReactAplayer() {\n _classCallCheck(this, ReactAplayer);\n\n return _possibleConstructorReturn(this, (ReactAplayer.__proto__ || Object.getPrototypeOf(ReactAplayer)).apply(this, arguments));\n }\n\n _createClass(ReactAplayer, [{\n key: 'componentDidMount',\n value: function componentDidMount() {\n var _this2 = this;\n\n var _props = this.props,\n onInit = _props.onInit,\n restProps = _objectWithoutProperties(_props, ['onInit']);\n\n var control = new _aplayer2.default(_extends({}, restProps, {\n container: this.container\n }));\n\n _events2.default.forEach(function (event) {\n var funcName = 'on' + capitalize(event);\n var callback = _this2.props[funcName];\n if (callback) {\n control.on(event, callback);\n }\n });\n\n this.control = control;\n onInit(control);\n }\n }, {\n key: 'render',\n value: function render() {\n var _this3 = this;\n\n return _react2.default.createElement('div', { ref: function ref(el) {\n return _this3.container = el;\n } });\n }\n }]);\n\n return ReactAplayer;\n}(_react2.default.Component);\n\nReactAplayer.propTypes = _extends({\n onInit: _propTypes2.default.func,\n // belows are the same props with aplayer\n fixed: _propTypes2.default.bool,\n mini: _propTypes2.default.bool,\n autoplay: _propTypes2.default.bool,\n theme: _propTypes2.default.string,\n loop: _propTypes2.default.oneOf(['all', 'one', 'none']),\n order: _propTypes2.default.oneOf(['list', 'random']),\n preload: _propTypes2.default.oneOf(['auto', 'metadata', 'none']),\n volume: _propTypes2.default.number,\n audio: _propTypes2.default.oneOfType([audioItemShape, _propTypes2.default.arrayOf(audioItemShape)]),\n customAudioType: _propTypes2.default.object,\n mutex: _propTypes2.default.bool,\n lrcType: _propTypes2.default.number,\n listFolded: _propTypes2.default.bool,\n listMaxHeight: _propTypes2.default.string,\n storageName: _propTypes2.default.string\n}, eventsPropTypes);\nReactAplayer.defaultProps = {\n onInit: function onInit() {},\n\n fixed: false,\n mini: false,\n autoplay: false,\n theme: '#b7daff',\n loop: 'all',\n order: 'list',\n preload: 'auto',\n volume: 0.7,\n mutex: true,\n lrcType: 0,\n listFolded: false,\n storageName: 'react-aplayer-setting'\n};\nexports.default = ReactAplayer;\n\n/***/ }),\n/* 1 */\n/***/ (function(module, exports) {\n\nmodule.exports = __WEBPACK_EXTERNAL_MODULE_1__;\n\n/***/ }),\n/* 2 */\n/***/ (function(module, exports) {\n\nmodule.exports = __WEBPACK_EXTERNAL_MODULE_2__;\n\n/***/ }),\n/* 3 */\n/***/ (function(module, exports) {\n\nmodule.exports = __WEBPACK_EXTERNAL_MODULE_3__;\n\n/***/ }),\n/* 4 */\n/***/ (function(module, exports, __webpack_require__) {\n\n// style-loader: Adds some css to the DOM by adding a