VUE实现音频播放器方案（播放列表）

在项目中，需要对某个景点多个介绍音频文件进行播放，建立这个音频播放器还是费了不少周折。前几天在做音频文件上传与管理时时一次是单个文件的上传、加载与播放还是比较简单，网上有很多案例，找来看看基本上就会，但在做播放时，同一个景点会存在多个播放音频，如何让用户可以切换播放音频试了很多方法，再加上vue-aplayer不同版本使用方法的不同，遇到了不少问题，后通过深入研究，利用播放列清解决了项目需求。最终的效果如下：

一、Vue-aplayer导入

Vue-aplayer可以在使用的组件中使用时才导入，定义数据属时注意与旧版本不一样，并且music是对象，不是数组，网上很多文章是利用music定义数组作为清单，直接传组件是无法使用的，我在这儿耽搁了差不多一天时间，反复测试都不行，把版本降下去也不行，后来还是看观看最对应版的文档（1.6.1）才搞明白，1.6.1清单要放到list对象

//导入
import aplayer from 'vue-aplayer'
//定义组件
 components: {  aplayer },
   //变量定义
   			isPlay: false,   //定义一个延迟加载变量，一开始music.src为空，系统加载为报错
        audio: {
          progress: false,
          progressPercent: 0,
          successPercent: 0,
          list: [],   //播放列表
          music: {  //对象，
            title: '',
            artist: '',
            src: '',
            lrc: '[00:00.00]lrc here\n[00:01.00]aplayer'
          }
        },
     //组件引用
         <aplayer v-if="isPlay"
                       :list="musicList"   //列表
                       :music="audio.music"  //object对象，不能是字符串或数组，不要修改上面定义的结构
          ></aplayer>

二、音频数据初始化

//构建时，建立数据清单，将音频导入

created() {
      this.getList()
    },
 //建立数据清单
    methods: {
      /** 查询景区文件列表 */
      getList() {
        this.loading = true
        listScenicFile(this.queryParams).then(response => {  //后台查询文件清单，音频文件存在OSS中，数据库保存URL
          this.scenicFileList = response.rows
          this.total = response.total

          //缺省显示第一个文件或增加为播放列表
              this.audio.music.src = process.env.VUE_APP_OSS_PREFIX + this.scenicFileList[0].fileUrl
          
              this.audio.music.title = this.scenicFileList[0].subject
              this.audio.music.artist = this.scenicFileList[0].fileName
              this.scenicFileList.forEach(element => {
                let obj = {
                  title: element.subject,
                  src: process.env.VUE_APP_OSS_PREFIX + element.fileUrl,
                  artist: element.fileName
                }
                this.musicList.push(obj)
                this.isPlay = true
              })
           }
          this.loading = false
        })
      },
    }

三、经验小结

这个组件构建建中主要碰到到以下几个问题：

1、aplayer音频文件切换十分复杂

刚开始很自然想到自己建立音频文件清单，用户需要时点击音频文件进行切换即可，在富文本、图片、视频都是采用的这个方案，自己做文件清单还可以做得漂亮一些，比如用轮播图片。这个方法试了很久，最后一关过不去，对audio.music对象下的SRC、title、artist赋值，并且跟踪打印出来也是切换了但就是不生效。

后从网上查到，需要让对组件重新进行渲染，用了V-if，Key值变化方法，对于aplayer组件仍不生效，网上有人提到用深度监测，但没有提供具体方法，没法实施。

2、列表实现

刚开始用audio.music实现更表，网上也有很多方法是这么介绍的，但aplayer升版后audio.music是object，不是array，一旦用audio.music实施现了播放列表，系统总是报错误，组件需要的是object，而提供的是array.

后台研究官方文档，列表要用与music并列的list[]对象实现，最终找到解决方法。

3、延迟加载

刚开始由于没有指定音频文件信息，系统打开加载总报一个错，后找到原因利用v-if实现延迟加载解决。

this.isPlay = true