Merge branch 'release/1.4.0'

Author: SevenOutman

README.md

@@ -16,6 +16,7 @@
 - Playlist
 - Lyrics scroll
 - Custom theme color / Self-adapting theme color
+- Drag and place anywhere
 - Mutex play
 - HLS support
 
@@ -26,11 +27,10 @@ Using Vue-APlayer in your project? [Let me know!](https://github.com/SevenOutman
 ```HTML
 <aplayer autoplay
   :music="{
-    title: 'Preparation',
-    author: 'Hans Zimmer/Richard Harvey',
-    url: 'http://devtest.qiniudn.com/Preparation.mp3',
-    pic: 'http://devtest.qiniudn.com/Preparation.jpg',
-    lrc: '[00:00.00]lrc here\n[00:01.00]aplayer'
+    title: 'secret base~君がくれたもの~',
+    author: 'Silent Siren',
+    url: 'https://moeplayer.b0.upaiyun.com/aplayer/secretbase.mp3',
+    pic: 'https://moeplayer.b0.upaiyun.com/aplayer/secretbase.jpg'
   }"
 />
 ```
@@ -45,6 +45,8 @@ Feel free to [open an issue](https://github.com/SevenOutman/vue-aplayer/issues)
 ## Thanks
 [APlayer](https://github.com/MoePlayer/APlayer), for appearance&api design inspiration and prototyping.
 
+[@DIYgod](https://github.com/DIYgod), for creating APlayer and sharing cloud storage for hosting my demo page media resources.
+
 ## License
 
 [MIT Licensed](https://github.com/SevenOutman/vue-aplayer/blob/master/LICENSE). Copyright (c) 2016-present Shenghao "Doma" Lei

docs/README.md

@@ -4,10 +4,14 @@
 $ npm install vue-aplayer --save
 ```
 
+
+
 ## Requirements
 
-- Promise
-- fetch
+- [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)
+- [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
+
+
 
 ## Usage
 
@@ -34,59 +38,73 @@ new Vue({
 })
 ```
 
-### Props
 
-Props are mostly the same as [APlayer's options](https://aplayer.js.org/#/home?id=options).
+
+### Props
 
 | Name | Type | Default | Description |
 | ---- | ---- | ------- | ----------- |
 | music| Object | *required* | Music info for current playing music, see [Music info](https://github.com/SevenOutman/vue-aplayer#music-info) |
 | 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. |
 | mini | Boolean | `false` | Mini mode |
 | float | Boolean | `false` | Float mode, in which you can drag the player around and leave it anywhere on your page |
-| autoplay | Boolean | `false` | Whether to autoplay. If more than one mutex player are set autoplay, only the first one will play. |
 | showLrc | Boolean | `false` | Whether to show lyrics or not |
 | mutex | Boolean | `true` | Pause other players when this player is playing |
-| theme | String | `'#b7daff'` | Theme color, will be overridden by current `music`'s theme if set |
+| theme | String | `'#41b883'` | Theme color, will be overridden by current `music`'s theme if set |
 | mode | String | `'circulation'` | Play mode, can be 'random' 'single 'circulation'(loop) or 'order'(no loop) |
-| preload | String | `'auto'` | The way to load music, can be 'none' 'metadata' or 'auto' |
 | listMaxHeight | String | *none* | Max height of play list |
 | narrow |  | | DEPRECATED, use `mini` instead |
 | listmaxheight |  |  | DEPRECATED, use `listMaxHeight` instead |
 | showlrc |  |  | DEPRECATED, use `showLrc` instead |
 
-> If you are using Vue@2.3.0+, you can use [`.sync` Modifier](https://vuejs.org/v2/guide/components.html#sync-Modifier) on `music` and `mode` prop.
+> If you are using Vue@2.3.0+, you can use [`.sync` Modifier](https://vuejs.org/v2/guide/components.html#sync-Modifier) on `music` and `mode` props.
+
+
+
+### Audio attributes as props
+
+Since `v1.4.0`, we added some props that names after `<audio>` attributes and also work as they do
+
+| Name | Type | Default | Observable | Description |
+| ---- | ---- | ------- | ---------- | ---------- |
+| autoplay | Boolean | `false` | false | Starts playing as soon as loaded. If more than one mutex player are set autoplay, only the first one will play.|
+| controls | Boolean | `false` | true | Shows native audio controls below the player, or between player and playlist. This only works in develop environment, and doesn't work in Mini mode. |
+| muted | Boolean | `false` | true | Player is muted. |
+| preload | String | *none* | true | The way to load music, can be 'none' 'metadata' or 'auto' |
+| volume | Number | `0.8` | true | Playback volume. |
+
+>  `muted` and `volume` props also accept `.sync` modifier, allowing you some custom external control capability.
+
+
 
 ### Music info
 
-The `music` props can either be an object containing info of the song to play, or an array of such objects.
+The `music` props contains info of the song to play.
 
 | Property | Default | Description |
 | -------- | ------- | ----------- |
-| url | *required* | Music source url |
+| src | *required* | Music source url |
 | title | `'Untitled'` | Music title |
 | author | `'Unknown'` | Music author |
 | pic | *none* | Music cover picture |
-| theme | *none* | Song-specific theme color |
 | lrc | *none* | lrc or url to a .lrc file, see: [LRC](https://aplayer.js.org/#/home?id=lrc) |
+| theme | *none* | Song-specific theme color |
+| url || DEPRECATED, use `src` instead |
+
 
-> vue-aplayer uses [fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) to load your lrc when it's a url.
-> If your browser doesn't support fetch by default, please use polyfills like [isomorphic-fetch](https://github.com/matthew-andrews/isomorphic-fetch).
 
 ### Events
 
-| Name | Params | Description |
-| ---- | ------ | ----------- |
-| play | none | Triggered when APlayer start play |
-| pause | none | Triggered when APlayer paused |
-| canplay | none | Triggered when enough data is available that APlayer can play |
-| playing | none | Triggered periodically when APlayer is playing |
-| ended | none | Triggered when APlayer ended playing |
-| error | none | Triggered when an error occurs |
+Since `v1.4.0`, Vue-APlayer emits every Media Element triggered from its inner `<audio>` element. You can [refer to MDN for the full list](https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events).
+
+Custom events that were supported before `v1.4.0`, which are `play` `pause` `canplay` `playing` `ended` `error`, are all deprecated now.
+
+
 
 ## Advanced
 
 ### Self-adapting theme color
+
 Since `v1.3.0`, if you set a **Music Object**'s `theme` property to `'pic'`, Vue-APlayer will pick color from the songs cover image as theme color.
 Also, you can set player's `theme` prop to `'pic'`, it will apply to every song.
 
@@ -98,9 +116,14 @@ All you need to do is adding [color-thief](https://github.com/lokesh/color-thief
 <script src="https://cdn.jsdelivr.net/npm/colorthief@2.0.2/src/color-thief.js"></script>
 ```
 
+
+
 ### HLS support
+
 Since `v1.3.0`, Vue-APlayer supports `*.m3u8` media as an optional functionality. Simply install [hls.js](https://github.com/video-dev/hls.js) into your project, and Vue-APlayer handles the rest.
 
+
+
 ### Slots
 
 - `slot="display"`
@@ -109,6 +132,8 @@ This slot represents the content displayed on the music info panel, which by def
 
 The component in this slot will receive two props: `currentMusic` and `playStat`.
 
+
+
 ## Contribute
 
 Clone this repo, then **use Yarn**

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-aplayer",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "description": "Easy-to-config music player for Vue 2.x",
   "main": "dist/vue-aplayer.min.js",
   "files": [

src/components/aplayer-controller-progress.vue

@@ -1,23 +1,25 @@
 <template>
-  <div class="aplayer-bar-wrap" @click="seekProgress" ref="barWrap">
+  <div
+    class="aplayer-bar-wrap"
+    @mousedown="onThumbMouseDown"
+    @touchstart="onThumbTouchStart"
+    ref="barWrap"
+  >
     <div class="aplayer-bar">
       <div
         class="aplayer-loaded"
-        :style="{width: `${Math.trunc(loadProgress * 100)}%`}">
-
+        :style="{width: `${loadProgress * 100}%`}">
       </div>
       <div
         class="aplayer-played"
-        :style="{width: `${Math.trunc(playProgress * 100)}%`, background: theme}"
+        :style="{width: `${playProgress * 100}%`, background: theme}"
       >
         <span
           ref="thumb"
           @mouseover="thumbHovered = true"
           @mouseout="thumbHovered = false"
-          @mousedown="onThumbMouseDown"
-          @touchstart="onThumbTouchStart"
           class="aplayer-thumb"
-          :style="{border: '1px solid', borderColor:　theme, backgroundColor: thumbHovered ? theme : '#fff'}"
+          :style="{borderColor:　theme, backgroundColor: thumbHovered ? theme : '#fff'}"
         >
         </span>
       </div>
@@ -26,8 +28,6 @@
 </template>
 
 <script>
-
-
   import {getElementViewLeft} from '../utils'
 
   export default {
@@ -38,15 +38,13 @@
       }
     },
     methods: {
-      seekProgress (e) {
+      onThumbMouseDown (e) {
         const barWidth = this.$refs.barWrap.clientWidth
         let percentage = (e.clientX - getElementViewLeft(this.$refs.barWrap)) / barWidth
         percentage = percentage > 0 ? percentage : 0
         percentage = percentage < 1 ? percentage : 1
-        this.$emit('setprogress', percentage)
-      },
-      onThumbMouseDown () {
-        this.$emit('dragbegin')
+
+        this.$emit('dragbegin', percentage)
         document.addEventListener('mousemove', this.onDocumentMouseMove)
         document.addEventListener('mouseup', this.onDocumentMouseUp)
       },
@@ -55,9 +53,7 @@
         let percentage = (e.clientX - getElementViewLeft(this.$refs.barWrap)) / barWidth
         percentage = percentage > 0 ? percentage : 0
         percentage = percentage < 1 ? percentage : 1
-        // if (this.option.showlrc) {
-        //   this.updateLrc(parseFloat(bar.playedBar.style.width) / 100 * this.audio.duration);
-        // }
+
         this.$emit('dragging', percentage)
       },
       onDocumentMouseUp (e) {
@@ -70,8 +66,13 @@
         percentage = percentage < 1 ? percentage : 1
         this.$emit('dragend', percentage)
       },
-      onThumbTouchStart () {
-        this.$emit('dragbegin')
+      onThumbTouchStart (e) {
+        const barWidth = this.$refs.barWrap.clientWidth
+        let percentage = (e.clientX - getElementViewLeft(this.$refs.barWrap)) / barWidth
+        percentage = percentage > 0 ? percentage : 0
+        percentage = percentage < 1 ? percentage : 1
+
+        this.$emit('dragbegin', percentage)
         document.addEventListener('touchmove', this.onDocumentTouchMove)
         document.addEventListener('touchend', this.onDocumentTouchEnd)
       },
@@ -81,9 +82,7 @@
         let percentage = (touch.clientX - getElementViewLeft(this.$refs.barWrap)) / barWidth
         percentage = percentage > 0 ? percentage : 0
         percentage = percentage < 1 ? percentage : 1
-        // if (this.option.showlrc) {
-        //   this.updateLrc(parseFloat(bar.playedBar.style.width) / 100 * this.audio.duration);
-        // }
+
         this.$emit('dragging', percentage)
       },
       onDocumentTouchEnd (e) {
@@ -100,3 +99,62 @@
     },
   }
 </script>
+<style lang="scss">
+
+  .aplayer-bar-wrap {
+    margin: 0 0 0 5px;
+    padding: 4px 0;
+    cursor: pointer !important;
+    flex: 1;
+
+    .aplayer-bar {
+      position: relative;
+      height: 2px;
+      width: 100%;
+      background: #cdcdcd;
+
+      .aplayer-loaded {
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        background: #aaa;
+        height: 2px;
+        transition: all 0.5s ease;
+
+        will-change: width;
+      }
+
+      .aplayer-played {
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        height: 2px;
+        transition: background-color .3s;
+        will-change: width;
+
+        .aplayer-thumb {
+          position: absolute;
+          top: 0;
+          right: 5px;
+          margin-top: -5px;
+          margin-right: -10px;
+          width: 10px;
+          height: 10px;
+          border: 1px solid;
+          transform: scale(.8);
+          will-change: transform;
+          transition: transform 300ms, background-color .3s, border-color .3s;
+          border-radius: 50%;
+          background: #fff;
+          cursor: pointer !important;
+
+          &:hover {
+            transform: scale(1);
+          }
+        }
+      }
+    }
+  }
+</style>

src/components/aplayer-controller-volume.vue

@@ -15,9 +15,10 @@
         <div
           class="aplayer-volume"
           :style="{
-                  height: muted ? 0 : `${Math.trunc(volume * 100)}%`,
-                  background: theme
-                }">
+            height: muted ? 0 : `${Math.trunc(volume * 100)}%`,
+            background: theme
+          }"
+        >
         </div>
       </div>
     </div>
@@ -44,7 +45,6 @@
     },
     methods: {
       adjustVolume (e) {
-
         let percentage = (barHeight - e.clientY + getElementViewTop(this.$refs.bar)) / barHeight
         percentage = percentage > 0 ? percentage : 0
         percentage = percentage < 1 ? percentage : 1