Merge branch 'release/1.4.0'

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