音乐播放器

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



前言

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


一、主要用到的技术

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
  }
}

在这里插入图片描述

  1. 最新音乐
    主要就是表格布局,然后进行数据渲染
  2. 最新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------>

Logo

前往低代码交流专区

更多推荐