├── .gitignore ├── webpack ├── postcss.config.js ├── dev.config.js └── prod.config.js ├── .travis.yml ├── .github └── ISSUE_TEMPLATE.md ├── LICENSE ├── package.json ├── .eslintrc ├── demo ├── index.html └── demo.js ├── README.md ├── dist ├── APlayer.min.css ├── APlayer.min.css.map └── APlayer.min.js └── src ├── css └── index.scss └── js └── index.js /.gitignore: -------------------------------------------------------------------------------- 1 | .idea 2 | node_modules 3 | demo2 4 | npm-debug.log -------------------------------------------------------------------------------- /webpack/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | 'autoprefixer': {} 4 | } 5 | }; -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | 3 | node_js: 4 | - "node" 5 | 6 | cache: 7 | yarn: true 8 | directories: 9 | - node_modules -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 中文用户请注意：请尽量用**英文**描述你的 issue，这样能够让尽可能多的人帮到你。 2 | 3 | If you want to report a bug, please provide the following information: 4 | 5 | - The steps to reproduce. 6 | - A minimal demo of the problem via https://jsfiddle.net or http://codepen.io/pen if possible. 7 | - Which versions of APlayer, and which browser / OS are affected by this issue? -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) DIYgod (https://www.anotherhome.net/) 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 13 | all 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 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "aplayer", 3 | "version": "1.7.0", 4 | "description": "Wow, such a beautiful html5 music player", 5 | "main": "dist/APlayer.min.js", 6 | "style": "dist/APlayer.min.css", 7 | "scripts": { 8 | "start": "npm run dev", 9 | "build": "cross-env NODE_ENV=production webpack --config webpack/prod.config.js --progress --display-error-details --colors", 10 | "dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack/dev.config.js --watch --colors", 11 | "test": "eslint src webpack" 12 | }, 13 | "repository": { 14 | "url": "git+https://github.com/DIYgod/APlayer.git", 15 | "type": "git" 16 | }, 17 | "keywords": [ 18 | "player", 19 | "music", 20 | "html5" 21 | ], 22 | "author": "DIYgod", 23 | "license": "MIT", 24 | "bugs": { 25 | "url": "https://github.com/DIYgod/APlayer/issues" 26 | }, 27 | "homepage": "https://github.com/DIYgod/APlayer#readme", 28 | "devDependencies": { 29 | "autoprefixer": "^7.1.6", 30 | "babel-core": "^6.26.0", 31 | "babel-loader": "^7.1.2", 32 | "babel-preset-env": "^1.6.1", 33 | "cross-env": "^5.1.1", 34 | "css-loader": "^0.28.7", 35 | "eslint": "^4.12.1", 36 | "eslint-loader": "^1.9.0", 37 | "exports-loader": "^0.6.4", 38 | "extract-text-webpack-plugin": "^3.0.2", 39 | "file-loader": "^1.1.5", 40 | "git-revision-webpack-plugin": "^2.5.1", 41 | "node-sass": "^4.7.2", 42 | "postcss-loader": "^2.0.9", 43 | "sass-loader": "^6.0.6", 44 | "strip-loader": "^0.1.2", 45 | "style-loader": "^0.19.0", 46 | "template-string-optimize-loader": "^2.2.3", 47 | "url-loader": "^0.6.2", 48 | "webpack": "^3.8.1", 49 | "webpack-dev-server": "^2.9.5" 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "eslint:recommended", 3 | "parserOptions": { 4 | "ecmaVersion": 6, 5 | "sourceType": "module" 6 | }, 7 | "env": { 8 | "browser": true 9 | }, 10 | "rules": { 11 | "no-console": 0, 12 | "no-extra-parens": 1, 13 | "block-scoped-var": 1, 14 | "curly": 1, 15 | "eqeqeq": 1, 16 | "no-global-assign": 1, 17 | "no-implicit-globals": 1, 18 | "no-labels": 1, 19 | "no-multi-str": 1, 20 | "comma-spacing": 1, 21 | "comma-style": 1, 22 | "func-call-spacing": 1, 23 | "indent": 1, 24 | "keyword-spacing": 1, 25 | "linebreak-style": 1, 26 | "lines-around-comment": 1, 27 | "no-multiple-empty-lines": 1, 28 | "space-infix-ops": 1, 29 | "arrow-spacing": 1, 30 | "no-var": 1, 31 | "prefer-const": 1, 32 | "no-unsafe-negation": 1, 33 | "array-callback-return": 1, 34 | "dot-location": 1, 35 | "dot-notation": 1, 36 | "no-eval": 1, 37 | "no-extend-native": 1, 38 | "no-extra-label": 1, 39 | "semi": 1, 40 | "space-before-blocks": 1, 41 | "space-before-function-paren": 1, 42 | "space-in-parens": 1, 43 | "space-unary-ops": 1, 44 | "spaced-comment": 1, 45 | "arrow-body-style": 1, 46 | "arrow-parens": 1, 47 | "no-restricted-imports": 1, 48 | "no-duplicate-imports": 1, 49 | "no-useless-computed-key": 1, 50 | "no-useless-rename": 1, 51 | "rest-spread-spacing": 1, 52 | "no-trailing-spaces": 1 53 | }, 54 | "globals": { 55 | "require": false, 56 | "module": false, 57 | "Hls": false, 58 | "flvjs": false, 59 | "dashjs": false 60 | } 61 | } -------------------------------------------------------------------------------- /demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | APlayer Demo 6 | 7 | 46 | 47 | 48 | 49 |
50 |

APlayer

51 |

Wow, such a beautiful html5 music player

52 |

Made by DIYgod. Available on GitHub. Licensed MIT.

53 |
54 |

Normal

55 |
56 |

57 | 58 | 59 | 60 | 61 | 62 | 85 | 86 |

With playlist

87 |
88 |

89 | 90 |

With lyrics

91 |
92 |

With playlist and lyrics

93 |
94 |

Narrow

95 |
96 |
97 | 98 | 99 | -------------------------------------------------------------------------------- /webpack/dev.config.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-undef */ 2 | const path = require('path'); 3 | const webpack = require('webpack'); 4 | const GitRevisionPlugin = require('git-revision-webpack-plugin'); 5 | const gitRevisionPlugin = new GitRevisionPlugin(); 6 | 7 | module.exports = { 8 | 9 | devtool: 'cheap-module-source-map', 10 | 11 | entry: { 12 | 'APlayer': './src/js/index.js' 13 | }, 14 | 15 | output: { 16 | path: path.resolve(__dirname, '..', 'dist'), 17 | filename: '[name].js', 18 | library: '[name]', 19 | libraryTarget: 'umd', 20 | libraryExport: 'default', 21 | umdNamedDefine: true, 22 | publicPath: '/' 23 | }, 24 | 25 | resolve: { 26 | modules: ['node_modules'], 27 | extensions: ['.js', '.scss'] 28 | }, 29 | 30 | module: { 31 | strictExportPresence: true, 32 | rules: [ 33 | { 34 | test: /\.js$/, 35 | enforce: 'pre', 36 | loader: require.resolve('eslint-loader'), 37 | include: path.resolve(__dirname, '../src/js'), 38 | }, 39 | { 40 | test: /\.js$/, 41 | use: [ 42 | { 43 | loader: require.resolve('babel-loader'), 44 | options: { 45 | cacheDirectory: true, 46 | presets: ['env'] 47 | } 48 | } 49 | ] 50 | }, 51 | { 52 | test: /\.scss$/, 53 | use: [ 54 | require.resolve('style-loader'), 55 | { 56 | loader: require.resolve('css-loader'), 57 | options: { 58 | importLoaders: 1 59 | } 60 | }, 61 | { 62 | loader: require.resolve('postcss-loader'), 63 | options: { 64 | config: { 65 | path: path.join(__dirname, 'postcss.config.js') 66 | } 67 | } 68 | }, 69 | require.resolve('sass-loader') 70 | ] 71 | }, 72 | { 73 | test: /\.(png|jpg)$/, 74 | loader: require.resolve('url-loader'), 75 | options: { 76 | 'limit': 40000 77 | } 78 | } 79 | ] 80 | }, 81 | 82 | devServer: { 83 | compress: true, 84 | contentBase: path.resolve(__dirname, '..', 'demo'), 85 | clientLogLevel: 'none', 86 | quiet: false, 87 | open: true, 88 | historyApiFallback: { 89 | disableDotRule: true 90 | }, 91 | watchOptions: { 92 | ignored: /node_modules/ 93 | } 94 | }, 95 | 96 | plugins: [ 97 | new webpack.NamedModulesPlugin(), 98 | new webpack.DefinePlugin({ 99 | APLAYER_VERSION: `"${require('../package.json').version}"`, 100 | GIT_HASH: JSON.stringify(gitRevisionPlugin.version()) 101 | }) 102 | ], 103 | 104 | node: { 105 | dgram: 'empty', 106 | fs: 'empty', 107 | net: 'empty', 108 | tls: 'empty' 109 | }, 110 | 111 | performance: { 112 | hints: false 113 | } 114 | 115 | }; 116 | -------------------------------------------------------------------------------- /webpack/prod.config.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-undef */ 2 | const path = require('path'); 3 | const webpack = require('webpack'); 4 | const ExtractTextPlugin = require('extract-text-webpack-plugin'); 5 | const GitRevisionPlugin = require('git-revision-webpack-plugin'); 6 | const gitRevisionPlugin = new GitRevisionPlugin(); 7 | 8 | module.exports = { 9 | 10 | bail: true, 11 | 12 | devtool: 'source-map', 13 | 14 | entry: { 15 | 'APlayer': './src/js/index.js' 16 | }, 17 | 18 | output: { 19 | path: path.resolve(__dirname, '..', 'dist'), 20 | filename: '[name].min.js', 21 | library: '[name]', 22 | libraryTarget: 'umd', 23 | libraryExport: 'default', 24 | umdNamedDefine: true, 25 | publicPath: '/' 26 | }, 27 | 28 | resolve: { 29 | modules: ['node_modules'], 30 | extensions: ['.js', '.scss'] 31 | }, 32 | 33 | module: { 34 | strictExportPresence: true, 35 | rules: [ 36 | { 37 | test: /\.js$/, 38 | enforce: 'pre', 39 | loader: require.resolve('eslint-loader'), 40 | include: path.resolve(__dirname, '../src/js'), 41 | }, 42 | { 43 | test: /\.js$/, 44 | use: [ 45 | require.resolve('template-string-optimize-loader'), 46 | { 47 | loader: require.resolve('babel-loader'), 48 | options: { 49 | compact: true, 50 | presets: ['env'] 51 | } 52 | } 53 | ] 54 | }, 55 | { 56 | test: /\.scss$/, 57 | use: ExtractTextPlugin.extract({ 58 | fallback: require.resolve('style-loader'), 59 | use: [ 60 | { 61 | loader: require.resolve('css-loader'), 62 | options: { 63 | importLoaders: 1, 64 | minimize: true, 65 | sourceMap: true 66 | } 67 | }, 68 | { 69 | loader: require.resolve('postcss-loader'), 70 | options: { 71 | config: { 72 | path: path.join(__dirname, 'postcss.config.js') 73 | } 74 | } 75 | }, 76 | require.resolve('sass-loader') 77 | ] 78 | }) 79 | }, 80 | { 81 | test: /\.(png|jpg)$/, 82 | loader: require.resolve('url-loader'), 83 | options: { 84 | 'limit': 40000 85 | } 86 | } 87 | ] 88 | }, 89 | 90 | plugins: [ 91 | new webpack.DefinePlugin({ 92 | APLAYER_VERSION: `"${require('../package.json').version}"`, 93 | GIT_HASH: JSON.stringify(gitRevisionPlugin.version()) 94 | }), 95 | new webpack.optimize.UglifyJsPlugin({ 96 | compress: { 97 | warnings: false 98 | }, 99 | output: { 100 | comments: false, 101 | ascii_only: true 102 | }, 103 | sourceMap: true 104 | }), 105 | new ExtractTextPlugin({ 106 | filename: '[name].min.css' 107 | }) 108 | ], 109 | 110 | node: { 111 | dgram: 'empty', 112 | fs: 'empty', 113 | net: 'empty', 114 | tls: 'empty', 115 | } 116 | 117 | }; 118 | -------------------------------------------------------------------------------- /demo/demo.js: -------------------------------------------------------------------------------- 1 | const ap1 = new APlayer({ 2 | element: document.getElementById('player1'), 3 | narrow: false, 4 | autoplay: true, 5 | showlrc: false, 6 | mutex: true, 7 | theme: '#e6d0b2', 8 | preload: 'metadata', 9 | mode: 'circulation', 10 | music: { 11 | title: 'Preparation', 12 | author: 'Hans Zimmer/Richard Harvey', 13 | url: 'https://moeplayer.b0.upaiyun.com/aplayer/preparation.mp3', 14 | pic: 'https://moeplayer.b0.upaiyun.com/aplayer/preparation.jpg' 15 | } 16 | }); 17 | ap1.on('play', function () { 18 | console.log('play'); 19 | }); 20 | ap1.on('play', function () { 21 | console.log('play play'); 22 | }); 23 | ap1.on('pause', function () { 24 | console.log('pause'); 25 | }); 26 | ap1.on('canplay', function () { 27 | console.log('canplay'); 28 | }); 29 | ap1.on('playing', function () { 30 | console.log('playing'); 31 | }); 32 | ap1.on('ended', function () { 33 | console.log('ended'); 34 | }); 35 | ap1.on('error', function () { 36 | console.log('error'); 37 | }); 38 | 39 | const ap2 = new APlayer({ 40 | element: document.getElementById('player2'), 41 | narrow: true, 42 | autoplay: false, 43 | showlrc: false, 44 | mutex: true, 45 | theme: '#e6d0b2', 46 | mode: 'circulation', 47 | music: { 48 | title: 'Preparation', 49 | author: 'Hans Zimmer/Richard Harvey', 50 | url: 'https://moeplayer.b0.upaiyun.com/aplayer/preparation.mp3', 51 | pic: 'https://moeplayer.b0.upaiyun.com/aplayer/preparation.jpg' 52 | } 53 | }); 54 | 55 | const ap3 = new APlayer({ 56 | element: document.getElementById('player3'), 57 | narrow: false, 58 | autoplay: false, 59 | showlrc: 3, 60 | mutex: true, 61 | theme: '#615754', 62 | mode: 'circulation', 63 | music: { 64 | title: '回レ！雪月花', 65 | author: '小倉唯', 66 | url: 'https://moeplayer.b0.upaiyun.com/aplayer/snowmoonflowers.mp3', 67 | pic: 'https://moeplayer.b0.upaiyun.com/aplayer/snowmoonflowers.jpg', 68 | lrc: "https://moeplayer.b0.upaiyun.com/aplayer/snowmoonflowers.lrc" 69 | } 70 | }); 71 | 72 | const ap4 = new APlayer({ 73 | element: document.getElementById('player4'), 74 | narrow: false, 75 | autoplay: false, 76 | showlrc: false, 77 | mutex: true, 78 | theme: '#ad7a86', 79 | mode: 'random', 80 | music: [ 81 | { 82 | title: 'あっちゅ～ま青春!', 83 | author: '七森中☆ごらく部', 84 | url: 'https://moeplayer.b0.upaiyun.com/aplayer/yuruyuri.mp3', 85 | pic: 'https://moeplayer.b0.upaiyun.com/aplayer/yuruyuri.jpg' 86 | }, 87 | { 88 | title: 'secret base~君がくれたもの~', 89 | author: '茅野愛衣', 90 | url: 'https://moeplayer.b0.upaiyun.com/aplayer/secretbase.mp3', 91 | pic: 'https://moeplayer.b0.upaiyun.com/aplayer/secretbase.jpg' 92 | }, 93 | { 94 | title: '回レ！雪月花', 95 | author: '小倉唯', 96 | url: 'https://moeplayer.b0.upaiyun.com/aplayer/snowmoonflowers.mp3', 97 | pic: 'https://moeplayer.b0.upaiyun.com/aplayer/snowmoonflowers.jpg' 98 | } 99 | ] 100 | }); 101 | 102 | const ap5 = new APlayer({ 103 | element: document.getElementById('player5'), 104 | narrow: false, 105 | autoplay: false, 106 | showlrc: 3, 107 | mutex: true, 108 | theme: '#ad7a86', 109 | mode: 'random', 110 | listmaxheight: '80px', 111 | music: [ 112 | { 113 | title: 'あっちゅ～ま青春!', 114 | author: '七森中☆ごらく部', 115 | url: 'https://moeplayer.b0.upaiyun.com/aplayer/yuruyuri.mp3', 116 | pic: 'https://moeplayer.b0.upaiyun.com/aplayer/yuruyuri.jpg', 117 | lrc: 'https://moeplayer.b0.upaiyun.com/aplayer/yuruyuri.lrc' 118 | }, 119 | { 120 | title: 'secret base~君がくれたもの~', 121 | author: '茅野愛衣', 122 | url: 'https://moeplayer.b0.upaiyun.com/aplayer/secretbase.mp3', 123 | pic: 'https://moeplayer.b0.upaiyun.com/aplayer/secretbase.jpg', 124 | lrc: 'https://moeplayer.b0.upaiyun.com/aplayer/secretbase.lrc' 125 | }, 126 | { 127 | title: '回レ！雪月花', 128 | author: '小倉唯', 129 | url: 'https://moeplayer.b0.upaiyun.com/aplayer/snowmoonflowers.mp3', 130 | pic: 'https://moeplayer.b0.upaiyun.com/aplayer/snowmoonflowers.jpg', 131 | lrc: 'https://moeplayer.b0.upaiyun.com/aplayer/snowmoonflowers.lrc' 132 | } 133 | ] 134 | }); -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | ADPlayer 3 |

