用Vue搭建一个应用盒子（三）：音乐播放器

这个播放器的开发历时2个多月，并不是说它有多复杂，相反它的功能还非常不完善，仅具雏形。之所以磨磨蹭蹭这么久，一是因为拖延，二也是实习公司项目太紧。8月底结束实习前写完了样式，之后在家空闲时间多了，集中精力就把JS部分做完了。

这个播放器确实比当初构想的复杂，开始只打算做一个搜歌播放的功能。现在做出来的这个播放器，可以获取热门歌曲，可以搜歌，可以调整播放进度条，功能确实完善不少。

这次完成这个项目也是收获颇丰，点了不少新的技能点，当然，这个简陋的小项目也挖了不少坑，不知道啥时候能填上……

话不多说，看代码吧。

Muse-ui

不记得在哪个网站看到这个组件库的了，觉得好酷炫，于是用起来～

这是官网：地址

使用这个组件库的原因除了漂亮，还因为这是基于Vue 2.0，无缝对接，方便。

使用方法跟之前的插件一样，npm安装：

npm install --save muse-ui

安装好后，在main.js中注册。

import MuseUi from 'muse-ui'
import 'muse-ui/dist/muse-ui.css'
import 'muse-ui/dist/theme-light.css'

Vue.use(MuseUi)

就可以在项目中使用了。
PS：Muse-ui的icon是基于谷歌的Material icons，大家可以根据自己的需求到官网找icon的代码。

组件结构

接着我们就该搭建这个播放器的组件了。

结构如下：

||-- player.vue       // 主页面
|    |-- playerBox.vue   // 播放器组件
|    |-- popular.vue    // 热门歌曲页面
|        |-- songList.vue     // 歌曲列表页面 
|    |-- play.vue    // 播放器页面
|    |-- search.vue    // 搜索页面

PS：热门歌曲、搜索页面都能进入歌曲列表页面，播放器组件playerBox.vue 是放<audio>标签的组件，是功能性组件。

我们来分别叙述：

1.player.vue

直接看代码吧：

<template>
  <div class="player">

    <!-- banner here-->
    <router-view></router-view>

    <!-- navbar here -->
    <mu-paper>
      <mu-bottom-nav :value="bottomNav" @change="handleChange">
        <mu-bottom-nav-item value="popular" title="流行" icon="music_note" to="/popular"/>
        <mu-bottom-nav-item value="play" title="播放" icon="play_arrow" to="/play"/>
        <mu-bottom-nav-item value="search" title="搜索" icon="search" to="/search"/>
      </mu-bottom-nav>
    </mu-paper>

    <!-- html5 player here -->
    <playerBox></playerBox>

  </div>
</template>

<script>

import playerBox from './playerBox.vue'

export default {



  name: 'player',
  data(){
    const pa=this.$route.path;
    const Pa=pa.slice(1);

    return{
      bottomNav: Pa
    }
  },
  components: {
    playerBox
  },
  methods:{
    handleChange (val) {
      this.bottomNav = val
    },
    changebar(){
      const va=this.$route.path;
      const Va=va.slice(1);
      this.bottomNav = Va
    }
  },
  watch:{
    "$route":"changebar"
  }
}
</script>


<style lang="less" >
  .mu-bottom-nav{
    position: fixed!important;
    bottom: 0px;
    background: #fafafa!important;
    z-index: 5;

  }
</style>

解释一下：

1. 由于Muse-ui有部分样式用到了less，所以在这里我们需要npm安装一个less的依赖，安装好后即可使用。
   npm install less less-loader --save
2. 这里我们加载了一个底部导航，muse-ui的，官网可以查到相关代码。这里要注意的是，为了让用户体验更好，我们需要让我们的底部导航随当前路由变化而高亮。具体是用了一段JS代码。
   watch监视路由变化并触发一个method：changebar（），这个函数会获取当前的路由名，并把bottomNav的值设置为当前路由名——即高亮当前的路由页面

3. playerBox.vue组件之所以放在主组件里，就是为了音乐在每一个子页面都能播放，而不会因为跳转路由而停止播放。

   2.popular.vue

   这是推荐歌单界面，这里用到了一个轮播图插件，是基于vue的，使用起来比较方便，直接用npm安装：

npm install vue-awesome-swiper --save

安装好后，同样在main.js中注册：

import VueAwesomeSwiper from 'vue-awesome-swiper'

Vue.use(VueAwesomeSwiper)

然后我们来看页面的代码：

<template>
  <div class="popular">

    <!-- navbar here -->
    <mu-appbar>
      <div class="logo">
        iPlayer
      </div>
    </mu-appbar>

    <!-- banner here-->
    <mu-card>
        <swiper :options="swiperOption">
          <swiper-slide v-for="(item,index) in banners" :key="index">
            <mu-card-media>
              <img :src="item.pic">
            </mu-card-media>
          </swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
    </mu-card>

    <div class="gridlist-demo-container" >
      <mu-grid-list class="gridlist-demo">
        <mu-sub-header>热门歌单</mu-sub-header>
           <mu-grid-tile v-for="(item, index) in list" :key="index">
            <img :src="item.coverImgUrl"/>
            <span slot="title">{
   {
   item.name}}</span>
            <mu-icon-button icon="play_arrow" slot="action" @click="getListDetail(item.id)"/>
         </mu-grid-tile>
      </mu-grid-list>
    </div>

    <div class="footer-rights">
      <h4>版权归Godown Huang所有，请<a href="https://github.com/WE2008311">联系我</a>。</h4>
    </div>


  </div>
</template>

<script>
import {swiper,swiperSlide} from 'vue-awesome-swiper'
import axios from 'axios'

export default {

  name: 'popular',
  data(){
    return{
      swiperOption: {
        pagination: '.swiper-pagination',
        paginationClickable: true,
        autoplay: 4000,
        loop:true
      },
      banners:[],
      list: []
    }
  },
  components: {
    swiper,
    swiperSlide
  },
  computed:{

  },
  cre