基于VUE音乐播放器

音乐播放器

实现模拟音乐播放器的功能

---

---

前言

主要实现的功能有，导航栏的音乐播放，中间主体内容的四个路由页面，尾部音乐播放功能

---

一、主要用到的技术

html、css、JavaScript、vue-cli、vue-router、axios、element ui

二、页面布局（三部分）

1.导航栏

左侧：图标，标题显示块
右侧：搜索框显示

部分代码：（搜索框路由和提示信息）

// 非空判断
if (this.inputValue == '') {
  // 提示用户
  this.$message.warning('请输入内容')
}else{
  // 去搜索页 携带数据
  this.$router.push('/result?q='+this.inputValue)
}

2.主体内容

主要用到vue-router切换四个页面：发现音乐，推荐歌单，最新音乐，最新MV。
部分代码：（路由代码，其中用到了element-ui图标的样式）

<li>
  <router-link to="/discovery">
    <span class="iconfont el-icon-view"></span>
    发现音乐
  </router-link>
</li>
<li>
  <router-link to="/playlists">
    <span class="iconfont el-icon-s-operation"></span>
    推荐歌单
  </router-link>
</li>

3.尾部

直接用audio标签
部分代码：

<!-- autoplay 自动播放 -->
<audio :src='musicUrl' controls autoplay></audio>

三、主体内容路由

每一个路由有自己独立的组件页面：

1. 发现音乐
   banner图效果，直接用Element Ui的

<!-- 轮播图 -->
<el-carousel class="" :interval="4000" type="card">
  <!-- 循环获取到的接口数据 -->
  <el-carousel-item v-for="(item, index) in banners" :key="index">
    <img :src="item.imageUrl" alt="" />
  </el-carousel-item>
</el-carousel>

2. 推荐歌单
数据渲染页面，主要的是选项的歌单介绍和歌单切换的数据联动切换
这里用到了watch监听标签属性的变化
部分代码：

<span
  class="item"
  :class="{ active: tag == '全部' }"
  @click="tag = '全部'"
>
  全部
</span>

// 侦听器
watch: {
  tag() {
    // 顶部的 精品歌单
    this.topData()
    // 歌单列表
    this.listData()
    // 修改页码为1
    this.page = 1
  }
}

3. 最新音乐
   主要就是表格布局，然后进行数据渲染
4. 最新MV
   数据的切换和底部分页的数据联动，并且切换类型后分页数据联动切换，并且返回第一页。
   部分代码：

<span
 class="title"
 :class="{ active: area == '全部' }"
 @click="area = '全部'"
>
 全部
</span>

 watch: {
  area() {
    // 返回第一页
    this.page = 1
    // 获取数据
    this.getList()
  }
}

四、搜索页面

分为三个tab切换：歌曲，歌单，MV
用到element Ui

switch (this.activeIndex) {
    case 'songs':
      type = 1
      limit = 10
      break
    case 'lists':
      type = 1000
      limit = 10
      break
    case 'mv':
      type = 1004
      limit = 8
      break

    default:
      break
  }

总结

所有数据接口调用使用的是axios

补充：运行环境，nodeJs

npm install vue-cli -g
vue init webpack music
npm run serve

源码地址：github------>