基于vue+html的Web网页音乐播放器设计

资源下载地址：https://download.csdn.net/download/sheziqiong/85908612
资源下载地址：https://download.csdn.net/download/sheziqiong/85908612
摘要
在互联网高速发展的今天，网络已成为人们生活的一部分，多媒体技术也越来越受到人们的重视。本次设计对目前使用较多的音乐播放器作出较详细的比较，分析了一些音乐播放器的功能,怎样能满足使用者对播放器的需求。
音乐是一种声音符号,表达人的思想感情。是人们思想的载体之一。音乐是有目的和内涵的,其中隐含了作者的生活体验,思想情怀。一款好的pc音乐播放器不仅,能够提供好的音乐播放效果,更能够为用户提供方便的操作。
本文主要介绍一个基于vue+vue-cli+vue利用技术html+css+js、和visual studio Code编辑工具对网页版音乐播放器(PC)进行编写和设计。并对开发中涉及到的关键技术作了探讨，同时给出了详细的系统设计过程、部分界面图及主要功能运行流程图,最后说明实现的功能。本文还对开发过程中遇到的问题和解决方法进行了详细的讨论,该音乐播放器集播放、暂停、停止、快进、快退、下一曲、上一曲、音量调节等功能与一体,性能良好。第一阶段首先对项目进行全面、仔细的需求分析,并准确做出项目进度安排,明确每个阶段的任务;第二阶段是进行项目分模块编码;第三阶段对项目进行全面的测试。
关键词：网页制作;模块化;音乐播放器; vue框架;

目录
摘要 2
第一章绪论 4
1.1 开发的背景 4
1.2 开发的意义 4
第二章网页开发环境以及概述 4
2.1 开发工具和技术 4
第三章网站需求分析 5
3.1 可行性分析 5
3.2 网页的界面需求设计 6
3.3 网站实现功能 7
第四章网站制作 9
4.1 播放器菜单列表详细设计 9
4.2 搜索栏目的详细设计 10
4.3 发现歌单页面的详细设计 10
4.4 推荐歌单页面、最新音乐页面、最新MV页面代码详细设计 13
小结 15
致谢 16
参考文献 17
根据项目,我们可以获得项目的基本需求,以下从不同角度来描述系统的需求。系统的功能需求,我们分成三部分来概括,即播放器的基本控制需求,播放列表管理需求和播放器友好性需求。以下分别描述:
(1)发现歌单部分需求：
A．展示最新推荐歌单模块，点击某歌单模块跳转歌单详情界面：
歌单详情界面分别展示了歌单详细信息：歌单名称、歌单作者、简介等和歌单的歌曲列表(点击某歌曲列表播放音乐)和歌单的评论。
B．展示最新音乐模块，点击某歌曲列表进行播放音乐。
C．展示推荐MV模块，点击某MV列表跳转MV详情界面：
MV详情界面分别有播放MV视频的功能、展示了MV的详情信息(Mv名称
MV作者、简介等和MV的精彩评论部分)、MV的相关推荐列表(点击列表查看MV详情)。
(2)推荐歌单部分需求：
A．展示精品歌单模块（精品歌单简介）
B．展示最新歌单分类模块，分别有全部、华语、流行、摇滚、民谣、电子另类/独立轻音乐、综艺、影视原、ACG，点击分类列表切换歌单类别，点击某歌单模块跳转歌单详情界面。
(3)最新音乐部分需求：
展示最新音乐分类列表模块，分别有全部、华语、欧美、日本、韩国，点击分类列表切换音乐列表类别，点击某音乐列表播放该音乐。
(4)最新MV部分需求：
展示最新MV分类列表模块，分别有地区、类型、排序三大类别，点击分类列表切换,V列表类别，点击某MV列表跳转该MV详情界面。
(5)搜索需求：
输入搜索内容点击回车跳转搜索界面进行搜索，结果页面分别展示相关的歌曲、歌单、MV。点击歌曲列表进行播放该歌曲，点击歌单列表跳转该歌单详情界面，点击MV列表跳转该MV的详情界面。
(6)音乐播放器基本控制需求：
A.在播放器正在运行时,用户选择一首歌曲后单击“播放”按钮,播放器将播放选中的播放列表中的音乐,并同时显示当前进度;当歌曲未暂停或停止时,用户单击“暂停”按钮,播放器将进入暂停状态;播放器正在播放或暂停时,用户单击“停止”按钮。
B.对播放器的音量的高低进行拖拉式的控制
C.对播放器运行时当前播放的音乐进行下载
主页代码如下：

