网易云完整的播放流程

## 完整的播放流程

playController.vue

```vue
<div class="right">
<svg v-if="paused" class="icon" aria-hidden="true" @click="play"> <!--暂停按钮-->
<use xlink:href="#icon-bofang1"></use><!--阿里巴巴矢量图标-->
</svg>
<svg v-else class="icon" aria-hidden="true" @click="play"> <!--播放按钮-->
<use xlink:href="#icon-iconstop"></use><!--阿里巴巴矢量图标-->
</svg>
<svg class="icon" aria-hidden="true"> <!--阿里巴巴矢量图标-->
<use xlink:href="#icon-liebiao1"></use><!--阿里巴巴矢量图标-->
</svg>
</div>

<audio ref="audio" :src="`https://music.163.com/song/media/outer/url?id=${playlist[playCurrentIndex].id}.mp3`"></audio>

 

methods:{
// play函数，点击播放与暂停按钮时触发的函数
play(){
//this.$refs.audio 当前dudio标签
if(this.$refs.audio.paused ){
//处于暂停状态
this.$refs.audio.play();
this.paused = false;

}else{
//处于播放状态
this.$refs.audio.pause();
this.paused = true;
}
}
},
```

修复播放问题：（换歌时图标默认是播放,但歌曲不播放,要点一下才播放,但图标不变 ）

在index.js 里 设置 歌曲播放时 切换页面 让 v-if="paused" 的布尔值发生变化

修改store中state的值

①store/index.js

```js
state: {
playlist:[ //音乐播放列表 要默认有一条播放歌曲
{
name: "追梦赤子心",
id: 355992,
al:{
id: 35139,
name: "追梦痴子心",
pic: 19061133579343590,
picUrl: "http://p3.music.126.net/XDncptlBJ4_LN3hLBx-8aw==/19061133579343591.jpg",
pic_str: "19061133579343591",
}
},
] ,
playCurrentIndex:0 // 当前播放歌曲在音乐列表中的下标
},
getters: {
},
mutations: {
setPlaylist(state,value){ //定义一个函数，修改state中的playlist音乐播放器别表数据
state.playlist =value;
},
//1. 在mutations自定义函数setPlayIndex用来修改playCurrentIndex默认的下标值
//2.在playList.vue,给每一个歌曲添加单击事件，触发mutations的setPlayIndex，将当前点击歌曲的下标传递过去
setPlayIndex(state,value){ //定义一个函数，修改state中的playlist音乐播放器别表数据
state.playCurrentIndex=value;
},
},

//这是每一项右边的哪个播放按钮 直接把i给value
<svg class="icon" aria-hidden="true" @click="setPlayIndex(i)">

 

// 引入这个包直接获取index.js中的方法
import {mapMutations}from 'vuex'

methods:{
...mapMutations(['setPlayIndex']) // 接受store中的 setPlayIndex方法
},

 

```