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

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

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

需求

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

解决方案

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

实现

首先：

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

<aplayerid="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><aplayerid="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;}},

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

写在最后，有什么问题都可以联系博主，博主坐标成都，欢迎交流哦
aplayer得使用，记一次aplayer/Aplayer开发心得-编程之家