aplayer有很多版本，适配vue得，有适配原生得，其中适配vue还有两种(Vue-Aplayer,vue-aplayer)，这里推荐后者，博主两种都用了，但是第二种用着比较好，文档比较完善，前者文档好像不完善，功能不足(前者有个bug，音量调节有些情况无法使用，找了半天也没有修复，遂放弃)。

直接贴上作者得github 点我，其中给出了各种版本，任君选取。

直接进入整体，这里就用博主最后用在项目得一款vue-aplayer做分享。

需求

1. 在切换上下首歌曲得时候，保证页面的列表和播放器对应上(页面列表会显示当前播放歌曲)。
2. 点击页面列表显示播放器且自动播放。
3. 满足多个列表得切换。
4. 一直播放，不会因为页面切换销毁播放器

解决方案

1. 在切换上下首歌曲得时候，保证页面得列表和播放器对应上(页面列表会显示当前播放歌曲)。
   方案：切换得时候传递id，触发页面得监听改变样式
2. 点击页面列表显示播放器且自动播放。
   方案：用store传递值，播放器监听该值，做到显示和自动播放
3. 满足多个列表得切换。
   方案：在页面切换音乐或者切换列表得时候重新做数据传入播放器
4. 一直播放，不会因为页面切换销毁播放器
   方案：用一个单独的页面做播放器，用store控制。

实现

首先：

引入播放器，等等就不细说，如果有问题点击这里按照文档引入。

    <aplayer
      id="mypaly"
      ref="aplayer"
      @canplay="canplay"
      :audio="$store.state.playList"
      :listFolded="true"
      fixed
      @play="onPlay"
      @pause="onPause"
      @listSwitch="audioChange"
      :listMaxHeight="80"
      :mini="false"
    />
import APlayer from "@moefe/vue-aplayer";

其次

先写播放页面，做好监听，这里主要思路就是：
1.监听页面传递过来的音乐id的变化进行切换该列表的其他歌。
2.监听页面传递过来的列表变化做好整个列表变化的音乐列表切换。

   "$store.state.playPlayer"(newValue, oldValue) {

      let that = this;
      if (newValue) {

        this.timer = window.setTimeout(() => {
          if (!this.play) {
            that.$refs.aplayer.play();

            window.clearTimeout(that.timer);
            this.$refs.aplayer.hideLrc();
          }
        }, 10);
      }

注意：传递播放的音源的时候要异步传递，因为所有的请求都是部分请求得(206)，如果同步传递就会报错，数据不全
3.监听到变化后传递数据给播放器，同时控制播放器播放。

  "$store.state.playIndex"(newValue, oldValue) {
      let that = this;

      this.timer = window.setTimeout(() => {
        that.$refs.aplayer.switch(newValue);//切换歌曲

        window.clearTimeout(that.timer);

      }, 10);

4.当用户操作播放器也要把播放的数据传递回页面做到页面响应。

   audioChange(data) {
      this.$store.commit("backData", data);
    }

下面代码

<template>
    <aplayer
      id="mypaly"
      ref="aplayer"
      @canplay="canplay"
      :audio="$store.state.playList"
      :listFolded="true"
      fixed
      @play="onPlay"
      @pause="onPause"
      @listSwitch="audioChange"
      :listMaxHeight="80"
      :mini="false"
    />
</template>

<script>
// import Aplayer from 'vue-aplayer'
import APlayer from "@moefe/vue-aplayer";

export default {
  components: {
    APlayer
  },
  beforeDestroy() {
    window.clearInterval(this.timer);
  },
  watch: {
    "$store.state.playIndex"(newValue, oldValue) {
      let that = this;

      this.timer = window.setTimeout(() => {

        that.play = true;

        that.$refs.aplayer.switch(newValue);

        window.clearTimeout(that.timer);

      }, 10);
    },

    "$store.state.playPlayer"(newValue, oldValue) {

      let that = this;
      if (newValue) {

        this.timer = window.setTimeout(() => {
          if (!this.play) {
            that.$refs.aplayer.play();

            window.clearTimeout(that.timer);
            this.$refs.aplayer.hideLrc();
          }
        }, 10);
      } else {
        this.play = false;
        this.$refs.aplayer.pause();
        this.$refs.aplayer.hideLrc();
      }
    }

  },
  data() {
    return {
      play: false,
    };
  },
  methods: {
    close() {
      this.$store.commit("pauser");
      this.$store.commit("closePlayer");
    },
    audioChange(data) {
      this.$store.commit("backData", data);
    }
  }
};
</script>

最后仓库得配置和页面逻辑

仓库：

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
        state: {
          showPlayer:false, // 显示播放器
          playPlayer:false, // 播放
          playerInfo:{
            name: '',
            artist: '',
            url: '',
            cover: ‘’
          }, // 播放器信息
          playList:[],
          playIndex:1,
          playId:'',
          backPlay:false,//播放器返回得状态
          audioData:{},
        },
        mutations: {
          // 设置播放信息
          setPlayerInfo(state,playerInfo) {
            state.playerInfo = playerInfo
          },
          //设置播放列表
          setPlayList(state,playList) {
            state.playList = playList
          },
            //设置播放列表
          setPlayIndex(state,index) {
            state.playIndex = index
          },
          // 播放
          play(state) {
            state.playPlayer = true
          },
 
          // 打开播放器
          openPlayer(state) {
            state.showPlayer = true
          },
          //返回当前播放数据
          backData(state,data){
            console.log('aaaa');
            
            state.audioData = data
          },
        }
      })

页面

监听返回得数据进行页面变化

    "$store.state.audioData"(newValue, oldValue) {
      if (newValue.id == this.playIndex) {
        return 0;
      } else {
        this.playIndex = newValue.id;
      }
    },

当然还要制作音乐列表和一些点击事件，这里博主就不放代码了。

写在最后，有什么问题都可以联系博主，博主坐标成都，欢迎交流哦