<template><div class="home"><div class="nav"><ul><li class="nav-item-wrap" v-for="(item,index) in routerList" :key="index"><router-link :to="item.to" class="nav-item"><i class="icon" :class="item.icon"></i>{{item.name}}</router-link></li></ul></div><router-view id="main" /></div>
</template><script>
export default {name: "Home",data() {return {routerList: [{name: "发现歌单",to: "/find",icon: "el-icon-orange"},{name: "推荐歌单",to: "/recom",icon: "el-icon-s-unfold"},{name: "最新音乐",to: "/newlist",icon: "el-icon-service"},{name: "最新MV",to: "/newmy",icon: "el-icon-film"}]};},components: {},watch: {$route(to, from) {}}
};
</script>
<style lang="scss" scoped>
.home {display: flex;.nav {flex: 0 0 9rem;background-color: #ededed;.nav-item-wrap {.nav-item {display: block;height: 2.8rem;line-height: 2.8rem;text-align: left;padding-left: 1.5rem;color: inherit;.icon {margin-right: 0.5rem;}&:hover {background-color: #e7e7e7;}&.router-link-active {color: var(--color-font-active);background-color: #e7e7e7;}}}}#main {flex: 1;background-color: white;padding: 1rem 5rem;overflow-y: scroll;}
}
</style>

资源下载地址：https://download.csdn.net/download/sheziqiong/85908612
资源下载地址：https://download.csdn.net/download/sheziqiong/85908612

基于vue+html的Web网页音乐播放器设计相关推荐

基于Qt的仿酷狗音乐播放器设计（二）
简述在上一文"基于Qt的仿酷狗音乐播放器设计(一)"中,博主给出了仿酷狗界面的部分内容,在本文中将继续分析酷狗界面,并作出相应的分析. 下面我们来看一下酷狗界面中的左侧滑动页控制 ...
web html5音乐播放器设计与实现,基于HTML5技术的音乐播放器的设计与实现
Vol.33No.11Nov.2017 赤峰学院学报(自然科学版) Journal of Chifeng University (Natural Science Edition )第33卷第11期(下 ...
基于html和Node.js的网页音乐播放器设计
资源下载地址:https://download.csdn.net/download/sheziqiong/86781841 资源下载地址:https://download.csdn.net/downl ...
基于Qt的仿酷狗音乐播放器设计（一）
简述其实在很早以前博主就有想用Qt写一个比较好的音乐播放器的想法,但由于平时上课的压力和以前对设计模式和代码规范做的不太好,一直没有进行.所以在这个寒假准备好好的设计一下.下面先简单的说明一下设计的 ...
基于vue,js的简单pc 音乐播放器
一.简介项目github地址根据github上的http://www.daiwei.org/components/d-audio/来制作的他的是使用纯ES6来写的,我是通过改写他的,使用VUE来 ...
基于Vue.js和Node.js音乐播放器的设计与实现
一.所使用的技术 1.Vue.node.js.MongoDB.elementUI.Express.moment. 二.所实现的功能 1.实现前后端分离,后台用node的express写管理接口.前台用 ...
【前端小项目】基于Vue全家桶的在线音乐播放器（提供在线演示）
基于Vue实现的网页音乐播放器
基于Vue现实网页音乐播放器该音乐播放器是由父组件和子组件相结合通过axios获取音乐的相关属性,将其显示在界面,通过点击实现相应的操作.链接为https://download.csdn.net/d ...
java计算机毕业设计Vue.js音乐播放器设计与实现源码+数据库+系统+lw文档
java计算机毕业设计Vue.js音乐播放器设计与实现源码+数据库+系统+lw文档 java计算机毕业设计Vue.js音乐播放器设计与实现源码+数据库+系统+lw文档本源码技术栈: 项目架构:B/S ...
JAVA毕业设计Vue.js音乐播放器设计与实现计算机源码+lw文档+系统+调试部署+数据库
JAVA毕业设计Vue.js音乐播放器设计与实现计算机源码+lw文档+系统+调试部署+数据库 JAVA毕业设计Vue.js音乐播放器设计与实现计算机源码+lw文档+系统+调试部署+数据库本源码技术栈 ...

基于vue+html的Web网页音乐播放器设计

基于vue+html的Web网页音乐播放器设计相关推荐

最新文章

热门文章