一.實現動態效果：底下音樂播放的什麼圖片就對應顯示該歌單的圖片

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