实现网易云项目 底部音乐播放什么歌曲就显示对应该歌单的图片

一.实现动态效果：底下音乐播放的什么图片就对应显示该歌单的图片

store/index.js

<div class="left">
            <img :src="playlist[playCurrentIndex].al.picUrl" alt="">
            <div class="content">{{ playlist[playCurrentIndex].al.name }}</div>
            <div class="tips">横划划切换上下手</div>
        </div>

computed:{
            ...mapState(['playlist','playCurrentIndex'])   // 获取stroe的state的数据
        }

二.audio播放音乐 页面播放音乐

playController.vue

<!--
 autoplay 自动播放
 paused 当前歌曲暂停状态
 play()  播放当前歌曲
 pause() 暂停歌曲
 -->
        <audio       :src="`https://music.163.com/song/media/outer/url?id=${playlist[playCurrentIndex].id}.mp3`"></audio>
​
​
​

三、 播放按钮如何只显示一个

playController.vue

  <svg v-if="paused" class="icon" aria-hidden="true">  <!--阿里巴巴矢量图标-->
                <use xlink:href="#icon-bofang1"></use><!--阿里巴巴矢量图标-->
            </svg>
            <svg v-else class="icon" aria-hidden="true">  <!--阿里巴巴矢量图标-->
                <use xlink:href="#icon-iconstop"></use><!--阿里巴巴矢量图标-->
            </svg>
​

定义一个布尔值

 data(){
          return{
              paused:true
          }

四、完整的播放流程

playController.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

 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方法
        },
​
​
​