├── .babelrc ├── .editorconfig ├── .eslintignore ├── .eslintrc.js ├── .gitignore ├── .travis.yml ├── LICENSE ├── README.md ├── docs ├── README.md └── README.zh-CN.md ├── package.json ├── postcss.config.js ├── renovate.json ├── src ├── assets │ ├── loading.svg │ ├── lrc.svg │ ├── menu.svg │ ├── no-repeat.svg │ ├── pause.svg │ ├── play.svg │ ├── repeat-all-legacy.svg │ ├── repeat-all.svg │ ├── repeat-one-legacy.svg │ ├── repeat-one.svg │ ├── shuffle.svg │ ├── skip.svg │ ├── volume-down.svg │ ├── volume-off.svg │ ├── volume-up.svg │ ├── vue-aplayer-round.png │ └── vue-aplayer.png ├── components │ ├── aplayer-controller-progress.vue │ ├── aplayer-controller-volume.vue │ ├── aplayer-controller.vue │ ├── aplayer-icon.vue │ ├── aplayer-iconbutton.vue │ ├── aplayer-list.vue │ ├── aplayer-lrc.vue │ └── aplayer-thumbnail.vue ├── default.jpg ├── demo │ ├── App.vue │ ├── favicon.ico │ ├── index.html │ └── main.js ├── scss │ └── variables.scss ├── utils.js └── vue-aplayer.vue ├── webpack.config.js ├── webpack.demo.config.js └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | [ 4 | "@babel/preset-env", 5 | { 6 | "modules": false 7 | } 8 | ] 9 | ] 10 | } 11 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | end_of_line = lf 7 | indent_style = space 8 | indent_size = 2 9 | trim_trailing_whitespace = true 10 | insert_final_newline = false 11 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | /demo/ 2 | /dist/ 3 | /*.js 4 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | // https://eslint.org/docs/user-guide/configuring 2 | 3 | module.exports = { 4 | root: true, 5 | parserOptions: { 6 | parser: 'babel-eslint' 7 | }, 8 | env: { 9 | browser: true, 10 | }, 11 | // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention 12 | // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules. 13 | extends: ['plugin:vue/essential'], 14 | // required to lint *.vue files 15 | plugins: [ 16 | 'vue' 17 | ], 18 | // add your custom rules here 19 | rules: { 20 | // allow debugger during development 21 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', 22 | 'space-before-function-paren': ['error', 'always'] 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Created by .ignore support plugin (hsz.mobi) 2 | ### JetBrains template 3 | # Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio and Webstorm 4 | # Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839 5 | 6 | # User-specific stuff: 7 | .idea/ 8 | .idea/workspace.xml 9 | .idea/tasks.xml 10 | .idea/dictionaries 11 | .idea/vcs.xml 12 | .idea/jsLibraryMappings.xml 13 | 14 | # Sensitive or high-churn files: 15 | .idea/dataSources.ids 16 | .idea/dataSources.xml 17 | .idea/dataSources.local.xml 18 | .idea/sqlDataSources.xml 19 | .idea/dynamic.xml 20 | .idea/uiDesigner.xml 21 | 22 | # Gradle: 23 | .idea/gradle.xml 24 | .idea/libraries 25 | 26 | # Mongo Explorer plugin: 27 | .idea/mongoSettings.xml 28 | 29 | ## File-based project format: 30 | *.iws 31 | 32 | ## Plugin-specific files: 33 | 34 | # IntelliJ 35 | /out/ 36 | 37 | # mpeltonen/sbt-idea plugin 38 | .idea_modules/ 39 | 40 | # JIRA plugin 41 | atlassian-ide-plugin.xml 42 | 43 | # Crashlytics plugin (for Android Studio and IntelliJ) 44 | com_crashlytics_export_strings.xml 45 | crashlytics.properties 46 | crashlytics-build.properties 47 | fabric.properties 48 | ### Node template 49 | # Logs 50 | logs 51 | *.log 52 | npm-debug.log* 53 | yarn-debug.log* 54 | yarn-error.log* 55 | 56 | # Runtime data 57 | pids 58 | *.pid 59 | *.seed 60 | *.pid.lock 61 | 62 | # Directory for instrumented libs generated by jscoverage/JSCover 63 | lib-cov 64 | 65 | # Coverage directory used by tools like istanbul 66 | coverage 67 | 68 | # nyc test coverage 69 | .nyc_output 70 | 71 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 72 | .grunt 73 | 74 | # Bower dependency directory (https://bower.io/) 75 | bower_components 76 | 77 | # node-waf configuration 78 | .lock-wscript 79 | 80 | # Compiled binary addons (http://nodejs.org/api/addons.html) 81 | build/Release 82 | 83 | # Dependency directories 84 | node_modules/ 85 | jspm_packages/ 86 | 87 | # Typescript v1 declaration files 88 | typings/ 89 | 90 | # Optional npm cache directory 91 | .npm 92 | 93 | # Optional eslint cache 94 | .eslintcache 95 | 96 | # Optional REPL history 97 | .node_repl_history 98 | 99 | # Output of 'npm pack' 100 | *.tgz 101 | 102 | # Yarn Integrity file 103 | .yarn-integrity 104 | 105 | # dotenv environment variables file 106 | .env 107 | 108 | /dist/ 109 | /demo/ 110 | package-lock.json -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "lts/*" 4 | 5 | cache: 6 | yarn: true 7 | directories: 8 | - "node_modules" 9 | 10 | # use latest yarn 11 | before_install: 12 | - curl -o- -L https://yarnpkg.com/install.sh | bash 13 | - export PATH=$HOME/.yarn/bin:$PATH 14 | 15 | # fix upath incompatibility 16 | install: yarn --ignore-engines 17 | 18 | # GitHub Pages deploy 19 | before_deploy: 20 | - npm run predeploy 21 | 22 | deploy: 23 | - provider: pages 24 | skip-cleanup: true 25 | github-token: $GITHUB_TOKEN # Set in travis-ci.org dashboard, marked secure 26 | keep-history: true 27 | on: 28 | branch: master 29 | local-dir: demo 30 | - provider: npm 31 | skip-cleanup: true 32 | email: "leishenghao@126.com" 33 | api_key: $NPM_AUTH_TOKEN 34 | on: 35 | tags: true -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2016-present Shenghao "Doma" Lei 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | Vue-APlayer 3 |

4 |

Vue-APlayer

5 | 6 | ## Please refer to [**Future of vue-aplayer**](https://github.com/SevenOutman/vue-aplayer/discussions/236) before you continue. 7 | 8 | Vue implementation of [APlayer](https://github.com/MoePlayer/APlayer) prototype. 9 | [**Demo**](https://sevenoutman.github.io/vue-aplayer) 10 | 11 | 12 | [![Travis](https://img.shields.io/travis/SevenOutman/vue-aplayer.svg?style=flat-square)](https://travis-ci.org/SevenOutman/vue-aplayer) 13 | [![npm](https://img.shields.io/npm/v/vue-aplayer.svg?style=flat-square)](https://www.npmjs.com/package/vue-aplayer) 14 | [![npm](https://img.shields.io/npm/dt/vue-aplayer.svg?style=flat-square)](https://www.npmjs.com/package/vue-aplayer) 15 | [![devDependency Status](https://img.shields.io/david/dev/SevenOutman/vue-aplayer.svg?style=flat-square)](https://david-dm.org/SevenOutman/vue-aplayer#info=devDependencies) 16 | 17 | [![Hubble](https://img.shields.io/badge/since-2016-409eff.svg?style=flat-square)](https://hubble.js.org/#/?owner=SevenOutman&repo=vue-aplayer&start) 18 | [![GitHub commit activity the past year](https://img.shields.io/github/commit-activity/y/SevenOutman/vue-aplayer.svg?style=flat-square)](https://github.com/SevenOutman/vue-aplayer/commits/develop) 19 | [![GitHub last commit](https://img.shields.io/github/last-commit/SevenOutman/vue-aplayer/develop.svg?style=flat-square)](https://github.com/SevenOutman/vue-aplayer/commits/develop) 20 | [![Dependents on GitHub](https://img.shields.io/badge/Dependents-200+-FF53A1.svg?style=flat-square)](https://github.com/SevenOutman/vue-aplayer/network/dependents?dependent_type=REPOSITORY) 21 | [![Discord](https://img.shields.io/badge/Discord-Join%20chat%20%E2%86%92-738bd7.svg?style=flat-square)](https://discord.gg/e3SeMJE) 22 | 23 | ![Screenshot](https://i.loli.net/2018/05/26/5b0912ce2e250.png) 24 | 25 | 26 | ### Features 27 | - Beautiful clean UI 28 | - Lyrics scroll 29 | - Playlist with repeat & shuffle controls 30 | - Custom theme color / Self-adapting theme color 31 | - Drag and place anywhere 32 | - Mutex play 33 | - HLS support 34 | - **Easy props and API** 35 | - **Dependency free** and light-weight (gzipped 16KB) 36 | 37 | Using Vue-APlayer in your project? [Let me know!](https://github.com/SevenOutman/vue-aplayer/issues/26) 38 | 39 | 40 | ## Usage 41 | 42 | ```HTML 43 | 51 | ``` 52 | [**Full documentation**](https://github.com/SevenOutman/vue-aplayer/blob/develop/docs/README.md) 53 | 54 | [**中文文档**](https://github.com/SevenOutman/vue-aplayer/blob/develop/docs/README.zh-CN.md) 55 | 56 | 57 | ## Changelog 58 | 59 | Detailed changes fro each release are documented in the [release notes](https://github.com/SevenOutman/vue-aplayer/releases). 60 | 61 | 62 | ## Contribution 63 | 64 | Feel free to [open an issue](https://github.com/SevenOutman/vue-aplayer/issues) if you find a bug or have a nice idea. 65 | 66 | [PRs are welcome](https://github.com/SevenOutman/vue-aplayer/blob/master/docs/README.md#contribute). 67 | 68 | 69 | ## The name 70 | 71 | - When referring to `Vue-APlayer`, the name should be written in exactly the same case. 72 | - When referring to its versions, either `Vue-APlayer@1.x` (GitHub) or `vue-aplayer@1.x` (npm) is fine. 73 | 74 | 75 | ## Related projects 76 | 77 | - [APlayer](https://github.com/MoePlayer/APlayer): Prior art 78 | - [@moefe/vue-aplayer](https://github.com/MoePlayer/vue-aplayer): Another Vue implementation of APlayer by [@u3u](https://github.com/u3u) 79 | 80 | 81 | ## Thanks 82 | 83 | [@DIYgod](https://github.com/DIYgod), for creating APlayer and sharing cloud storage for hosting Vue-APlayer's demo page media resources. 84 | 85 | 86 | ## License 87 | 88 | Vue-APlayer is [MIT Licensed](https://github.com/SevenOutman/vue-aplayer/blob/master/LICENSE). 89 | 90 | Copyright (c) 2016-present Shenghao "Doma" Lei 91 | 92 | -------------------------------------------------------------------------------- /docs/README.md: -------------------------------------------------------------------------------- 1 | ## Installation 2 | 3 | ### Node 4 | 5 | ``` 6 | $ yarn add vue-aplayer 7 | ``` 8 | or if you prefer `npm` 9 | 10 | ``` 11 | $ npm i vue-aplayer 12 | ``` 13 | 14 | ### CDN 15 | 16 | ```html 17 | 18 | 21 | ``` 22 | 23 | 24 | ## Requirements 25 | 26 | - [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) 27 | - [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) 28 | 29 | 30 | 31 | ## Usage 32 | 33 | ```HTML 34 | 42 | ``` 43 | 44 | ```JS 45 | // ES6 46 | import Aplayer from 'vue-aplayer' 47 | 48 | new Vue({ 49 | components: { 50 | Aplayer 51 | } 52 | }) 53 | ``` 54 | 55 | 56 | 57 | ### Props 58 | 59 | | Name | Type | Default | Description | 60 | | ---- | ---- | ------- | ----------- | 61 | | music| Object | *required* | Music info for current playing music, see [Music info](https://github.com/SevenOutman/vue-aplayer/blob/develop/docs/README.md#music-info) | 62 | | list | Array | `[]` | Music list to play and display. If list is not empty, music list panel will be shown, even if the only song in the list is identical to music prop. | 63 | | mini | Boolean | `false` | Mini mode | 64 | | float | Boolean | `false` | Float mode, in which you can drag the player around and leave it anywhere on your page | 65 | | showLrc | Boolean | `false` | Whether to show lyrics or not | 66 | | mutex | Boolean | `true` | Pause other players when this player is playing | 67 | | theme | String | `'#41b883'` | Theme color, will be overridden by current `music`'s theme if set | 68 | | shuffle | Boolean | `false` | Shuffle the playlist | 69 | | repeat | String | `'no-repeat'` | How to repeat play. Either to `'repeat-one'` `'repeat-all'` or `'no-repeat'`. You can also use accordingly `'music'` `'list'` `'none'` for easier remembering | 70 | | listMaxHeight | String | *none* | Max height of play list | 71 | | listFolded | Boolean | `false` | Fold playlist initially | 72 | | narrow | | | DEPRECATED, use `mini` instead | 73 | | listmaxheight | | | DEPRECATED, use `listMaxHeight` instead | 74 | | showlrc | | | DEPRECATED, use `showLrc` instead | 75 | 76 | > If you are using Vue@2.3.0+, you can use [`.sync` Modifier](https://vuejs.org/v2/guide/components.html#sync-Modifier) on `music`, `shuffle` and `repeat` props. 77 | 78 | 79 | 80 | ### Audio attributes as props 81 | 82 | Since `v1.4.0`, we added some props that names after `