4 |

APlayer

5 | 6 | > Wow, such a lovely HTML5 music player 7 | 8 | [![npm](https://img.shields.io/npm/v/aplayer.svg?style=flat-square)](https://www.npmjs.com/package/aplayer) 9 | [![npm](https://img.shields.io/npm/l/aplayer.svg?style=flat-square)](https://github.com/MoePlayer/APlayer/blob/master/LICENSE) 10 | [![npm](https://img.shields.io/npm/dt/aplayer.svg?style=flat-square)](https://www.npmjs.com/package/aplayer) 11 | [![size](https://badge-size.herokuapp.com/MoePlayer/APlayer/master/dist/APlayer.min.js?compression=gzip&style=flat-square)](https://github.com/MoePlayer/APlayer/tree/master/dist) 12 | [![Travis](https://img.shields.io/travis/MoePlayer/APlayer.svg?style=flat-square)](https://travis-ci.org/MoePlayer/APlayer) 13 | [![devDependency Status](https://img.shields.io/david/dev/MoePlayer/aplayer.svg?style=flat-square)](https://david-dm.org/MoePlayer/APlayer#info=devDependencies) 14 | [![donate](https://img.shields.io/badge/$-donate-ff69b4.svg?style=flat-square)](https://github.com/MoePlayer/APlayer#donate) 15 | 16 | ## Introduction 17 | 18 | ![image](https://i.imgur.com/JDrJXCr.png) 19 | 20 | APlayer is a lovely HTML5 music player to help people build audio easily. 21 | 22 | **APlayer supports:** 23 | 24 | - Media formats 25 | - MP4 H.264 (AAC or MP3) 26 | - WAVE PCM 27 | - Ogg Theora Vorbis 28 | - Features 29 | - Playlist 30 | - Lyrics 31 | 32 | Using APlayer on your project? [Let me know!](https://github.com/MoePlayer/APlayer/issues/79) 33 | 34 | **[Demo](http://aplayer.js.org)** 35 | 36 | **[Docs](http://aplayer.js.org/docs)** 37 | 38 | ## Install 39 | 40 | ``` 41 | $ npm install aplayer --save 42 | ``` 43 | 44 | ## Quick Start 45 | 46 | ```html 47 |
48 | 49 | ``` 50 | 51 | ```js 52 | var ap = new APlayer({ 53 | element: document.getElementById('aplayer1'), 54 | music: { 55 | title: 'Preparation', 56 | author: 'Hans Zimmer/Richard Harvey', 57 | url: 'Preparation.mp3', 58 | } 59 | }); 60 | ``` 61 | 62 | ## Usage 63 | 64 | [Read the Docs](http://aplayer.js.org/docs) 65 | 66 | ## Join the Discussion 67 | 68 | - [Telegram Group](https://t.me/adplayer) 69 | - [QQ Group](https://shang.qq.com/wpa/qunwpa?idkey=bf22213ae0028a82e5adf3f286dfd4f01e0997dc9f1dcd8e831a0a85e799be17): 415835947 70 | 71 | ## Related Projects 72 | 73 | - [APlayer-Typecho-Plugin](https://github.com/zgq354/APlayer-Typecho-Plugin) 74 | - [hexo-tag-aplayer](https://github.com/grzhan/hexo-tag-aplayer) 75 | - [163music-APlayer-you-get-docker](https://github.com/YUX-IO/163music-APlayer-you-get-docker) 76 | - [Hermit-X(APlayer for WordPress)](https://github.com/liwanglin12/Hermit-X) 77 | - [vue-aplayer](https://github.com/SevenOutman/vue-aplayer) 78 | - [APlayer_for_Z-BlogPHP](https://github.com/fghrsh/APlayer_for_Z-BlogPHP) 79 | - [php-aplayer](https://github.com/Daryl-L/php-aplayer) 80 | - [react-aplayer](https://github.com/sabrinaluo/react-aplayer) 81 | - [vue-aplayer](https://github.com/MoeFE/vue-aplayer) 82 | - [APlayer-Controler](https://github.com/Mashiro-Sorata/APlayer-Controler) 83 | - [APlayerHandle](https://github.com/kn007/APlayerHandle) 84 | - [MetingJS](https://github.com/metowolf/MetingJS) 85 | - Feel free to submit yours in [`Let me know!`](https://github.com/MoePlayer/APlayer/issues/79) 86 | 87 | ## Who use APlayer? 88 | 89 | - [Anotherhome](https://www.anotherhome.net/2717) 90 | - [站长之家](http://www.chinaz.com/15year/index.html) 91 | - [TheFatRat](http://thefatrat.cn/) 92 | - [Jelly Rue](http://jellyrue.com/) 93 | - [LWL的自由天空](https://blog.lwl12.com/read/hermit-x.html) 94 | - [萨摩公园](https://i-meto.com/meting-typecho/) 95 | - [ZGQ's Blog](https://blog.izgq.net/archives/456/) 96 | - [FGHRSH 的博客](https://www.fghrsh.net/post/77.html) 97 | - [Blessing Studio](https://blessing.studio/generate-aplayer-config-from-netease-automatically/) 98 | - [暮光博客](https://muguang.me/guff/2645.html) 99 | - [Justice_Eternal吧曲谱资源站](http://lightmoon.pw) 100 | - [Justice_Eternal吧曲谱资源站(移动端)](https://justice-eternal.github.io/) 101 | - [歌词千寻](https://www.lrcgc.com/diy) 102 | - [SORA](http://mashirosorata.vicp.io/APlayer-Controler%E2%80%94%E2%80%94%E5%8F%AF%E8%87%AA%E5%AE%9A%E4%B9%89%E7%9A%84ap%E6%8E%A7%E5%88%B6%E5%99%A8.html) 103 | - [iSearch](http://i.oppsu.cn) 104 | - [LRC歌词编辑器](https://github.com/MoeFE/Lyric) 105 | - [kn007的个人博客](https://kn007.net/topics/wordpress-blog-use-new-html5-player-aplayer/) 106 | - [LLSupport](https://www.lovelivesupport.com/) 107 | - [Аэростатика](https://aerostatica.ru/) 108 | - Feel free to submit yours in [`Let me know!`](https://github.com/MoePlayer/APlayer/issues/79) 109 | 110 | ## CDN 111 | 112 | - [jsDelivr](https://www.jsdelivr.com/package/npm/aplayer) 113 | - [cdnjs](https://cdnjs.com/libraries/aplayer) 114 | - [unpkg](https://unpkg.com/aplayer) 115 | - [RawGit](https://rawgit.com/MoePlayer/APlayer/master/dist/APlayer.min.js) 116 | 117 | ## Donate 118 | 119 | - [Donate via Paypal](https://www.paypal.me/DIYgod) 120 | - [Donate via WeChat Pay](https://ws4.sinaimg.cn/large/006tKfTcgy1fhu1uowywej307s07st8h.jpg) 121 | - [Donate via Alipay](https://ws4.sinaimg.cn/large/006tKfTcgy1fhu1vf4ih7j307s07sdfm.jpg) 122 | - Donate via Bitcoin: 13CwQLHzPYm2tewNMSJBeArbbRM5NSmCD1 123 | 124 | ## Sponsor 125 | 126 | - The CDN service is sponsored by [又拍云](https://console.upyun.com/register/?invite=BkLZ2Xqob) 127 | 128 | - Donate via OpenCollective 129 | 130 | [![OpenCollective](https://opencollective.com/aplayer/backers.svg?width=890)](https://opencollective.com/aplayer) 131 | 132 | ## Author 133 | 134 | **APlayer** © [DIYgod](https://github.com/DIYgod), Released under the [MIT](./LICENSE) License.
135 | Authored and maintained by DIYgod with help from contributors ([list](https://github.com/DIYgod/APlayer/contributors)). 136 | 137 | > [Blog](https://diygod.me) · GitHub [@DIYgod](https://github.com/DIYgod) · Twitter [@DIYgod](https://twitter.com/DIYgod) · Telegram Channel [@awesomeDIYgod](https://t.me/awesomeDIYgod) 138 | -------------------------------------------------------------------------------- /dist/APlayer.min.css: -------------------------------------------------------------------------------- 1 | .aplayer-narrow{width:66px}.aplayer-narrow .aplayer-info{display:none}.aplayer-withlrc.aplayer-narrow{width:90px}.aplayer-withlrc.aplayer .aplayer-pic{height:90px;width:90px}.aplayer-withlrc.aplayer .aplayer-info{margin-left:90px;height:90px}.aplayer-withlrc.aplayer .aplayer-lrc{display:block}.aplayer-withlrc.aplayer .aplayer-info{padding:10px 7px 0}.aplayer-withlist.aplayer .aplayer-info{border-bottom:1px solid #e9e9e9}.aplayer-withlist.aplayer .aplayer-list{display:block}.aplayer-withlist.aplayer .aplayer-icon-menu{display:inline!important}.aplayer{font-family:Arial,Helvetica,sans-serif;margin:5px;-webkit-box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);border-radius:2px;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;line-height:normal}.aplayer *{-webkit-box-sizing:content-box;box-sizing:content-box}.aplayer .aplayer-icon{width:15px;height:15px;border:none;background-color:transparent;outline:none;cursor:pointer;opacity:.8;vertical-align:middle;padding:0;font-size:12px;margin:0;display:inline}.aplayer .aplayer-icon .aplayer-fill{-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out}.aplayer .aplayer-lrc-content{display:none}.aplayer .aplayer-pic{position:relative;float:left;height:66px;width:66px;background-image:url(data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAAeAAD/4QMfaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjYtYzA2NyA3OS4xNTc3NDcsIDIwMTUvMDMvMzAtMjM6NDA6NDIgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjE2NjQ3NUZBM0Y4RDExRTY4NzJCRDdCNkZCQTQ0MjNBIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjE2NjQ3NUY5M0Y4RDExRTY4NzJCRDdCNkZCQTQ0MjNBIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE1IE1hY2ludG9zaCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSI5OENEMEFFRjM0NTI1NjE0NEREQkU4RjkxRjAwNjM3NiIgc3RSZWY6ZG9jdW1lbnRJRD0iOThDRDBBRUYzNDUyNTYxNDREREJFOEY5MUYwMDYzNzYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7/7gAOQWRvYmUAZMAAAAAB/9sAhAAQCwsLDAsQDAwQFw8NDxcbFBAQFBsfFxcXFxcfHhca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);background-size:cover;-webkit-transition:all .3s ease;transition:all .3s ease}.aplayer .aplayer-pic .aplayer-button{position:absolute;border-radius:50%;opacity:.8;cursor:pointer;text-shadow:0 1px 1px rgba(0,0,0,.2);-webkit-box-shadow:0 1px 1px rgba(0,0,0,.2);box-shadow:0 1px 1px rgba(0,0,0,.2);background:rgba(0,0,0,.2);-webkit-transition:all .1s ease;transition:all .1s ease}.aplayer .aplayer-pic .aplayer-button:hover{opacity:1}.aplayer .aplayer-pic .aplayer-button .aplayer-fill{fill:#fff}.aplayer .aplayer-pic .aplayer-hide{display:none}.aplayer .aplayer-pic .aplayer-play{width:26px;height:26px;border:2px solid #fff;bottom:50%;right:50%;margin:0 -15px -15px 0}.aplayer .aplayer-pic .aplayer-play .aplayer-icon-play{position:absolute;top:3px;left:4px;height:20px;width:20px}.aplayer .aplayer-pic .aplayer-pause{width:16px;height:16px;border:2px solid #fff;bottom:4px;right:4px}.aplayer .aplayer-pic .aplayer-pause .aplayer-icon-pause{position:absolute;top:2px;left:2px;height:12px;width:12px}.aplayer .aplayer-info{margin-left:66px;padding:14px 7px 0 10px;height:66px;-webkit-box-sizing:border-box;box-sizing:border-box}.aplayer .aplayer-info .aplayer-music{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin:0 0 13px 5px;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;cursor:default;padding-bottom:2px}.aplayer .aplayer-info .aplayer-music .aplayer-title{font-size:14px}.aplayer .aplayer-info .aplayer-music .aplayer-author{font-size:12px;color:#666}.aplayer .aplayer-info .aplayer-controller{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex}.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap{margin:0 0 0 5px;padding:4px 0;cursor:pointer!important;-webkit-box-flex:1;-ms-flex:1;flex:1}.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar{position:relative;height:2px;width:100%;background:#cdcdcd}.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-loaded{position:absolute;left:0;top:0;bottom:0;background:#aaa;height:2px;-webkit-transition:all .5s ease;transition:all .5s ease}.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played{position:absolute;left:0;top:0;bottom:0;height:2px}.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played .aplayer-thumb{position:absolute;top:0;right:5px;margin-top:-4px;margin-right:-10px;height:8px;width:8px;border-radius:50%;background:#fff;cursor:pointer!important}.aplayer .aplayer-info .aplayer-controller .aplayer-time{position:relative;right:0;bottom:3px;height:17px;color:#999;font-size:11px;padding-left:7px}.aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-time-inner{vertical-align:middle}.aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon{cursor:pointer;-webkit-transition:all .2s ease;transition:all .2s ease}.aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon .aplayer-fill{fill:#666}.aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon.aplayer-icon-mode{margin-right:4px}.aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon:hover .aplayer-fill{fill:#000}.aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon.aplayer-icon-menu,.aplayer .aplayer-info .aplayer-controller .aplayer-time.aplayer-time-narrow .aplayer-icon-menu,.aplayer .aplayer-info .aplayer-controller .aplayer-time.aplayer-time-narrow .aplayer-icon-mode{display:none}.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap{position:relative;display:inline-block;margin-left:3px;cursor:pointer!important}.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap:hover .aplayer-volume-bar-wrap{display:block}.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap .aplayer-volume-bar-wrap{display:none;position:absolute;bottom:15px;right:-3px;width:25px;height:40px;z-index:99}.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap .aplayer-volume-bar-wrap .aplayer-volume-bar{position:absolute;bottom:0;right:10px;width:5px;height:35px;background:#aaa}.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap .aplayer-volume-bar-wrap .aplayer-volume-bar .aplayer-volume{position:absolute;bottom:0;right:0;width:5px;-webkit-transition:all .1s ease;transition:all .1s ease}.aplayer .aplayer-lrc{display:none;position:relative;height:30px;text-align:center;overflow:hidden;margin:-10px 0 7px}.aplayer .aplayer-lrc:before{top:0;height:10%;background:-webkit-gradient(linear,left top,left bottom,from(#fff),to(hsla(0,0%,100%,0)));background:linear-gradient(180deg,#fff 0,hsla(0,0%,100%,0));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#00ffffff",GradientType=0)}.aplayer .aplayer-lrc:after,.aplayer .aplayer-lrc:before{position:absolute;z-index:1;display:block;overflow:hidden;width:100%;content:" "}.aplayer .aplayer-lrc:after{bottom:0;height:33%;background:-webkit-gradient(linear,left top,left bottom,from(hsla(0,0%,100%,0)),to(hsla(0,0%,100%,.8)));background:linear-gradient(180deg,hsla(0,0%,100%,0) 0,hsla(0,0%,100%,.8));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#00ffffff",endColorstr="#ccffffff",GradientType=0)}.aplayer .aplayer-lrc p{font-size:12px;color:#666;line-height:16px!important;height:16px!important;padding:0!important;margin:0!important;-webkit-transition:all .5s ease-out;transition:all .5s ease-out;opacity:.4;overflow:hidden}.aplayer .aplayer-lrc p.aplayer-lrc-current{opacity:1;overflow:visible;height:auto!important}.aplayer .aplayer-lrc .aplayer-lrc-contents{width:100%;-webkit-transition:all .5s ease-out;transition:all .5s ease-out;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;cursor:default}.aplayer .aplayer-list{overflow:auto;-webkit-transition:all .5s ease;transition:all .5s ease;will-change:height;display:none}.aplayer .aplayer-list.aplayer-list-hide{height:0!important}.aplayer .aplayer-list::-webkit-scrollbar{width:5px}.aplayer .aplayer-list::-webkit-scrollbar-track{background-color:#f9f9f9}.aplayer .aplayer-list::-webkit-scrollbar-thumb{border-radius:3px;background-color:#eee}.aplayer .aplayer-list::-webkit-scrollbar-thumb:hover{background-color:#ccc}.aplayer .aplayer-list ol{list-style-type:none;margin:0;padding:0}.aplayer .aplayer-list ol li{position:relative;height:32px;line-height:32px;padding:0 15px;font-size:12px;border-top:1px solid #e9e9e9;cursor:pointer;-webkit-transition:all .2s ease;transition:all .2s ease;overflow:hidden}.aplayer .aplayer-list ol li:first-child{border-top:none}.aplayer .aplayer-list ol li:hover{background:#efefef}.aplayer .aplayer-list ol li.aplayer-list-light{background:#e9e9e9}.aplayer .aplayer-list ol li.aplayer-list-light .aplayer-list-cur{display:inline-block}.aplayer .aplayer-list ol li .aplayer-list-cur{display:none;width:3px;height:22px;position:absolute;left:0;top:5px;cursor:pointer}.aplayer .aplayer-list ol li .aplayer-list-index{color:#666;margin-right:12px;cursor:pointer}.aplayer .aplayer-list ol li .aplayer-list-author{color:#666;float:right;cursor:pointer}@-webkit-keyframes aplayer-roll{0%{left:0}to{left:-100%}}@keyframes aplayer-roll{0%{left:0}to{left:-100%}} 2 | /*# sourceMappingURL=APlayer.min.css.map*/ -------------------------------------------------------------------------------- /src/css/index.scss: -------------------------------------------------------------------------------- 1 | $aplayer-height: 66px; 2 | $lrc-height: 30px; 3 | $aplayer-height-lrc: $aplayer-height + $lrc-height - 6; 4 | 5 | .aplayer-narrow { 6 | width: $aplayer-height; 7 | .aplayer-info { 8 | display: none; 9 | } 10 | } 11 | 12 | .aplayer-withlrc { 13 | &.aplayer-narrow { 14 | width: $aplayer-height-lrc; 15 | } 16 | &.aplayer { 17 | .aplayer-pic { 18 | height: $aplayer-height-lrc; 19 | width: $aplayer-height-lrc; 20 | } 21 | 22 | .aplayer-info { 23 | margin-left: $aplayer-height-lrc; 24 | height: $aplayer-height-lrc; 25 | } 26 | 27 | .aplayer-lrc { 28 | display: block; 29 | } 30 | 31 | .aplayer-info { 32 | padding: 10px 7px 0 7px; 33 | } 34 | } 35 | } 36 | 37 | .aplayer-withlist { 38 | &.aplayer { 39 | .aplayer-info { 40 | border-bottom: 1px solid #e9e9e9; 41 | } 42 | 43 | .aplayer-list { 44 | display: block; 45 | } 46 | 47 | .aplayer-icon-menu { 48 | display: inline !important; 49 | } 50 | } 51 | } 52 | 53 | .aplayer { 54 | font-family: Arial, Helvetica, sans-serif; 55 | margin: 5px; 56 | box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12); 57 | border-radius: 2px; 58 | overflow: hidden; 59 | user-select: none; 60 | line-height: initial; 61 | 62 | * { 63 | box-sizing: content-box; 64 | } 65 | 66 | .aplayer-icon { 67 | width: 15px; 68 | height: 15px; 69 | border: none; 70 | background-color: transparent; 71 | outline: none; 72 | cursor: pointer; 73 | opacity: .8; 74 | vertical-align: middle; 75 | padding: 0; 76 | font-size: 12px; 77 | margin: 0; 78 | display: inline; 79 | 80 | .aplayer-fill { 81 | transition: all .2s ease-in-out; 82 | } 83 | } 84 | 85 | .aplayer-lrc-content { 86 | display: none; 87 | } 88 | 89 | .aplayer-pic { 90 | position: relative; 91 | float: left; 92 | height: $aplayer-height; 93 | width: $aplayer-height; 94 | background-image: url(data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAAeAAD/4QMfaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjYtYzA2NyA3OS4xNTc3NDcsIDIwMTUvMDMvMzAtMjM6NDA6NDIgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjE2NjQ3NUZBM0Y4RDExRTY4NzJCRDdCNkZCQTQ0MjNBIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjE2NjQ3NUY5M0Y4RDExRTY4NzJCRDdCNkZCQTQ0MjNBIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE1IE1hY2ludG9zaCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSI5OENEMEFFRjM0NTI1NjE0NEREQkU4RjkxRjAwNjM3NiIgc3RSZWY6ZG9jdW1lbnRJRD0iOThDRDBBRUYzNDUyNTYxNDREREJFOEY5MUYwMDYzNzYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7/7gAOQWRvYmUAZMAAAAAB/9sAhAAQCwsLDAsQDAwQFw8NDxcbFBAQFBsfFxcXFxcfHhca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); 95 | background-size: cover; 96 | transition: all 0.3s ease; 97 | 98 | .aplayer-button { 99 | position: absolute; 100 | border-radius: 50%; 101 | opacity: 0.8; 102 | cursor: pointer; 103 | text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); 104 | box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); 105 | background: rgba(0, 0, 0, 0.2); 106 | transition: all 0.1s ease; 107 | &:hover { 108 | opacity: 1; 109 | } 110 | 111 | .aplayer-fill { 112 | fill: #fff; 113 | } 114 | } 115 | 116 | .aplayer-hide { 117 | display: none; 118 | } 119 | 120 | .aplayer-play { 121 | width: 26px; 122 | height: 26px; 123 | border: 2px solid #fff; 124 | bottom: 50%; 125 | right: 50%; 126 | margin: 0 -15px -15px 0; 127 | .aplayer-icon-play { 128 | position: absolute; 129 | top: 3px; 130 | left: 4px; 131 | height: 20px; 132 | width: 20px; 133 | } 134 | } 135 | 136 | .aplayer-pause { 137 | width: 16px; 138 | height: 16px; 139 | border: 2px solid #fff; 140 | bottom: 4px; 141 | right: 4px; 142 | .aplayer-icon-pause { 143 | position: absolute; 144 | top: 2px; 145 | left: 2px; 146 | height: 12px; 147 | width: 12px; 148 | } 149 | } 150 | } 151 | 152 | .aplayer-info { 153 | margin-left: $aplayer-height; 154 | padding: 14px 7px 0 10px; 155 | height: $aplayer-height; 156 | box-sizing: border-box; 157 | 158 | .aplayer-music { 159 | overflow: hidden; 160 | white-space: nowrap; 161 | text-overflow: ellipsis; 162 | margin: 0 0 13px 5px; 163 | user-select: text; 164 | cursor: default; 165 | padding-bottom: 2px; 166 | 167 | .aplayer-title { 168 | font-size: 14px; 169 | } 170 | 171 | .aplayer-author { 172 | font-size: 12px; 173 | color: #666; 174 | } 175 | } 176 | 177 | .aplayer-controller { 178 | position: relative; 179 | display: flex; 180 | 181 | .aplayer-bar-wrap { 182 | margin: 0 0 0 5px; 183 | padding: 4px 0; 184 | cursor: pointer !important; 185 | flex: 1; 186 | 187 | .aplayer-bar { 188 | position: relative; 189 | height: 2px; 190 | width: 100%; 191 | background: #cdcdcd; 192 | 193 | .aplayer-loaded { 194 | position: absolute; 195 | left: 0; 196 | top: 0; 197 | bottom: 0; 198 | background: #aaa; 199 | height: 2px; 200 | transition: all 0.5s ease; 201 | } 202 | 203 | .aplayer-played { 204 | position: absolute; 205 | left: 0; 206 | top: 0; 207 | bottom: 0; 208 | height: 2px; 209 | 210 | .aplayer-thumb { 211 | position: absolute; 212 | top: 0; 213 | right: 5px; 214 | margin-top: -4px; 215 | margin-right: -10px; 216 | height: 8px; 217 | width: 8px; 218 | border-radius: 50%; 219 | background: #fff; 220 | cursor: pointer !important; 221 | } 222 | } 223 | } 224 | } 225 | 226 | .aplayer-time { 227 | position: relative; 228 | right: 0; 229 | bottom: 3px; 230 | height: 17px; 231 | color: #999; 232 | font-size: 11px; 233 | padding-left: 7px; 234 | 235 | .aplayer-time-inner { 236 | vertical-align: middle; 237 | } 238 | 239 | .aplayer-icon { 240 | cursor: pointer; 241 | transition: all 0.2s ease; 242 | 243 | .aplayer-fill { 244 | fill: #666; 245 | } 246 | 247 | &.aplayer-icon-mode { 248 | margin-right: 4px; 249 | } 250 | 251 | &:hover { 252 | .aplayer-fill { 253 | fill: #000; 254 | } 255 | } 256 | 257 | &.aplayer-icon-menu { 258 | display: none; 259 | } 260 | } 261 | 262 | &.aplayer-time-narrow { 263 | .aplayer-icon-mode { 264 | display: none; 265 | } 266 | 267 | .aplayer-icon-menu { 268 | display: none; 269 | } 270 | } 271 | } 272 | 273 | .aplayer-volume-wrap { 274 | position: relative; 275 | display: inline-block; 276 | margin-left: 3px; 277 | cursor: pointer !important; 278 | 279 | &:hover .aplayer-volume-bar-wrap { 280 | display: block; 281 | } 282 | 283 | .aplayer-volume-bar-wrap { 284 | display: none; 285 | position: absolute; 286 | bottom: 15px; 287 | right: -3px; 288 | width: 25px; 289 | height: 40px; 290 | z-index: 99; 291 | 292 | .aplayer-volume-bar { 293 | position: absolute; 294 | bottom: 0; 295 | right: 10px; 296 | width: 5px; 297 | height: 35px; 298 | background: #aaa; 299 | 300 | .aplayer-volume { 301 | position: absolute; 302 | bottom: 0; 303 | right: 0; 304 | width: 5px; 305 | transition: all 0.1s ease; 306 | } 307 | } 308 | } 309 | } 310 | } 311 | } 312 | 313 | .aplayer-lrc { 314 | display: none; 315 | position: relative; 316 | height: $lrc-height; 317 | text-align: center; 318 | overflow: hidden; 319 | margin: -10px 0 7px; 320 | 321 | &:before { 322 | position: absolute; 323 | top: 0; 324 | z-index: 1; 325 | display: block; 326 | overflow: hidden; 327 | width: 100%; 328 | height: 10%; 329 | content: ' '; 330 | background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); 331 | background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); 332 | background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); 333 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 ); 334 | } 335 | 336 | &:after { 337 | position: absolute; 338 | bottom: 0; 339 | z-index: 1; 340 | display: block; 341 | overflow: hidden; 342 | width: 100%; 343 | height: 33%; 344 | content: ' '; 345 | background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 100%); 346 | background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 100%); 347 | background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 100%); 348 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ccffffff',GradientType=0 ); 349 | } 350 | 351 | p { 352 | font-size: 12px; 353 | color: #666; 354 | line-height: 16px !important; 355 | height: 16px !important; 356 | padding: 0 !important; 357 | margin: 0 !important; 358 | transition: all 0.5s ease-out; 359 | opacity: 0.4; 360 | overflow: hidden; 361 | 362 | &.aplayer-lrc-current { 363 | opacity: 1; 364 | overflow: visible; 365 | height: initial !important; 366 | } 367 | } 368 | 369 | .aplayer-lrc-contents { 370 | width: 100%; 371 | transition: all 0.5s ease-out; 372 | user-select: text; 373 | cursor: default; 374 | } 375 | } 376 | 377 | .aplayer-list { 378 | overflow: auto; 379 | transition: all 0.5s ease; 380 | will-change: height; 381 | display: none; 382 | 383 | &.aplayer-list-hide { 384 | height: 0 !important; 385 | } 386 | 387 | &::-webkit-scrollbar{ 388 | width: 5px; 389 | } 390 | &::-webkit-scrollbar-track{ 391 | background-color: #f9f9f9; 392 | } 393 | &::-webkit-scrollbar-thumb{ 394 | border-radius: 3px; 395 | background-color: #eee; 396 | } 397 | &::-webkit-scrollbar-thumb:hover{ 398 | background-color: #ccc; 399 | } 400 | 401 | ol { 402 | list-style-type: none; 403 | margin: 0; 404 | padding: 0; 405 | 406 | li { 407 | position: relative; 408 | height: 32px; 409 | line-height: 32px; 410 | padding: 0 15px; 411 | font-size: 12px; 412 | border-top: 1px solid #e9e9e9; 413 | cursor: pointer; 414 | transition: all 0.2s ease; 415 | overflow: hidden; 416 | 417 | &:first-child { 418 | border-top: none; 419 | } 420 | 421 | &:hover { 422 | background: #efefef; 423 | } 424 | 425 | &.aplayer-list-light { 426 | background: #e9e9e9; 427 | 428 | .aplayer-list-cur { 429 | display: inline-block; 430 | } 431 | } 432 | 433 | .aplayer-list-cur { 434 | display: none; 435 | width: 3px; 436 | height: 22px; 437 | position: absolute; 438 | left: 0; 439 | top: 5px; 440 | cursor: pointer; 441 | } 442 | .aplayer-list-index { 443 | color: #666; 444 | margin-right: 12px; 445 | cursor: pointer; 446 | } 447 | .aplayer-list-author { 448 | color: #666; 449 | float: right; 450 | cursor: pointer; 451 | } 452 | } 453 | } 454 | } 455 | } 456 | 457 | @keyframes aplayer-roll { 458 | 0%{left:0} 459 | 100%{left: -100%} 460 | } 461 | -------------------------------------------------------------------------------- /dist/APlayer.min.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["webpack:///./src/css/index.scss"],"names":[],"mappings":"AAAA,gBACE,UAAY,CACZ,8BACE,YAAc,CAElB,gCACE,UAAY,CAEd,sCACE,YACA,UAAY,CAEd,uCACE,iBACA,WAAa,CAEf,sCACE,aAAe,CAEjB,uCACE,kBAAwB,CAE1B,wCACE,+BAAiC,CAEnC,wCACE,aAAe,CAEjB,6CACE,wBAA2B,CAE7B,SACE,uCACA,WACA,yGACQ,iGACR,kBACA,gBACA,yBACG,sBACC,qBACI,iBACR,kBAAqB,CACrB,WACE,+BACQ,sBAAwB,CAClC,uBACE,WACA,YACA,YACA,6BACA,aACA,eACA,WACA,sBACA,UACA,eACA,SACA,cAAgB,CAChB,qCACE,uCACA,8BAAgC,CACpC,8BACE,YAAc,CAChB,sBACE,kBACA,WACA,YACA,WACA,8tIACA,sBACA,gCACA,uBAA0B,CAC1B,sCACE,kBACA,kBACA,WACA,eACA,qCACA,4CACQ,oCACR,0BACA,gCACA,uBAA0B,CAC1B,4CACE,SAAW,CACb,oDACE,SAAW,CACf,oCACE,YAAc,CAChB,oCACE,WACA,YACA,sBACA,WACA,UACA,sBAAwB,CACxB,uDACE,kBACA,QACA,SACA,YACA,UAAY,CAChB,qCACE,WACA,YACA,sBACA,WACA,SAAW,CACX,yDACE,kBACA,QACA,SACA,YACA,UAAY,CAClB,uBACE,iBACA,wBACA,YACA,8BACQ,qBAAuB,CAC/B,sCACE,gBACA,mBACA,uBACA,oBACA,yBACG,sBACC,qBACI,iBACR,eACA,kBAAoB,CACpB,qDACE,cAAgB,CAClB,sDACE,eACA,UAAY,CAChB,2CACE,kBACA,oBACA,oBACA,YAAc,CACd,6DACE,iBACA,cACA,yBACA,mBACI,WACI,MAAQ,CAChB,0EACE,kBACA,WACA,WACA,kBAAoB,CACpB,0FACE,kBACA,OACA,MACA,SACA,gBACA,WACA,gCACA,uBAA0B,CAC5B,0FACE,kBACA,OACA,MACA,SACA,UAAY,CACZ,yGACE,kBACA,MACA,UACA,gBACA,mBACA,WACA,UACA,kBACA,gBACA,wBAA2B,CACnC,yDACE,kBACA,QACA,WACA,YACA,WACA,eACA,gBAAkB,CAClB,6EACE,qBAAuB,CACzB,uEACE,eACA,gCACA,uBAA0B,CAC1B,qFACE,SAAW,CACb,yFACE,gBAAkB,CACpB,2FACE,SAAW,CAKf,yRACE,YAAc,CAClB,gEACE,kBACA,qBACA,gBACA,wBAA2B,CAC3B,+FACE,aAAe,CACjB,yFACE,aACA,kBACA,YACA,WACA,WACA,YACA,UAAY,CACZ,6GACE,kBACA,SACA,WACA,UACA,YACA,eAAiB,CACjB,6HACE,kBACA,SACA,QACA,UACA,gCACA,uBAA0B,CACtC,sBACE,aACA,kBACA,YACA,kBACA,gBACA,kBAAoB,CACpB,6BAEE,MAKA,WAEA,0FACA,4DACA,iHAAsH,CACxH,yDAXE,kBAEA,UACA,cACA,gBACA,WAEA,WAAa,CAe6G,4BAT1H,SAKA,WAEA,wGACA,0EACA,mHAAwH,CAC1H,wBACE,eACA,WACA,2BACA,sBACA,oBACA,mBACA,oCACA,4BACA,WACA,eAAiB,CACjB,4CACE,UACA,iBACA,qBAA2B,CAC/B,4CACE,WACA,oCACA,4BACA,yBACG,sBACC,qBACI,iBACR,cAAgB,CACpB,uBACE,cACA,gCACA,wBACA,mBACA,YAAc,CACd,yCACE,kBAAqB,CACvB,0CACE,SAAW,CACb,gDACE,wBAA0B,CAC5B,gDACE,kBACA,qBAAuB,CACzB,sDACE,qBAAuB,CACzB,0BACE,qBACA,SACA,SAAW,CACX,6BACE,kBACA,YACA,iBACA,eACA,eACA,6BACA,eACA,gCACA,wBACA,eAAiB,CACjB,yCACE,eAAiB,CACnB,mCACE,kBAAoB,CACtB,gDACE,kBAAoB,CACpB,kEACE,oBAAsB,CAC1B,+CACE,aACA,UACA,YACA,kBACA,OACA,QACA,cAAgB,CAClB,iDACE,WACA,kBACA,cAAgB,CAClB,kDACE,WACA,YACA,cAAgB,CAE1B,gCACE,GACE,MAAQ,CACV,GACE,UAAY,CAAE,CAElB,wBACE,GACE,MAAQ,CACV,GACE,UAAY,CAAE","file":"APlayer.min.css","sourcesContent":[".aplayer-narrow {\n width: 66px; }\n .aplayer-narrow .aplayer-info {\n display: none; }\n\n.aplayer-withlrc.aplayer-narrow {\n width: 90px; }\n\n.aplayer-withlrc.aplayer .aplayer-pic {\n height: 90px;\n width: 90px; }\n\n.aplayer-withlrc.aplayer .aplayer-info {\n margin-left: 90px;\n height: 90px; }\n\n.aplayer-withlrc.aplayer .aplayer-lrc {\n display: block; }\n\n.aplayer-withlrc.aplayer .aplayer-info {\n padding: 10px 7px 0 7px; }\n\n.aplayer-withlist.aplayer .aplayer-info {\n border-bottom: 1px solid #e9e9e9; }\n\n.aplayer-withlist.aplayer .aplayer-list {\n display: block; }\n\n.aplayer-withlist.aplayer .aplayer-icon-menu {\n display: inline !important; }\n\n.aplayer {\n font-family: Arial, Helvetica, sans-serif;\n margin: 5px;\n -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);\n box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);\n border-radius: 2px;\n overflow: hidden;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n line-height: initial; }\n .aplayer * {\n -webkit-box-sizing: content-box;\n box-sizing: content-box; }\n .aplayer .aplayer-icon {\n width: 15px;\n height: 15px;\n border: none;\n background-color: transparent;\n outline: none;\n cursor: pointer;\n opacity: .8;\n vertical-align: middle;\n padding: 0;\n font-size: 12px;\n margin: 0;\n display: inline; }\n .aplayer .aplayer-icon .aplayer-fill {\n -webkit-transition: all .2s ease-in-out;\n transition: all .2s ease-in-out; }\n .aplayer .aplayer-lrc-content {\n display: none; }\n .aplayer .aplayer-pic {\n position: relative;\n float: left;\n height: 66px;\n width: 66px;\n background-image: url(data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAAeAAD/4QMfaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjYtYzA2NyA3OS4xNTc3NDcsIDIwMTUvMDMvMzAtMjM6NDA6NDIgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjE2NjQ3NUZBM0Y4RDExRTY4NzJCRDdCNkZCQTQ0MjNBIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjE2NjQ3NUY5M0Y4RDExRTY4NzJCRDdCNkZCQTQ0MjNBIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE1IE1hY2ludG9zaCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSI5OENEMEFFRjM0NTI1NjE0NEREQkU4RjkxRjAwNjM3NiIgc3RSZWY6ZG9jdW1lbnRJRD0iOThDRDBBRUYzNDUyNTYxNDREREJFOEY5MUYwMDYzNzYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7/7gAOQWRvYmUAZMAAAAAB/9sAhAAQCwsLDAsQDAwQFw8NDxcbFBAQFBsfFxcXFxcfHhca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);\n background-size: cover;\n -webkit-transition: all 0.3s ease;\n transition: all 0.3s ease; }\n .aplayer .aplayer-pic .aplayer-button {\n position: absolute;\n border-radius: 50%;\n opacity: 0.8;\n cursor: pointer;\n text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);\n -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);\n box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);\n background: rgba(0, 0, 0, 0.2);\n -webkit-transition: all 0.1s ease;\n transition: all 0.1s ease; }\n .aplayer .aplayer-pic .aplayer-button:hover {\n opacity: 1; }\n .aplayer .aplayer-pic .aplayer-button .aplayer-fill {\n fill: #fff; }\n .aplayer .aplayer-pic .aplayer-hide {\n display: none; }\n .aplayer .aplayer-pic .aplayer-play {\n width: 26px;\n height: 26px;\n border: 2px solid #fff;\n bottom: 50%;\n right: 50%;\n margin: 0 -15px -15px 0; }\n .aplayer .aplayer-pic .aplayer-play .aplayer-icon-play {\n position: absolute;\n top: 3px;\n left: 4px;\n height: 20px;\n width: 20px; }\n .aplayer .aplayer-pic .aplayer-pause {\n width: 16px;\n height: 16px;\n border: 2px solid #fff;\n bottom: 4px;\n right: 4px; }\n .aplayer .aplayer-pic .aplayer-pause .aplayer-icon-pause {\n position: absolute;\n top: 2px;\n left: 2px;\n height: 12px;\n width: 12px; }\n .aplayer .aplayer-info {\n margin-left: 66px;\n padding: 14px 7px 0 10px;\n height: 66px;\n -webkit-box-sizing: border-box;\n box-sizing: border-box; }\n .aplayer .aplayer-info .aplayer-music {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n margin: 0 0 13px 5px;\n -webkit-user-select: text;\n -moz-user-select: text;\n -ms-user-select: text;\n user-select: text;\n cursor: default;\n padding-bottom: 2px; }\n .aplayer .aplayer-info .aplayer-music .aplayer-title {\n font-size: 14px; }\n .aplayer .aplayer-info .aplayer-music .aplayer-author {\n font-size: 12px;\n color: #666; }\n .aplayer .aplayer-info .aplayer-controller {\n position: relative;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex; }\n .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap {\n margin: 0 0 0 5px;\n padding: 4px 0;\n cursor: pointer !important;\n -webkit-box-flex: 1;\n -ms-flex: 1;\n flex: 1; }\n .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar {\n position: relative;\n height: 2px;\n width: 100%;\n background: #cdcdcd; }\n .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-loaded {\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n background: #aaa;\n height: 2px;\n -webkit-transition: all 0.5s ease;\n transition: all 0.5s ease; }\n .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played {\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n height: 2px; }\n .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played .aplayer-thumb {\n position: absolute;\n top: 0;\n right: 5px;\n margin-top: -4px;\n margin-right: -10px;\n height: 8px;\n width: 8px;\n border-radius: 50%;\n background: #fff;\n cursor: pointer !important; }\n .aplayer .aplayer-info .aplayer-controller .aplayer-time {\n position: relative;\n right: 0;\n bottom: 3px;\n height: 17px;\n color: #999;\n font-size: 11px;\n padding-left: 7px; }\n .aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-time-inner {\n vertical-align: middle; }\n .aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon {\n cursor: pointer;\n -webkit-transition: all 0.2s ease;\n transition: all 0.2s ease; }\n .aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon .aplayer-fill {\n fill: #666; }\n .aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon.aplayer-icon-mode {\n margin-right: 4px; }\n .aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon:hover .aplayer-fill {\n fill: #000; }\n .aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon.aplayer-icon-menu {\n display: none; }\n .aplayer .aplayer-info .aplayer-controller .aplayer-time.aplayer-time-narrow .aplayer-icon-mode {\n display: none; }\n .aplayer .aplayer-info .aplayer-controller .aplayer-time.aplayer-time-narrow .aplayer-icon-menu {\n display: none; }\n .aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap {\n position: relative;\n display: inline-block;\n margin-left: 3px;\n cursor: pointer !important; }\n .aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap:hover .aplayer-volume-bar-wrap {\n display: block; }\n .aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap .aplayer-volume-bar-wrap {\n display: none;\n position: absolute;\n bottom: 15px;\n right: -3px;\n width: 25px;\n height: 40px;\n z-index: 99; }\n .aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap .aplayer-volume-bar-wrap .aplayer-volume-bar {\n position: absolute;\n bottom: 0;\n right: 10px;\n width: 5px;\n height: 35px;\n background: #aaa; }\n .aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap .aplayer-volume-bar-wrap .aplayer-volume-bar .aplayer-volume {\n position: absolute;\n bottom: 0;\n right: 0;\n width: 5px;\n -webkit-transition: all 0.1s ease;\n transition: all 0.1s ease; }\n .aplayer .aplayer-lrc {\n display: none;\n position: relative;\n height: 30px;\n text-align: center;\n overflow: hidden;\n margin: -10px 0 7px; }\n .aplayer .aplayer-lrc:before {\n position: absolute;\n top: 0;\n z-index: 1;\n display: block;\n overflow: hidden;\n width: 100%;\n height: 10%;\n content: ' ';\n background: -webkit-gradient(linear, left top, left bottom, from(white), to(rgba(255, 255, 255, 0)));\n background: linear-gradient(to bottom, white 0%, rgba(255, 255, 255, 0) 100%);\n filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 ); }\n .aplayer .aplayer-lrc:after {\n position: absolute;\n bottom: 0;\n z-index: 1;\n display: block;\n overflow: hidden;\n width: 100%;\n height: 33%;\n content: ' ';\n background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0.8)));\n background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 100%);\n filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ccffffff',GradientType=0 ); }\n .aplayer .aplayer-lrc p {\n font-size: 12px;\n color: #666;\n line-height: 16px !important;\n height: 16px !important;\n padding: 0 !important;\n margin: 0 !important;\n -webkit-transition: all 0.5s ease-out;\n transition: all 0.5s ease-out;\n opacity: 0.4;\n overflow: hidden; }\n .aplayer .aplayer-lrc p.aplayer-lrc-current {\n opacity: 1;\n overflow: visible;\n height: initial !important; }\n .aplayer .aplayer-lrc .aplayer-lrc-contents {\n width: 100%;\n -webkit-transition: all 0.5s ease-out;\n transition: all 0.5s ease-out;\n -webkit-user-select: text;\n -moz-user-select: text;\n -ms-user-select: text;\n user-select: text;\n cursor: default; }\n .aplayer .aplayer-list {\n overflow: auto;\n -webkit-transition: all 0.5s ease;\n transition: all 0.5s ease;\n will-change: height;\n display: none; }\n .aplayer .aplayer-list.aplayer-list-hide {\n height: 0 !important; }\n .aplayer .aplayer-list::-webkit-scrollbar {\n width: 5px; }\n .aplayer .aplayer-list::-webkit-scrollbar-track {\n background-color: #f9f9f9; }\n .aplayer .aplayer-list::-webkit-scrollbar-thumb {\n border-radius: 3px;\n background-color: #eee; }\n .aplayer .aplayer-list::-webkit-scrollbar-thumb:hover {\n background-color: #ccc; }\n .aplayer .aplayer-list ol {\n list-style-type: none;\n margin: 0;\n padding: 0; }\n .aplayer .aplayer-list ol li {\n position: relative;\n height: 32px;\n line-height: 32px;\n padding: 0 15px;\n font-size: 12px;\n border-top: 1px solid #e9e9e9;\n cursor: pointer;\n -webkit-transition: all 0.2s ease;\n transition: all 0.2s ease;\n overflow: hidden; }\n .aplayer .aplayer-list ol li:first-child {\n border-top: none; }\n .aplayer .aplayer-list ol li:hover {\n background: #efefef; }\n .aplayer .aplayer-list ol li.aplayer-list-light {\n background: #e9e9e9; }\n .aplayer .aplayer-list ol li.aplayer-list-light .aplayer-list-cur {\n display: inline-block; }\n .aplayer .aplayer-list ol li .aplayer-list-cur {\n display: none;\n width: 3px;\n height: 22px;\n position: absolute;\n left: 0;\n top: 5px;\n cursor: pointer; }\n .aplayer .aplayer-list ol li .aplayer-list-index {\n color: #666;\n margin-right: 12px;\n cursor: pointer; }\n .aplayer .aplayer-list ol li .aplayer-list-author {\n color: #666;\n float: right;\n cursor: pointer; }\n\n@-webkit-keyframes aplayer-roll {\n 0% {\n left: 0; }\n 100% {\n left: -100%; } }\n\n@keyframes aplayer-roll {\n 0% {\n left: 0; }\n 100% {\n left: -100%; } }\n\n\n\n// WEBPACK FOOTER //\n// ./src/css/index.scss"],"sourceRoot":""} -------------------------------------------------------------------------------- /dist/APlayer.min.js: -------------------------------------------------------------------------------- 1 | !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("APlayer",[],t):"object"==typeof exports?exports.APlayer=t():e.APlayer=t()}("undefined"!=typeof self?self:this,function(){return function(e){function t(i){if(a[i])return a[i].exports;var s=a[i]={i:i,l:!1,exports:{}};return e[i].call(s.exports,s,s.exports,t),s.l=!0,s.exports}var a={};return t.m=e,t.c=a,t.d=function(e,a,i){t.o(e,a)||Object.defineProperty(e,a,{configurable:!1,enumerable:!0,get:i})},t.n=function(e){var a=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(a,"a",a),a},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="/",t(t.s=0)}([function(e,t,a){"use strict";function i(e){if(Array.isArray(e)){for(var t=0,a=Array(e.length);t'},this.isMobile=/mobile/i.test(window.navigator.userAgent),this.isMobile&&(t.autoplay=!1);var o={element:document.getElementsByClassName("aplayer")[0],narrow:!1,autoplay:!1,mutex:!0,showlrc:0,theme:"#b7daff",mode:"circulation"};for(var u in o)o.hasOwnProperty(u)&&!t.hasOwnProperty(u)&&(t[u]=o[u]);if(this.option=t,this.audios=[],this.mode=t.mode,this.secondToTime=function(e){if(isNaN(e))return"00:00";var t=function(e){return e<10?"0"+e:""+e},a=parseInt(e/60),i=parseInt(e-60*a),s=parseInt(a/60),n=parseInt(e/60-60*parseInt(e/60/60));return e>=3600?t(s)+":"+t(n)+":"+t(i):t(a)+":"+t(i)},this.element=this.option.element,2===this.option.showlrc||!0===this.option.showlrc){this.savelrc=[];for(var c=0;c0?t:0,t=t<1?t:1,y[e+"Bar"].style[a]=100*t+"%"},this.updateLrc=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:n.audio.currentTime;if(n.lrcIndex>n.lrc.length-1||e=n.lrc[n.lrcIndex+1][0])for(var t=0;t=n.lrc[t][0]&&(!n.lrc[t+1]||e1&&this.element.classList.add("aplayer-withlist"),this.isMultiple()||"circulation"===this.mode||"order"===this.mode||(this.mode="circulation"),this.getRandomOrder();for(var m='
- 00:00 / 00:00
    ",h=0;h'+(h+1)+''+this.option.music[h].title+''+this.option.music[h].author+"";m+="
",this.element.innerHTML=m,this.element.offsetWidth<300&&(this.element.getElementsByClassName("aplayer-icon-mode")[0].style.display="none"),this.ptime=this.element.getElementsByClassName("aplayer-ptime")[0],this.element.getElementsByClassName("aplayer-info")[0].offsetWidth<200&&this.element.getElementsByClassName("aplayer-time")[0].classList.add("aplayer-time-narrow");var y={};y.barWrap=this.element.getElementsByClassName("aplayer-bar-wrap")[0],this.option.narrow&&this.element.classList.add("aplayer-narrow"),this.button=this.element.getElementsByClassName("aplayer-button")[0],this.button.addEventListener("click",function(){n.toggle()});var v=this.element.getElementsByClassName("aplayer-list")[0];v.addEventListener("click",function(e){var t=void 0;t="LI"===e.target.tagName.toUpperCase()?e.target:e.target.parentElement;var a=parseInt(t.getElementsByClassName("aplayer-list-index")[0].innerHTML)-1;a!==n.playIndex?(n.setMusic(a),n.play()):n.toggle()}),y.playedBar=this.element.getElementsByClassName("aplayer-played")[0],y.loadedBar=this.element.getElementsByClassName("aplayer-loaded")[0];var g=this.element.getElementsByClassName("aplayer-thumb")[0],f=void 0;y.barWrap.addEventListener("click",function(e){var t=e||window.event;f=y.barWrap.clientWidth;var i=(t.clientX-a(y.barWrap))/f;isNaN(n.audio.duration)?n.updateBar("played",0,"width"):(n.updateBar("played",i,"width"),n.element.getElementsByClassName("aplayer-ptime")[0].innerHTML=n.secondToTime(i*n.audio.duration),n.audio.currentTime=parseFloat(y.playedBar.style.width)/100*n.audio.duration)}),g.addEventListener("mouseover",function(){g.style.background=n.option.theme}),g.addEventListener("mouseout",function(){g.style.background="#fff"});var b=function(e){var t=e||window.event,i=(t.clientX-a(y.barWrap))/f;i=i>0?i:0,i=i<1?i:1,n.updateBar("played",i,"width"),n.option.showlrc&&n.updateLrc(parseFloat(y.playedBar.style.width)/100*n.audio.duration),n.element.getElementsByClassName("aplayer-ptime")[0].innerHTML=n.secondToTime(i*n.audio.duration)},L=function e(){document.removeEventListener("mouseup",e),document.removeEventListener("mousemove",b),isNaN(n.audio.duration)?n.updateBar("played",0,"width"):(n.audio.currentTime=parseFloat(y.playedBar.style.width)/100*n.audio.duration,n.playedTime=setInterval(function(){n.updateBar("played",n.audio.currentTime/n.audio.duration,"width"),n.option.showlrc&&n.updateLrc(),n.element.getElementsByClassName("aplayer-ptime")[0].innerHTML=n.secondToTime(n.audio.currentTime),n.trigger("playing")},100))};g.addEventListener("mousedown",function(){f=y.barWrap.clientWidth,clearInterval(n.playedTime),document.addEventListener("mousemove",b),document.addEventListener("mouseup",L)}),y.volumeBar=this.element.getElementsByClassName("aplayer-volume")[0];var E=this.element.getElementsByClassName("aplayer-volume-bar")[0];this.volumeicon=this.element.getElementsByClassName("aplayer-time")[0].getElementsByTagName("button")[0];this.element.getElementsByClassName("aplayer-volume-bar-wrap")[0].addEventListener("click",function(e){var t=e||window.event,a=(35-t.clientY+i(E))/35;a=a>0?a:0,a=a<1?a:1,n.volume(a)}),this.volumeicon.addEventListener("click",function(){n.audio.muted?(n.audio.muted=!1,n.volumeicon.className=1===n.audio.volume?"aplayer-icon aplayer-icon-volume-up":"aplayer-icon aplayer-icon-volume-down",1===n.audio.volume?(n.volumeicon.className="aplayer-icon aplayer-icon-volume-up",n.volumeicon.innerHTML=n.getSVG("volume-up")):(n.volumeicon.className="aplayer-icon aplayer-icon-volume-down",n.volumeicon.innerHTML=n.getSVG("volume-down")),n.updateBar("volume",n.audio.volume,"height")):(n.audio.muted=!0,n.volumeicon.className="aplayer-icon aplayer-icon-volume-off",n.volumeicon.innerHTML=n.getSVG("volume-off"),n.updateBar("volume",0,"height"))});var M=this.element.getElementsByClassName("aplayer-icon-mode")[0];M.addEventListener("click",function(){n.isMultiple()?"random"===n.mode?n.mode="single":"single"===n.mode?n.mode="order":"order"===n.mode?n.mode="circulation":"circulation"===n.mode&&(n.mode="random"):"circulation"===n.mode?n.mode="order":n.mode="circulation",M.innerHTML=n.getSVG(n.mode),n.audio.loop=!(n.isMultiple()||"order"===n.mode)}),v.style.height=v.offsetHeight+"px",this.element.getElementsByClassName("aplayer-icon-menu")[0].addEventListener("click",function(){v.classList.contains("aplayer-list-hide")?v.classList.remove("aplayer-list-hide"):v.classList.add("aplayer-list-hide")}),"random"===this.mode?this.setMusic(this.randomOrder[0]):this.setMusic(0),this.option.autoplay&&this.play(),l.push(this)}return n(e,[{key:"setMusic",value:function(e){var t=this;void 0!==e&&(this.playIndex=e);var a=this.playIndex;if(this.music=this.option.music[a],this.music.pic?this.element.getElementsByClassName("aplayer-pic")[0].style.backgroundImage="url('"+this.music.pic+"')":this.element.getElementsByClassName("aplayer-pic")[0].style.backgroundImage="",this.element.getElementsByClassName("aplayer-title")[0].innerHTML=this.music.title,this.element.getElementsByClassName("aplayer-author")[0].innerHTML=this.music.author?" - "+this.music.author:"",this.element.getElementsByClassName("aplayer-list-light")[0]&&this.element.getElementsByClassName("aplayer-list-light")[0].classList.remove("aplayer-list-light"),this.element.getElementsByClassName("aplayer-list")[0].getElementsByTagName("li")[a].classList.add("aplayer-list-light"),!this.isMobile&&this.audio&&(this.pause(),this.audio.currentTime=0),this.element.getElementsByClassName("aplayer-list")[0].scrollTop=33*a,this.isMobile&&this.audio)this.audio.src=this.music.url;else if(!this.isMobile&&this.audios[a])this.audio=this.audios[a],this.audio.volume=parseInt(this.element.getElementsByClassName("aplayer-volume")[0].style.height)/100,this.audio.currentTime=0,this.audio.src=this.music.url;else{this.audio=document.createElement("audio"),this.audio.src=this.music.url,this.audio.preload=this.option.preload?this.option.preload:"auto",this.audio.addEventListener("play",function(){if(t.button.classList.contains("aplayer-play")){if(t.button.classList.remove("aplayer-play"),t.button.classList.add("aplayer-pause"),t.button.innerHTML="",setTimeout(function(){t.button.innerHTML='"},100),t.option.mutex)for(var e=0;e'+t.getSVG("play")+" "},100),clearInterval(t.playedTime),t.trigger("pause"))};this.audio.addEventListener("pause",i),this.audio.addEventListener("abort",i),this.audio.addEventListener("durationchange",function(){1!==t.audio.duration&&(t.element.getElementsByClassName("aplayer-dtime")[0].innerHTML=t.secondToTime(t.audio.duration))}),this.audio.addEventListener("progress",function(){var e=t.audio.buffered.length?t.audio.buffered.end(t.audio.buffered.length-1)/t.audio.duration:0;t.updateBar("loaded",e,"width")}),this.audio.addEventListener("error",function(){t.element.getElementsByClassName("aplayer-author")[0].innerHTML=" - Error happens \u2565\ufe4f\u2565",t.trigger("pause")}),this.audio.addEventListener("canplay",function(){t.trigger("canplay")}),this.ended=!1,this.audio.addEventListener("ended",function(){t.isMultiple()?0!==t.audio.currentTime&&("random"===t.mode?(t.setMusic(t.nextRandomNum()),t.play()):"single"===t.mode?(t.setMusic(t.playIndex),t.play()):"order"===t.mode?t.playIndex=200&&o.status<300||304===o.status?(r=o.responseText,t.lrcs[n]=s(r)):(console.log("Request was unsuccessful: "+o.status),t.lrcs[n]=[["00:00","Not available"]]),t.lrc=t.lrcs[n];var e="";t.lrcContents=t.element.getElementsByClassName("aplayer-lrc-contents")[0];for(var a=0;a"+t.lrc[a][1]+"

";t.lrcContents.innerHTML=e,t.lrcIndex||(t.lrcIndex=0),t.lrcContents.getElementsByTagName("p")[0].classList.add("aplayer-lrc-current"),t.lrcContents.style.transform="translateY(0px)",t.lrcContents.style.webkitTransform="translateY(0px)"}};var u=this.option.music[n].lrc;o.open("get",u,!0),o.send(null)}r?this.lrcs[n]=s(r):3===this.option.showlrc?this.lrcs[n]=[["00:00","Loading"]]:this.lrcs[n]=[["00:00","Not available"]]}this.lrc=this.lrcs[n];var c="";this.lrcContents=this.element.getElementsByClassName("aplayer-lrc-contents")[0];for(var d=0;d"+this.lrc[d][1]+"

";this.lrcContents.innerHTML=c,this.lrcIndex||(this.lrcIndex=0),this.lrcContents.getElementsByTagName("p")[0].classList.add("aplayer-lrc-current"),this.lrcContents.style.transform="translateY(0px)",this.lrcContents.style.webkitTransform="translateY(0px)"}1!==this.audio.duration&&(this.element.getElementsByClassName("aplayer-dtime")[0].innerHTML=this.audio.duration?this.secondToTime(this.audio.duration):"00:00")}},{key:"play",value:function(e){"[object Number]"===Object.prototype.toString.call(e)&&(this.audio.currentTime=e),this.audio.paused&&this.audio.play()}},{key:"pause",value:function(){this.audio.paused||this.audio.pause()}},{key:"volume",value:function(e){this.updateBar("volume",e,"height"),this.audio.volume=e,this.audio.muted&&(this.audio.muted=!1),1===e?(this.volumeicon.className="aplayer-icon aplayer-icon-volume-up",this.volumeicon.innerHTML=this.getSVG("volume-up")):(this.volumeicon.className="aplayer-icon aplayer-icon-volume-down",this.volumeicon.innerHTML=this.getSVG("volume-down"))}},{key:"on",value:function(e,t){"function"==typeof t&&this.event[e].push(t)}},{key:"toggle",value:function(){this.button.classList.contains("aplayer-play")?this.play():this.button.classList.contains("aplayer-pause")&&this.pause()}},{key:"isMultiple",value:function(){return this.option.music.length>1}},{key:"getRandomOrder",value:function(){function e(e,t){return t&&(t=e,e=0),e+Math.floor(Math.random()*(t-e+1))}this.isMultiple()&&(this.randomOrder=function(t){for(var a,i=t.length,s=new Array(i),n=0;n'+(this.option.music.length-e.length+n+1)+''+e[n].title+''+e[n].author+"";i.innerHTML+=s,t&&this.isMultiple()&&(this.element.classList.add("aplayer-withlist"),this.audio.loop=!1);var l=i.getElementsByTagName("li").length;a.style.height=33*l+"px",this.getRandomOrder()}}]),e}();t.default=r},function(e,t){}]).default}); 2 | //# sourceMappingURL=APlayer.min.js.map -------------------------------------------------------------------------------- /src/js/index.js: -------------------------------------------------------------------------------- 1 | console.log("\n %c APlayer 1.6.1 %c http://aplayer.js.org \n\n", "color: #fadfa3; background: #030307; padding:5px 0;", "background: #fadfa3; padding:5px 0;"); 2 | 3 | import '../css/index.scss'; 4 | 5 | const instances = []; 6 | 7 | class APlayer { 8 | 9 | /** 10 | * APlayer constructor function 11 | * 12 | * @param {Object} option - See README 13 | * @constructor 14 | */ 15 | constructor (option) { 16 | const svg = { 17 | 'play': ['0 0 16 31', 'M15.552 15.168q0.448 0.32 0.448 0.832 0 0.448-0.448 0.768l-13.696 8.512q-0.768 0.512-1.312 0.192t-0.544-1.28v-16.448q0-0.96 0.544-1.28t1.312 0.192z'], 18 | 'pause': ['0 0 17 32', 'M14.080 4.8q2.88 0 2.88 2.048v18.24q0 2.112-2.88 2.112t-2.88-2.112v-18.24q0-2.048 2.88-2.048zM2.88 4.8q2.88 0 2.88 2.048v18.24q0 2.112-2.88 2.112t-2.88-2.112v-18.24q0-2.048 2.88-2.048z'], 19 | 'volume-up': ['0 0 28 32', 'M13.728 6.272v19.456q0 0.448-0.352 0.8t-0.8 0.32-0.8-0.32l-5.952-5.952h-4.672q-0.48 0-0.8-0.352t-0.352-0.8v-6.848q0-0.48 0.352-0.8t0.8-0.352h4.672l5.952-5.952q0.32-0.32 0.8-0.32t0.8 0.32 0.352 0.8zM20.576 16q0 1.344-0.768 2.528t-2.016 1.664q-0.16 0.096-0.448 0.096-0.448 0-0.8-0.32t-0.32-0.832q0-0.384 0.192-0.64t0.544-0.448 0.608-0.384 0.512-0.64 0.192-1.024-0.192-1.024-0.512-0.64-0.608-0.384-0.544-0.448-0.192-0.64q0-0.48 0.32-0.832t0.8-0.32q0.288 0 0.448 0.096 1.248 0.48 2.016 1.664t0.768 2.528zM25.152 16q0 2.72-1.536 5.056t-4 3.36q-0.256 0.096-0.448 0.096-0.48 0-0.832-0.352t-0.32-0.8q0-0.704 0.672-1.056 1.024-0.512 1.376-0.8 1.312-0.96 2.048-2.4t0.736-3.104-0.736-3.104-2.048-2.4q-0.352-0.288-1.376-0.8-0.672-0.352-0.672-1.056 0-0.448 0.32-0.8t0.8-0.352q0.224 0 0.48 0.096 2.496 1.056 4 3.36t1.536 5.056zM29.728 16q0 4.096-2.272 7.552t-6.048 5.056q-0.224 0.096-0.448 0.096-0.48 0-0.832-0.352t-0.32-0.8q0-0.64 0.704-1.056 0.128-0.064 0.384-0.192t0.416-0.192q0.8-0.448 1.44-0.896 2.208-1.632 3.456-4.064t1.216-5.152-1.216-5.152-3.456-4.064q-0.64-0.448-1.44-0.896-0.128-0.096-0.416-0.192t-0.384-0.192q-0.704-0.416-0.704-1.056 0-0.448 0.32-0.8t0.832-0.352q0.224 0 0.448 0.096 3.776 1.632 6.048 5.056t2.272 7.552z'], 20 | 'volume-down': ['0 0 28 32', 'M13.728 6.272v19.456q0 0.448-0.352 0.8t-0.8 0.32-0.8-0.32l-5.952-5.952h-4.672q-0.48 0-0.8-0.352t-0.352-0.8v-6.848q0-0.48 0.352-0.8t0.8-0.352h4.672l5.952-5.952q0.32-0.32 0.8-0.32t0.8 0.32 0.352 0.8zM20.576 16q0 1.344-0.768 2.528t-2.016 1.664q-0.16 0.096-0.448 0.096-0.448 0-0.8-0.32t-0.32-0.832q0-0.384 0.192-0.64t0.544-0.448 0.608-0.384 0.512-0.64 0.192-1.024-0.192-1.024-0.512-0.64-0.608-0.384-0.544-0.448-0.192-0.64q0-0.48 0.32-0.832t0.8-0.32q0.288 0 0.448 0.096 1.248 0.48 2.016 1.664t0.768 2.528z'], 21 | 'volume-off': ['0 0 28 32', 'M13.728 6.272v19.456q0 0.448-0.352 0.8t-0.8 0.32-0.8-0.32l-5.952-5.952h-4.672q-0.48 0-0.8-0.352t-0.352-0.8v-6.848q0-0.48 0.352-0.8t0.8-0.352h4.672l5.952-5.952q0.32-0.32 0.8-0.32t0.8 0.32 0.352 0.8z'], 22 | 'circulation': ['0 0 29 32', 'M25.6 9.92q1.344 0 2.272 0.928t0.928 2.272v9.28q0 1.28-0.928 2.24t-2.272 0.96h-22.4q-1.28 0-2.24-0.96t-0.96-2.24v-9.28q0-1.344 0.96-2.272t2.24-0.928h8v-3.52l6.4 5.76-6.4 5.76v-3.52h-6.72v6.72h19.84v-6.72h-4.8v-4.48h6.080z'], 23 | 'random': ['0 0 33 31', 'M29.867 9.356l-5.003 5.003c-0.094 0.094-0.235 0.141-0.36 0.141-0.266 0-0.5-0.219-0.5-0.5v-3.002h-4.002c-2.079 0-3.064 1.423-3.94 3.111-0.453 0.875-0.844 1.782-1.219 2.673-1.735 4.033-3.768 8.223-8.849 8.223h-3.502c-0.281 0-0.5-0.219-0.5-0.5v-3.002c0-0.281 0.219-0.5 0.5-0.5h3.502c2.079 0 3.064-1.423 3.94-3.111 0.453-0.875 0.844-1.782 1.219-2.673 1.735-4.033 3.768-8.223 8.849-8.223h4.002v-3.002c0-0.281 0.219-0.5 0.5-0.5 0.141 0 0.266 0.063 0.375 0.156l4.987 4.987c0.094 0.094 0.141 0.235 0.141 0.36s-0.047 0.266-0.141 0.36zM10.262 14.781c-0.907-1.892-1.907-3.783-4.268-3.783h-3.502c-0.281 0-0.5-0.219-0.5-0.5v-3.002c0-0.281 0.219-0.5 0.5-0.5h3.502c2.783 0 4.831 1.298 6.41 3.518-0.876 1.344-1.517 2.798-2.142 4.268zM29.867 23.363l-5.003 5.003c-0.094 0.094-0.235 0.141-0.36 0.141-0.266 0-0.5-0.235-0.5-0.5v-3.002c-4.643 0-7.504 0.547-10.396-3.518 0.86-1.344 1.501-2.798 2.126-4.268 0.907 1.892 1.907 3.783 4.268 3.783h4.002v-3.002c0-0.281 0.219-0.5 0.5-0.5 0.141 0 0.266 0.063 0.375 0.156l4.987 4.987c0.094 0.094 0.141 0.235 0.141 0.36s-0.047 0.266-0.141 0.36z'], 24 | 'order': ['0 0 32 32', 'M0.622 18.334h19.54v7.55l11.052-9.412-11.052-9.413v7.549h-19.54v3.725z'], 25 | 'single': ['0 0 38 32', 'M2.072 21.577c0.71-0.197 1.125-0.932 0.928-1.641-0.221-0.796-0.333-1.622-0.333-2.457 0-5.049 4.108-9.158 9.158-9.158h5.428c0.056-0.922 0.221-1.816 0.482-2.667h-5.911c-3.158 0-6.128 1.23-8.361 3.463s-3.463 5.203-3.463 8.361c0 1.076 0.145 2.143 0.431 3.171 0.164 0.59 0.7 0.976 1.284 0.976 0.117 0 0.238-0.016 0.357-0.049zM21.394 25.613h-12.409v-2.362c0-0.758-0.528-1.052-1.172-0.652l-5.685 3.522c-0.644 0.4-0.651 1.063-0.014 1.474l5.712 3.69c0.637 0.411 1.158 0.127 1.158-0.63v-2.374h12.409c3.158 0 6.128-1.23 8.361-3.463 1.424-1.424 2.44-3.148 2.99-5.029-0.985 0.368-2.033 0.606-3.125 0.691-1.492 3.038-4.619 5.135-8.226 5.135zM28.718 0c-4.985 0-9.026 4.041-9.026 9.026s4.041 9.026 9.026 9.026 9.026-4.041 9.026-9.026-4.041-9.026-9.026-9.026zM30.392 13.827h-1.728v-6.822c-0.635 0.576-1.433 1.004-2.407 1.285v-1.713c0.473-0.118 0.975-0.325 1.506-0.62 0.532-0.325 0.975-0.665 1.329-1.034h1.3v8.904z'], 26 | 'menu': ['0 0 22 32', 'M20.8 14.4q0.704 0 1.152 0.48t0.448 1.12-0.48 1.12-1.12 0.48h-19.2q-0.64 0-1.12-0.48t-0.48-1.12 0.448-1.12 1.152-0.48h19.2zM1.6 11.2q-0.64 0-1.12-0.48t-0.48-1.12 0.448-1.12 1.152-0.48h19.2q0.704 0 1.152 0.48t0.448 1.12-0.48 1.12-1.12 0.48h-19.2zM20.8 20.8q0.704 0 1.152 0.48t0.448 1.12-0.48 1.12-1.12 0.48h-19.2q-0.64 0-1.12-0.48t-0.48-1.12 0.448-1.12 1.152-0.48h19.2z'] 27 | }; 28 | this.getSVG = (type) => ` 29 | 30 | 31 | 32 | 33 | `; 34 | 35 | this.isMobile = /mobile/i.test(window.navigator.userAgent); 36 | // compatibility: some mobile browsers don't suppose autoplay 37 | if (this.isMobile) { 38 | option.autoplay = false; 39 | } 40 | 41 | // default options 42 | const defaultOption = { 43 | element: document.getElementsByClassName('aplayer')[0], 44 | narrow: false, 45 | autoplay: false, 46 | mutex: true, 47 | showlrc: 0, 48 | theme: '#b7daff', 49 | mode: 'circulation' 50 | }; 51 | for (const defaultKey in defaultOption) { 52 | if (defaultOption.hasOwnProperty(defaultKey) && !option.hasOwnProperty(defaultKey)) { 53 | option[defaultKey] = defaultOption[defaultKey]; 54 | } 55 | } 56 | 57 | this.option = option; 58 | this.audios = []; 59 | this.mode = option.mode; 60 | 61 | /** 62 | * Parse second to 00:00 format. 00:00:00 if audio is over an hour long. 63 | * 64 | * @param {Number} second 65 | * @return {String} 00:00 format. 00:00:00 if over an hour long. 66 | */ 67 | this.secondToTime = (second) => { 68 | if (isNaN(second)) { 69 | return '00:00'; 70 | } 71 | const add0 = (num) => num < 10 ? '0' + num : '' + num; 72 | const min = parseInt(second / 60); 73 | const sec = parseInt(second - min * 60); 74 | const hours = parseInt(min / 60); 75 | const minAdjust = parseInt(second / 60 - 60 * parseInt(second / 60 / 60)); 76 | return second >= 3600 ? add0(hours) + ':' + add0(minAdjust) + ':' + add0(sec) : add0(min) + ':' + add0(sec); 77 | }; 78 | 79 | // save lrc 80 | this.element = this.option.element; 81 | if (this.option.showlrc === 2 || this.option.showlrc === true) { 82 | this.savelrc = []; 83 | for (let i = 0; i < this.element.getElementsByClassName('aplayer-lrc-content').length; i++) { 84 | this.savelrc.push(this.element.getElementsByClassName('aplayer-lrc-content')[i].innerHTML); 85 | } 86 | } 87 | this.lrcs = []; 88 | 89 | /** 90 | * Update progress bar, including loading progress bar and play progress bar 91 | * 92 | * @param {String} type - Point out which bar it is, should be played loaded or volume 93 | * @param {Number} percentage 94 | * @param {String} direction - Point out the direction of this bar, Should be height or width 95 | */ 96 | this.updateBar = (type, percentage, direction) => { 97 | percentage = percentage > 0 ? percentage : 0; 98 | percentage = percentage < 1 ? percentage : 1; 99 | bar[type + 'Bar'].style[direction] = percentage * 100 + '%'; 100 | }; 101 | 102 | /** 103 | * Update lrc 104 | * 105 | * @param {Number} currentTime 106 | */ 107 | this.updateLrc = (currentTime = this.audio.currentTime) => { 108 | if (this.lrcIndex > this.lrc.length - 1 || currentTime < this.lrc[this.lrcIndex][0] || (!this.lrc[this.lrcIndex + 1] || currentTime >= this.lrc[this.lrcIndex + 1][0])) { 109 | for (let i = 0; i < this.lrc.length; i++) { 110 | if (currentTime >= this.lrc[i][0] && (!this.lrc[i + 1] || currentTime < this.lrc[i + 1][0])) { 111 | this.lrcIndex = i; 112 | this.lrcContents.style.transform = `translateY(${-this.lrcIndex * 16}px)`; 113 | this.lrcContents.style.webkitTransform = `translateY(${-this.lrcIndex * 16}px)`; 114 | this.lrcContents.getElementsByClassName('aplayer-lrc-current')[0].classList.remove('aplayer-lrc-current'); 115 | this.lrcContents.getElementsByTagName('p')[i].classList.add('aplayer-lrc-current'); 116 | } 117 | } 118 | } 119 | }; 120 | 121 | // define APlayer events 122 | const eventTypes = ['play', 'pause', 'canplay', 'playing', 'ended', 'error']; 123 | this.event = {}; 124 | for (let i = 0; i < eventTypes.length; i++) { 125 | this.event[eventTypes[i]] = []; 126 | } 127 | this.trigger = (type) => { 128 | for (let i = 0; i < this.event[type].length; i++) { 129 | this.event[type][i](); 130 | } 131 | }; 132 | 133 | // multiple music 134 | this.playIndex = 0; 135 | if (Object.prototype.toString.call(option.music) !== '[object Array]') { 136 | this.option.music = [this.option.music]; 137 | } 138 | this.music = this.option.music[this.playIndex]; 139 | 140 | // add class aplayer-withlrc 141 | if (this.option.showlrc) { 142 | this.element.classList.add('aplayer-withlrc'); 143 | } 144 | if (this.option.music.length > 1) { 145 | this.element.classList.add('aplayer-withlist'); 146 | } 147 | 148 | // Assume "circulation" mode if single music is loaded and mode isn't already "circulation" or "order". 149 | if (!this.isMultiple() && this.mode !== 'circulation' && this.mode !== 'order') { 150 | this.mode = 'circulation'; 151 | } 152 | this.getRandomOrder(); 153 | 154 | // fill in HTML 155 | let eleHTML = ` 156 |
157 |
158 | 161 |
162 |
163 |
164 |
165 | 166 | 167 |
168 |
169 |
170 |
171 |
172 |
173 |
174 |
175 |
176 | 177 |
178 |
179 |
180 |
181 | 182 | - 00:00 / 00:00 183 | 184 |
185 | 188 |
189 |
190 |
191 |
192 |
193 |
194 | 197 | 200 |
201 |
202 |
203 |
204 |
    `; 205 | for (let i = 0; i < this.option.music.length; i++) { 206 | eleHTML += ` 207 |
  1. 208 | 209 | ${(i + 1)} 210 | ${this.option.music[i].title} 211 | ${this.option.music[i].author} 212 |
    2. `; 213 | } 214 | eleHTML += ` 215 |
216 |
`; 217 | this.element.innerHTML = eleHTML; 218 | 219 | // hide mode button in arrow container 220 | if (this.element.offsetWidth < 300) { 221 | this.element.getElementsByClassName('aplayer-icon-mode')[0].style.display = 'none'; 222 | } 223 | 224 | this.ptime = this.element.getElementsByClassName('aplayer-ptime')[0]; 225 | 226 | if (this.element.getElementsByClassName('aplayer-info')[0].offsetWidth < 200) { 227 | this.element.getElementsByClassName('aplayer-time')[0].classList.add('aplayer-time-narrow'); 228 | } 229 | // fix the width of aplayer bar 230 | const bar = {}; 231 | bar.barWrap = this.element.getElementsByClassName('aplayer-bar-wrap')[0]; 232 | 233 | // switch to narrow style 234 | if (this.option.narrow) { 235 | this.element.classList.add('aplayer-narrow'); 236 | } 237 | 238 | // play and pause button 239 | this.button = this.element.getElementsByClassName('aplayer-button')[0]; 240 | this.button.addEventListener('click', () => { 241 | this.toggle(); 242 | }); 243 | 244 | // click music list: change music 245 | const list = this.element.getElementsByClassName('aplayer-list')[0]; 246 | list.addEventListener('click', (e) => { 247 | let target; 248 | if (e.target.tagName.toUpperCase() === 'LI') { 249 | target = e.target; 250 | } 251 | else { 252 | target = e.target.parentElement; 253 | } 254 | const musicIndex = parseInt(target.getElementsByClassName('aplayer-list-index')[0].innerHTML) - 1; 255 | if (musicIndex !== this.playIndex) { 256 | this.setMusic(musicIndex); 257 | this.play(); 258 | } 259 | else { 260 | this.toggle(); 261 | } 262 | }); 263 | 264 | // control play progress 265 | bar.playedBar = this.element.getElementsByClassName('aplayer-played')[0]; 266 | bar.loadedBar = this.element.getElementsByClassName('aplayer-loaded')[0]; 267 | const thumb = this.element.getElementsByClassName('aplayer-thumb')[0]; 268 | let barWidth; 269 | bar.barWrap.addEventListener('click', (event) => { 270 | const e = event || window.event; 271 | barWidth = bar.barWrap.clientWidth; 272 | const percentage = (e.clientX - getElementViewLeft(bar.barWrap)) / barWidth; 273 | if (isNaN(this.audio.duration)) { 274 | this.updateBar('played', 0, 'width'); 275 | } 276 | else { 277 | this.updateBar('played', percentage, 'width'); 278 | this.element.getElementsByClassName('aplayer-ptime')[0].innerHTML = this.secondToTime(percentage * this.audio.duration); 279 | this.audio.currentTime = parseFloat(bar.playedBar.style.width) / 100 * this.audio.duration; 280 | } 281 | }); 282 | 283 | thumb.addEventListener('mouseover', () => { 284 | thumb.style.background = this.option.theme; 285 | }); 286 | thumb.addEventListener('mouseout', () => { 287 | thumb.style.background = '#fff'; 288 | }); 289 | 290 | const thumbMove = (event) => { 291 | const e = event || window.event; 292 | let percentage = (e.clientX - getElementViewLeft(bar.barWrap)) / barWidth; 293 | percentage = percentage > 0 ? percentage : 0; 294 | percentage = percentage < 1 ? percentage : 1; 295 | this.updateBar('played', percentage, 'width'); 296 | if (this.option.showlrc) { 297 | this.updateLrc(parseFloat(bar.playedBar.style.width) / 100 * this.audio.duration); 298 | } 299 | this.element.getElementsByClassName('aplayer-ptime')[0].innerHTML = this.secondToTime(percentage * this.audio.duration); 300 | }; 301 | 302 | const thumbUp = () => { 303 | document.removeEventListener('mouseup', thumbUp); 304 | document.removeEventListener('mousemove', thumbMove); 305 | if (isNaN(this.audio.duration)) { 306 | this.updateBar('played', 0, 'width'); 307 | } 308 | else { 309 | this.audio.currentTime = parseFloat(bar.playedBar.style.width) / 100 * this.audio.duration; 310 | this.playedTime = setInterval(() => { 311 | this.updateBar('played', this.audio.currentTime / this.audio.duration, 'width'); 312 | if (this.option.showlrc) { 313 | this.updateLrc(); 314 | } 315 | this.element.getElementsByClassName('aplayer-ptime')[0].innerHTML = this.secondToTime(this.audio.currentTime); 316 | this.trigger('playing'); 317 | }, 100); 318 | } 319 | }; 320 | 321 | thumb.addEventListener('mousedown', () => { 322 | barWidth = bar.barWrap.clientWidth; 323 | clearInterval(this.playedTime); 324 | document.addEventListener('mousemove', thumbMove); 325 | document.addEventListener('mouseup', thumbUp); 326 | }); 327 | 328 | // control volume 329 | bar.volumeBar = this.element.getElementsByClassName('aplayer-volume')[0]; 330 | const volumeBarWrap = this.element.getElementsByClassName('aplayer-volume-bar')[0]; 331 | this.volumeicon = this.element.getElementsByClassName('aplayer-time')[0].getElementsByTagName('button')[0]; 332 | const barHeight = 35; 333 | this.element.getElementsByClassName('aplayer-volume-bar-wrap')[0].addEventListener('click', (event) => { 334 | const e = event || window.event; 335 | let percentage = (barHeight - e.clientY + getElementViewTop(volumeBarWrap)) / barHeight; 336 | percentage = percentage > 0 ? percentage : 0; 337 | percentage = percentage < 1 ? percentage : 1; 338 | this.volume(percentage); 339 | }); 340 | this.volumeicon.addEventListener('click', () => { 341 | if (this.audio.muted) { 342 | this.audio.muted = false; 343 | this.volumeicon.className = this.audio.volume === 1 ? 'aplayer-icon aplayer-icon-volume-up' : 'aplayer-icon aplayer-icon-volume-down'; 344 | if (this.audio.volume === 1) { 345 | this.volumeicon.className = 'aplayer-icon aplayer-icon-volume-up'; 346 | this.volumeicon.innerHTML = this.getSVG('volume-up'); 347 | } 348 | else { 349 | this.volumeicon.className = 'aplayer-icon aplayer-icon-volume-down'; 350 | this.volumeicon.innerHTML = this.getSVG('volume-down'); 351 | } 352 | this.updateBar('volume', this.audio.volume, 'height'); 353 | } 354 | else { 355 | this.audio.muted = true; 356 | this.volumeicon.className = 'aplayer-icon aplayer-icon-volume-off'; 357 | this.volumeicon.innerHTML = this.getSVG('volume-off'); 358 | this.updateBar('volume', 0, 'height'); 359 | } 360 | }); 361 | 362 | // get element's view position 363 | function getElementViewLeft (element) { 364 | let actualLeft = element.offsetLeft; 365 | let current = element.offsetParent; 366 | let elementScrollLeft = 0; 367 | while (current !== null) { 368 | actualLeft += current.offsetLeft; 369 | current = current.offsetParent; 370 | } 371 | elementScrollLeft = document.body.scrollLeft + document.documentElement.scrollLeft; 372 | return actualLeft - elementScrollLeft; 373 | } 374 | 375 | function getElementViewTop (element) { 376 | let actualTop = element.offsetTop; 377 | let current = element.offsetParent; 378 | let elementScrollTop = 0; 379 | while (current !== null) { 380 | actualTop += current.offsetTop; 381 | current = current.offsetParent; 382 | } 383 | elementScrollTop = document.body.scrollTop + document.documentElement.scrollTop; 384 | return actualTop - elementScrollTop; 385 | } 386 | 387 | // mode control 388 | const modeEle = this.element.getElementsByClassName('aplayer-icon-mode')[0]; 389 | modeEle.addEventListener('click', () => { 390 | if (this.isMultiple()) { 391 | if (this.mode === 'random') { 392 | this.mode = 'single'; 393 | } 394 | else if (this.mode === 'single') { 395 | this.mode = 'order'; 396 | } 397 | else if (this.mode === 'order') { 398 | this.mode = 'circulation'; 399 | } 400 | else if (this.mode === 'circulation') { 401 | this.mode = 'random'; 402 | } 403 | } 404 | else { 405 | if (this.mode === 'circulation') { 406 | this.mode = 'order'; 407 | } 408 | else { 409 | this.mode = 'circulation'; 410 | } 411 | } 412 | modeEle.innerHTML = this.getSVG(this.mode); 413 | this.audio.loop = !(this.isMultiple() || this.mode === 'order'); 414 | }); 415 | 416 | // toggle menu control 417 | list.style.height = list.offsetHeight + 'px'; 418 | this.element.getElementsByClassName('aplayer-icon-menu')[0].addEventListener('click', () => { 419 | if (!list.classList.contains('aplayer-list-hide')) { 420 | list.classList.add('aplayer-list-hide'); 421 | } 422 | else { 423 | list.classList.remove('aplayer-list-hide'); 424 | } 425 | }); 426 | 427 | if (this.mode === 'random') { 428 | this.setMusic(this.randomOrder[0]); 429 | } 430 | else { 431 | this.setMusic(0); 432 | } 433 | 434 | // autoplay 435 | if (this.option.autoplay) { 436 | this.play(); 437 | } 438 | 439 | instances.push(this); 440 | } 441 | 442 | /** 443 | * Set music 444 | */ 445 | setMusic (index) { 446 | // get this.music 447 | if (typeof index !== 'undefined') { 448 | this.playIndex = index; 449 | } 450 | const indexMusic = this.playIndex; 451 | this.music = this.option.music[indexMusic]; 452 | 453 | // set html 454 | if (this.music.pic) { 455 | this.element.getElementsByClassName('aplayer-pic')[0].style.backgroundImage = `url('${this.music.pic}')`; 456 | } 457 | else { 458 | this.element.getElementsByClassName('aplayer-pic')[0].style.backgroundImage = ''; 459 | } 460 | this.element.getElementsByClassName('aplayer-title')[0].innerHTML = this.music.title; 461 | this.element.getElementsByClassName('aplayer-author')[0].innerHTML = this.music.author ? ' - ' + this.music.author : ''; 462 | if (this.element.getElementsByClassName('aplayer-list-light')[0]) { 463 | this.element.getElementsByClassName('aplayer-list-light')[0].classList.remove('aplayer-list-light'); 464 | } 465 | this.element.getElementsByClassName('aplayer-list')[0].getElementsByTagName('li')[indexMusic].classList.add('aplayer-list-light'); 466 | 467 | // set the previous audio object 468 | if (!this.isMobile && this.audio) { 469 | this.pause(); 470 | this.audio.currentTime = 0; 471 | } 472 | 473 | this.element.getElementsByClassName('aplayer-list')[0].scrollTop = indexMusic * 33; 474 | 475 | // get this audio object 476 | if (this.isMobile && this.audio) { 477 | this.audio.src = this.music.url; 478 | } 479 | else if (!this.isMobile && this.audios[indexMusic]) { 480 | this.audio = this.audios[indexMusic]; 481 | this.audio.volume = parseInt(this.element.getElementsByClassName('aplayer-volume')[0].style.height) / 100; 482 | this.audio.currentTime = 0; 483 | this.audio.src = this.music.url; 484 | } 485 | else { 486 | this.audio = document.createElement("audio"); 487 | this.audio.src = this.music.url; 488 | this.audio.preload = this.option.preload ? this.option.preload : 'auto'; 489 | 490 | this.audio.addEventListener('play', () => { 491 | if (this.button.classList.contains('aplayer-play')) { 492 | this.button.classList.remove('aplayer-play'); 493 | this.button.classList.add('aplayer-pause'); 494 | this.button.innerHTML = ''; 495 | setTimeout(() => { 496 | this.button.innerHTML = ` 497 | `; 500 | }, 100); 501 | 502 | // pause other players (Thanks @Aprikyblue) 503 | if (this.option.mutex) { 504 | for (let i = 0; i < instances.length; i++) { 505 | if (this !== instances[i]) { 506 | instances[i].pause(); 507 | } 508 | } 509 | } 510 | if (this.playedTime) { 511 | clearInterval(this.playedTime); 512 | } 513 | this.playedTime = setInterval(() => { 514 | this.updateBar('played', this.audio.currentTime / this.audio.duration, 'width'); 515 | if (this.option.showlrc) { 516 | this.updateLrc(); 517 | } 518 | this.ptime.innerHTML = this.secondToTime(this.audio.currentTime); 519 | this.trigger('playing'); 520 | }, 100); 521 | this.trigger('play'); 522 | } 523 | }); 524 | 525 | const pauseHandler = () => { 526 | if (this.button && (this.button.classList.contains('aplayer-pause') || this.ended)) { 527 | this.ended = false; 528 | this.button.classList.remove('aplayer-pause'); 529 | this.button.classList.add('aplayer-play'); 530 | this.button.innerHTML = ''; 531 | setTimeout(() => { 532 | this.button.innerHTML = ` 533 | `; 536 | }, 100); 537 | clearInterval(this.playedTime); 538 | this.trigger('pause'); 539 | } 540 | }; 541 | 542 | this.audio.addEventListener('pause', pauseHandler); 543 | 544 | this.audio.addEventListener('abort', pauseHandler); 545 | 546 | // show audio time: the metadata has loaded or changed 547 | this.audio.addEventListener('durationchange', () => { 548 | if (this.audio.duration !== 1) { // compatibility: Android browsers will output 1 at first 549 | this.element.getElementsByClassName('aplayer-dtime')[0].innerHTML = this.secondToTime(this.audio.duration); 550 | } 551 | }); 552 | 553 | // show audio loaded bar: to inform interested parties of progress downloading the media 554 | this.audio.addEventListener('progress', () => { 555 | const percentage = this.audio.buffered.length ? this.audio.buffered.end(this.audio.buffered.length - 1) / this.audio.duration : 0; 556 | this.updateBar('loaded', percentage, 'width'); 557 | }); 558 | 559 | // audio download error: an error occurs 560 | this.audio.addEventListener('error', () => { 561 | this.element.getElementsByClassName('aplayer-author')[0].innerHTML = ` - Error happens ╥﹏╥`; 562 | this.trigger('pause'); 563 | }); 564 | 565 | // audio can play: enough data is available that the media can be played 566 | this.audio.addEventListener('canplay', () => { 567 | this.trigger('canplay'); 568 | }); 569 | 570 | // multiple music play 571 | this.ended = false; 572 | this.audio.addEventListener('ended', () => { 573 | if (this.isMultiple()) { 574 | if (this.audio.currentTime !== 0) { 575 | if (this.mode === 'random') { 576 | this.setMusic(this.nextRandomNum()); 577 | this.play(); 578 | } 579 | else if (this.mode === 'single') { 580 | this.setMusic(this.playIndex); 581 | this.play(); 582 | } 583 | else if (this.mode === 'order') { 584 | if (this.playIndex < this.option.music.length - 1) { 585 | this.setMusic(++this.playIndex); 586 | this.play(); 587 | } 588 | else { 589 | this.ended = true; 590 | this.pause(); 591 | this.trigger('ended'); 592 | } 593 | } 594 | else if (this.mode === 'circulation') { 595 | this.playIndex = (this.playIndex + 1) % this.option.music.length; 596 | this.setMusic(this.playIndex); 597 | this.play(); 598 | } 599 | } 600 | } 601 | else { 602 | if (this.mode === 'order') { 603 | this.ended = true; 604 | this.pause(); 605 | this.trigger('ended'); 606 | } 607 | } 608 | }); 609 | 610 | // control volume 611 | this.audio.volume = parseInt(this.element.getElementsByClassName('aplayer-volume')[0].style.height) / 100; 612 | 613 | // loop 614 | this.audio.loop = !(this.isMultiple() || this.mode === 'order'); 615 | 616 | this.audios[indexMusic] = this.audio; 617 | } 618 | 619 | /** 620 | * Parse lrc, suppose multiple time tag 621 | * 622 | * @param {String} lrc_s - Format: 623 | * [mm:ss.xx]lyric 624 | * [mm:ss.xxx]lyric 625 | * [mm:ss.xx][mm:ss.xx][mm:ss.xx]lyric 626 | * 627 | * @return {String} [[time, text], [time, text], [time, text], ...] 628 | */ 629 | const parseLrc = (lrc_s) => { 630 | const lyric = lrc_s.split('\n'); 631 | const lrc = []; 632 | const lyricLen = lyric.length; 633 | for (let i = 0; i < lyricLen; i++) { 634 | // match lrc time 635 | const lrcTimes = lyric[i].match(/\[(\d{2}):(\d{2})\.(\d{2,3})]/g); 636 | // match lrc text 637 | const lrcText = lyric[i].replace(/\[(\d{2}):(\d{2})\.(\d{2,3})]/g, '').replace(/^\s+|\s+$/g, ''); 638 | 639 | if (lrcTimes) { 640 | // handle multiple time tag 641 | const timeLen = lrcTimes.length; 642 | for (let j = 0; j < timeLen; j++) { 643 | const oneTime = /\[(\d{2}):(\d{2})\.(\d{2,3})]/.exec(lrcTimes[j]); 644 | const lrcTime = oneTime[1] * 60 + parseInt(oneTime[2]) + parseInt(oneTime[3]) / ((oneTime[3] + '').length === 2 ? 100 : 1000); 645 | lrc.push([lrcTime, lrcText]); 646 | } 647 | } 648 | } 649 | // sort by time 650 | lrc.sort((a, b) => a[0] - b[0]); 651 | return lrc; 652 | }; 653 | 654 | // fill in lrc 655 | if (this.option.showlrc) { 656 | const index = indexMusic; 657 | 658 | if (!this.lrcs[index]) { 659 | let lrcs = ''; 660 | if (this.option.showlrc === 1) { 661 | lrcs = this.option.music[index].lrc; 662 | } 663 | else if (this.option.showlrc === 2 || this.option.showlrc === true) { 664 | lrcs = this.savelrc[index]; 665 | } 666 | else if (this.option.showlrc === 3) { 667 | const xhr = new XMLHttpRequest(); 668 | xhr.onreadystatechange = () => { 669 | if (xhr.readyState === 4) { 670 | if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) { 671 | lrcs = xhr.responseText; 672 | this.lrcs[index] = parseLrc(lrcs); 673 | } 674 | else { 675 | console.log('Request was unsuccessful: ' + xhr.status); 676 | this.lrcs[index] = [['00:00', 'Not available']]; 677 | } 678 | this.lrc = this.lrcs[index]; 679 | let lrcHTML = ''; 680 | this.lrcContents = this.element.getElementsByClassName('aplayer-lrc-contents')[0]; 681 | for (let i = 0; i < this.lrc.length; i++) { 682 | lrcHTML += `

${this.lrc[i][1]}

`; 683 | } 684 | this.lrcContents.innerHTML = lrcHTML; 685 | if (!this.lrcIndex) { 686 | this.lrcIndex = 0; 687 | } 688 | this.lrcContents.getElementsByTagName('p')[0].classList.add('aplayer-lrc-current'); 689 | this.lrcContents.style.transform = 'translateY(0px)'; 690 | this.lrcContents.style.webkitTransform = 'translateY(0px)'; 691 | } 692 | }; 693 | const apiurl = this.option.music[index].lrc; 694 | xhr.open('get', apiurl, true); 695 | xhr.send(null); 696 | } 697 | if (lrcs) { 698 | this.lrcs[index] = parseLrc(lrcs); 699 | } 700 | else { 701 | if (this.option.showlrc === 3) { 702 | this.lrcs[index] = [['00:00', 'Loading']]; 703 | } 704 | else { 705 | this.lrcs[index] = [['00:00', 'Not available']]; 706 | } 707 | } 708 | } 709 | 710 | this.lrc = this.lrcs[index]; 711 | let lrcHTML = ''; 712 | this.lrcContents = this.element.getElementsByClassName('aplayer-lrc-contents')[0]; 713 | for (let i = 0; i < this.lrc.length; i++) { 714 | lrcHTML += `

${this.lrc[i][1]}

`; 715 | } 716 | this.lrcContents.innerHTML = lrcHTML; 717 | if (!this.lrcIndex) { 718 | this.lrcIndex = 0; 719 | } 720 | this.lrcContents.getElementsByTagName('p')[0].classList.add('aplayer-lrc-current'); 721 | this.lrcContents.style.transform = 'translateY(0px)'; 722 | this.lrcContents.style.webkitTransform = 'translateY(0px)'; 723 | } 724 | 725 | // set duration time 726 | if (this.audio.duration !== 1) { // compatibility: Android browsers will output 1 at first 727 | this.element.getElementsByClassName('aplayer-dtime')[0].innerHTML = this.audio.duration ? this.secondToTime(this.audio.duration) : '00:00'; 728 | } 729 | } 730 | 731 | /** 732 | * Play music 733 | */ 734 | play (time) { 735 | if (Object.prototype.toString.call(time) === '[object Number]') { 736 | this.audio.currentTime = time; 737 | } 738 | if (this.audio.paused) { 739 | this.audio.play(); 740 | } 741 | } 742 | 743 | /** 744 | * Pause music 745 | */ 746 | pause () { 747 | if (!this.audio.paused) { 748 | this.audio.pause(); 749 | } 750 | } 751 | 752 | /** 753 | * Set volume 754 | */ 755 | volume (percentage) { 756 | this.updateBar('volume', percentage, 'height'); 757 | this.audio.volume = percentage; 758 | if (this.audio.muted) { 759 | this.audio.muted = false; 760 | } 761 | if (percentage === 1) { 762 | this.volumeicon.className = 'aplayer-icon aplayer-icon-volume-up'; 763 | this.volumeicon.innerHTML = this.getSVG('volume-up'); 764 | } 765 | else { 766 | this.volumeicon.className = 'aplayer-icon aplayer-icon-volume-down'; 767 | this.volumeicon.innerHTML = this.getSVG('volume-down'); 768 | } 769 | } 770 | 771 | /** 772 | * attach event 773 | */ 774 | on (name, func) { 775 | if (typeof func === 'function') { 776 | this.event[name].push(func); 777 | } 778 | } 779 | 780 | /** 781 | * toggle between play and pause 782 | */ 783 | toggle () { 784 | if (this.button.classList.contains('aplayer-play')) { 785 | this.play(); 786 | } 787 | else if (this.button.classList.contains('aplayer-pause')) { 788 | this.pause(); 789 | } 790 | } 791 | 792 | /** 793 | * get whether multiple music definitions are loaded 794 | */ 795 | isMultiple () { 796 | return this.option.music.length > 1; 797 | } 798 | 799 | /** 800 | * get random order, using Fisher–Yates shuffle 801 | */ 802 | getRandomOrder () { 803 | function random (min, max) { 804 | if (max) { 805 | max = min; 806 | min = 0; 807 | } 808 | return min + Math.floor(Math.random() * (max - min + 1)); 809 | } 810 | function shuffle (arr) { 811 | const length = arr.length, 812 | shuffled = new Array(length); 813 | for (let index = 0, rand; index < length; index++) { 814 | rand = random(0, index); 815 | if (rand !== index) {shuffled[index] = shuffled[rand];} 816 | shuffled[rand] = arr[index]; 817 | } 818 | return shuffled; 819 | } 820 | if (this.isMultiple()) { 821 | this.randomOrder = shuffle([...Array(this.option.music.length)].map(function (item, i) { 822 | return i; 823 | })); 824 | } 825 | } 826 | 827 | /** 828 | * get next random number 829 | */ 830 | nextRandomNum () { 831 | if (this.isMultiple()) { 832 | const index = this.randomOrder.indexOf(this.playIndex); 833 | if (index === this.randomOrder.length - 1) { 834 | return this.randomOrder[0]; 835 | } 836 | else { 837 | return this.randomOrder[index + 1]; 838 | } 839 | } 840 | else { 841 | return 0; 842 | } 843 | } 844 | 845 | /** 846 | * Remove song from playlist 847 | */ 848 | removeSong (indexOfSong) { 849 | if (this.option.music[indexOfSong]) { // Check if song exists 850 | const list = this.element.getElementsByClassName('aplayer-list')[0]; 851 | const oList = list.getElementsByTagName('ol')[0]; 852 | const liList = oList.getElementsByTagName('li'); 853 | if (this.option.music[indexOfSong + 1] || this.option.music[indexOfSong - 1]) { 854 | if (indexOfSong === this.playIndex) { 855 | if (this.option.music[indexOfSong + 1]) { // Play next song if it exists. 856 | this.setMusic(indexOfSong + 1); 857 | this.playIndex = this.playIndex - 1; // Adjust play index for removed song 858 | } 859 | else if (!this.option.music[indexOfSong + 1]) { // Play previous song if it exists. 860 | this.setMusic(indexOfSong - 1); 861 | } 862 | } 863 | else { 864 | if (indexOfSong < this.playIndex) { 865 | this.playIndex = this.playIndex - 1; 866 | } 867 | } 868 | if (liList[indexOfSong + 1]) { 869 | const targetSong = liList[indexOfSong - 1]; 870 | targetSong.getElementsByClassName('aplayer-list-index')[0].textContent = indexOfSong; 871 | } 872 | else { 873 | for (let i = 1; i < liList.length; i++) { 874 | if (liList[indexOfSong + i]) { 875 | const targetSong = liList[indexOfSong + i]; 876 | targetSong.getElementsByClassName('aplayer-list-index')[0].textContent = indexOfSong + i; 877 | } 878 | } 879 | } 880 | this.option.music.splice(indexOfSong, 1); // Delete song from music array 881 | this.audios.splice(indexOfSong, 1); // Delete song from audios array 882 | liList[indexOfSong].remove(); 883 | if (this.option.music[0] && this.option.music[1]) { 884 | this.multiple = false; 885 | this.element.classList.remove('aplayer-withlist'); 886 | } 887 | } 888 | const listHeight = parseInt(list.style.height, 10); 889 | list.style.height = listHeight - 33 + "px"; 890 | } 891 | else { 892 | console.error("ERROR: Song does not exist"); 893 | } 894 | } 895 | 896 | /** 897 | * destroy this player 898 | */ 899 | destroy () { 900 | instances.splice(instances.indexOf(this), 1); 901 | this.pause(); 902 | this.element.innerHTML = ''; 903 | clearInterval(this.playedTime); 904 | for (const key in this) { 905 | if (this.hasOwnProperty(key)) { 906 | delete this[key]; 907 | } 908 | } 909 | } 910 | 911 | /** 912 | * add music dynamically 913 | * 914 | * @param {Array} newMusic 915 | */ 916 | addMusic (newMusic) { 917 | const wasSingle = !this.isMultiple(); 918 | 919 | this.option.music = this.option.music.concat(newMusic); 920 | 921 | const list = this.element.getElementsByClassName('aplayer-list')[0]; 922 | const listEle = list.getElementsByTagName('ol')[0]; 923 | let newItemHTML = ``; 924 | for (let i = 0; i < newMusic.length; i++) { 925 | newItemHTML += ` 926 |
  • 927 | 928 | ${this.option.music.length - newMusic.length + i + 1} 929 | ${newMusic[i].title} 930 | ${newMusic[i].author} 931 |
    • `; 932 | } 933 | listEle.innerHTML += newItemHTML; 934 | 935 | if (wasSingle && this.isMultiple()) { 936 | this.element.classList.add('aplayer-withlist'); 937 | this.audio.loop = false; 938 | } 939 | const songListLength = listEle.getElementsByTagName('li').length; 940 | list.style.height = songListLength * 33 + 'px'; 941 | 942 | this.getRandomOrder(); 943 | } 944 | } 945 | 946 | export default APlayer; 947 | --------------------------------------------------------------------------------