🐛fix(audio): 修复音乐播放时不能拖动进度条和音量的问题

package.json

@@ -15,6 +15,7 @@
     "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml"
   },
   "dependencies": {
+    "@moefe/vue-aplayer": "^2.0.0-beta.5",
     "ant-design-vue": "^1.6.5",
     "clipboard": "^2.0.6",
     "cropperjs": "^1.5.6",

public/index.html

@@ -18,20 +18,20 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css"/>
     <script src="https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.js"></script>
     <!--element-ui.js-->
-    <link rel="stylesheet" href="https://unpkg.com/element-ui@2.15.1/lib/theme-chalk/index.css">
+    <link rel="stylesheet" href="https://unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css">
-    <script src="https://unpkg.com/element-ui@2.15.1/lib/index.js"></script>
+    <script src="https://unpkg.com/element-ui@2.13.0/lib/index.js"></script>
     <!--pl-table.js-->
     <link rel="stylesheet" href="https://unpkg.com/pl-table@2.7.5/themes/index.css">
     <script src="https://unpkg.com/pl-table@2.7.5/lib/index.js"></script>
     <!--viewer css-->
     <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/viewerjs/1.7.1/viewer.min.css">
-    <!--vue-aplayer-->
+    <!--vue-aplayer-theme-->
-    <script src="//cdn.jsdelivr.net/npm/vue-aplayer"></script>
+    <script src="https://cdn.jsdelivr.net/npm/colorthief@2.0.2/src/color-thief.js"></script>
 
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= webpackConfig.name %></title>
     <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/5.13.0/css/all.min.css">
-    <script src="https://cdn.jsdelivr.net/npm/colorthief@2.0.2/src/color-thief.js"></script>
+
   </head>
   <body>
     <noscript>

src/components/preview/AudioPreview.vue

@@ -1,19 +1,19 @@
 <template>
   <div ref="audioPreview" v-if="show">
   <div class="audio-player"
-    v-aplayerDrag="{ x: transformX, y: transformY }"
+       v-aplayerDrag="{ x: transformX, y: transformY }"
     @mouseenter="closeBarShow = true" @mouseleave="closeBarShow = false" @touchmove="closeBarShow = true" @touchend="touchend">
-    <aplayer
+    <a-player
       ref="audioPlayer"
       autoplay
       listFolded
       loop.sync="all"
       order.sync="list"
       :mini.sync="mini"
-      :music.sync="music"
+      :audio="list"
-      :list="list"
+      :lrc-type="0"
-      :lrc-type="0">
+    >
-    </aplayer>
+    </a-player>
   <div v-show="closeBarShow" class="close-bar" @click="close">
     <svg-icon class="audio-player-close" icon-class="close"/>
   </div>
@@ -36,19 +36,12 @@ export default {
     data() {
       return {
         pc: this.$pc,
-        transformX: !this.$pc ? 20: (document.body.clientWidth-500)/2,
+        transformX: !this.$pc ? document.body.clientWidth - 100: (document.body.clientWidth-500)/2,
-        transformY: 0,
+        transformY: !this.$pc ? document.body.clientHeight/2 - 100 : 0,
         show: false,
         closeBarShow: false,
-        music: {
+        // api ==>  https://aplayer.netlify.app/docs/guide/options.html#volume
-          id: '',
+        audios: [],
-          src: '', // 音频文件的 URL
-          title: '', // 歌曲名称
-          artist: '', // 演唱者
-          pic: '', // 封面图片 URL
-          lrc: '', // LRC 歌词或者歌词文件的 URL
-          theme: '', // 歌曲的主题色，会覆盖播放器的主题色
-        },
         list: [],
         mini: !this.$pc,
         audioPlayerDoc: undefined
@@ -65,31 +58,40 @@ export default {
     },
     mounted() {
       Bus.$on('onAddAudio',(newFile, audioCoverUrl) => {
-        this.show = true
+        if (!this.show) {
+          this.show = true
+        }
         let url = fileConfig.previewUrl(this.$store.state.user.name, newFile, this.$store.getters.token)
         if(!this.$store.state.user.token){
           url = fileConfig.publicPreviewUrl(newFile.id, window.shareId);
         }
         let music = newFile.music
         let fileName = newFile.name.substring(0,newFile.name.length - newFile.suffix.length-1)
-        this.music = {
+        let musicOperation = {
           id: newFile.id,
-          src: url,
+          url: url,
-          title: music.songName ? music.songName : fileName,
+          name: music.songName ? music.songName : fileName,
           artist: music.songName ? music.singer : fileName,
-          pic: music.songName ? audioCoverUrl+newFile.id :'',
+          cover: music.songName ? audioCoverUrl+newFile.id :'',
-          lrc: '',
+          type: newFile.contentType
-          theme: 'pic'
         }
-        let musicIndex = this.list.findIndex(item => item.id === newFile.id)
+        let musicIndex = this.audios.findIndex(item => item.id === newFile.id)
         if(musicIndex < 0){
-          this.list.push(this.music)
+          if(this.audios.length === 1){
-          this.$nextTick(()=>{
+            let loop = document.querySelector('.aplayer-icon.aplayer-icon-loop');
-            this.$refs.audioPlayer.play()
+            loop.style.display = 'inline'
-          })
+            let order = document.querySelector('.aplayer-icon.aplayer-icon-order');
+            order.style.display = 'inline'
+          }
+          this.audios.push(musicOperation)
+          setTimeout(() => {
+            this.list = this.audios
+            setTimeout(() => {
+              this.$refs.audioPlayer.switch(this.audios.length - 1)
+            }, 0)
+          }, 0)
         } else {
-          let listMusic = this.audioPlayerDoc.querySelectorAll('.aplayer-list ol li')[musicIndex]
+          this.$refs.audioPlayer.switch(musicIndex)
-          listMusic.click()
         }
       })
     },
@@ -98,7 +100,7 @@ export default {
         this.show = false
         this.audioPlayerDoc = undefined
         this.$refs.audioPlayer.pause()
-        this.list.splice(0, this.list.length)
+        this.audios.splice(0, this.audios.length)
       },
       touchend() {
         const that = this

src/main.js

@@ -37,10 +37,11 @@ Vue.use(EVueContextmenu)
 
 Vue.use(vant.ImagePreview)
 
-Vue.component('Aplayer', VueAPlayer)
+import APlayer from '@moefe/vue-aplayer';
-VueAPlayer.disableVersionBadge = true
+Vue.use(APlayer, {
-
+  defaultCover: 'https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=200&q=60',
-Vue.config.productionTip = false
+  productionTip: false, // 是否在控制台输出版本信息
+});
 
 new Vue({
   el: '#app',