实现网易云项目播放音乐功能

1.在compontents下创建playcontroller.vue

<template>
    <div class="playController">
        <div class="left">
            <img src="https://p1.music.126.net/R-Eg1aZcut8jKYM6UP5fvA==/109951167311919702.jpg" alt="">
            <div class="content">追梦赤子心</div>
            <div class="tips">横划划切换上下手</div>
        </div>
        <div class="right">
            <svg class="icon" aria-hidden="true">  <!--阿里巴巴矢量图标-->
                <use xlink:href="#icon-bofang1"></use><!--阿里巴巴矢量图标-->
            </svg>
            <svg class="icon" aria-hidden="true">  <!--阿里巴巴矢量图标-->
                <use xlink:href="#icon-liebiao1"></use><!--阿里巴巴矢量图标-->
            </svg>
        </div>
    </div>
</template>
​
<script>
    export default {
        name: "playController"
    }
</script>

 

2.在app.vue主组件中引入playController全局播放组件,在components中注册,组件名当标签名使用(挂载)

<template>
​
  <router-view/>
  <playController/>                                                       //使用单元
</template>
<script>
  import playController from "@/components/playController";      // 引入这个单元
  export default{
    components:{
      playController                //挂载单元
    }
  }
</script>
​

3.实现每次进入歌单 播放列表就会把playlist 改为当前歌单的中的一条歌曲进行播放

store/index.js存放模拟数据 和修改数据方法mutations

export default createStore({
  //组件之间共享的数据   15034
  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;
    }
  },
  actions: {
  },
  modules: {
  }
})

2. 法①在listView中引入

 import store from '@/store/index.js'

3.进入歌单详情页面，将歌单中的播放列表传递到srore的playlist中去 commit触发mutation中的函数

musics.playlist = res.data.playlist;
store.commit('setPlaylist',musics.playlist.tracks)

 

4. 法② playController.vue通过下标获取歌单数据

<script>
    import {mapState} from 'vuex'
    export default {
        name: "playController",
        //获取当前播放歌曲的详细信息，就是通过下标 拿到数据
        computed:{
            ...mapState['playlist','playCurrentIndex']
        }
    }
</script>

5.把playcontroll拿到playlist并播放