《基于web的音乐播放器的设计与实现(共4页).doc》由会员分享，可在线阅读，更多相关《基于web的音乐播放器的设计与实现(共4页).doc（4页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、精选优质文档-倾情为你奉上基于web的音乐播放器的设计与实现作者：邓海文来源：电脑知识与技术2018年第29期摘要：设计并实现了一个基于web的音乐播放器。音乐播放器以vue为主要框架，以vue-cli脚手架和webpack的主要框架来构建项目原型，主要使用mint-ui、swiper插件、音频控制，相关技术是html5、css、javascript和zepto.js、touch.js、vuex、node.js、express等等。该项目实现了音乐播放、音乐暂停、歌曲切换、歌词同步、歌曲快速向前和倒带、歌曲搜索、歌曲收藏、歌曲下载还有登录注册等功能。关键词：HTML5；vue；webpack中
2、图分类号：TP37 文献标识码：A 文章编号：1009-3044（2018）29-0098-021 背景音乐是情感的衍生品，它代表着人们的内心感受。音乐播放网站是人们经常使用的平台之一，通过音乐平台人们可以放松心情，感受生活的喜怒哀乐，得到精神上的升华，这大大推动了各式各样音乐播放软件的产生，尤其是基于web的音乐播放器。课题开发了一个功能完善，界面美观，操作简单的音乐播放器。2 系统设计2.1 系统功能分析项目要支持大多数音乐文件的格式，还要有丰富的音乐资源。项目设计的预期实现功能有：支持大多数音乐格式、当前音乐播放进度可以进行空盒子。显示播放总时长和当前播放时长、兼容各大浏览器，登录注册、
3、收藏音乐等，使用户更轻松方便进行音乐试听。音乐播放器主要实现功能描述如下：1）歌曲播放控制，就是改变当前歌曲的状态及歌曲信息。2）时间控制，界面上要有歌曲总长度和当前进度，并且可以通过手动拖拽来改变当期那进度。3）歌词同步，显示当前播放进度对应的歌词信息。4）跳转页面是歌曲状态不变，即首页跳转列表详情，之前播放的歌曲不变，播放进度不变。这是通过vuex来存储当前歌曲播放的所有信息来实现的。5）搜索功能，用户可以通过关键词或歌曲名来搜索歌曲，点击搜索后会返回所有符合要求的歌曲列表。6）声音控制，调整歌曲音量的大小。7）皮肤控制，可以自定义皮肤，选择自己中意的样式，也有默认样式，即歌手写真。8）注
4、册登录。2.2 系统功能结构图在综合系统功能分析的基础上，得到系统的功能结构图如下：1）项目整体：该项目有两个实体，即管理员，用户。主要行为有：管理员登录，管理员管理后台数据；用户注册，用户登录，在线试听。管理员登录后才能进行相关的后台数据，如查询用户信息，添加或审核相应歌曲，修改项目中歌曲对应的详细信息，如歌曲名称，歌曲播放链接，歌曲对应海报等，及时更新后台数据。而用户则必须注册后台才能自动存入用户信息，以便登录时可以在线试听，下载，收藏歌曲，和记录该用户账号的历史记录，用户在线试听无需登录就可进行，点击相应歌曲，就会根据歌曲hash值来向后台请求该歌曲的详细信息，如图1所示：2）用户：针对
5、用户来说，在线试听包括以下功能，选择歌曲，铃声订阅，歌曲暂停播放，歌词同步，歌曲进度控制，下载歌曲，收藏歌曲。用户通过以上功能来体验歌曲，放松心情。如图2所示：3） 管理员：后台管理员主要负责歌曲审核，添加歌曲，管理用户信息。 歌曲审核：添加歌曲之前管理员要审核歌曲信息，例如歌曲是否存在，歌曲是否健康，歌手，歌词是否正确，信息是否完整等，通过后才可进行添加。 添加歌曲：当有新的歌曲时，管理员要添加该歌曲到数据库中，比如歌曲名称，歌手，歌曲播放链接，歌曲带时间轴的歌词，歌曲对应海报，歌曲分裂等一系列歌曲信息。 管理用户信息：进入后台首页，管理用户的登录信息和登录时进行的操作，比如当用户注册时，用
6、户初始信息存入数据库，当用户更改密码时要及时更新数据库，当用户进行相应的操作，比如收藏歌曲，订阅彩铃等，这些行为也要存储在后台用户数据中，以便用户查看或进行其他行为。如图3所示：3 系统部分功能的实现与程序的编制系统主要包含以下功能模块：注册模块、登录模块、歌曲搜索模块、歌曲播放控制模块、歌曲在线列表模块等模块。以下为部分模块的界面和实现部分代码。3.1 歌曲搜索模块作为一个音乐播放器，歌曲搜索功能是必不可少的，通过输入歌曲名称，歌手名字或关键词后点击搜索按钮来向后台请求数据，返回符合条件的数据总数和歌曲列表。例如输入王杰点击搜索，搜索后界面如图4所示。向后台请求数据的代码如图5所示。其中th
7、is.keyword是通过vue双向的双向数据绑定来获取输入框的value值，在请求数据时作为参数向后台请求数据。3.2 播放控制模块player组件中有点击下一曲功能，歌曲详情页有点击上一曲/下一曲功能，vuex中存在一个全局变量songIndex，当点击上一曲时，让songIndex-，当点击下一曲时，songIndex+，界面如图6所示：点击上一曲和下一曲实现的具体代码如图7所示：点击上一曲播放调用函数prev（），点击下一曲播放调用函数next（），这些函数都放在公共空间的actions中，以便在每个页面都可以调用这些函数。该播放器经试用，功能基本达到了要求，完全能够适应互联网音乐播放器的一般要求。但界面还可以制作更精美，此项目对于设计与制作一个基于web的其他小程序具有参考意义。参考文献：1 曲大旗. 基于Android的手机音乐播放器的设计与实现Z.2 李光毅. 中文高性能响应式Web开发实战M. 北京： 人民邮电出版社， 2016.3 贾铮. HTML+CSS网页布局开发指南M. 北京： 清华大学出版社， 2008.4 谢希仁. 计算机网络M. 北京： 电子工业出版社， 2003.5 Bob Quinn， Dave Shute. Windows Sockets网络编程M. 徐磊， 译.北京： 机械工业出版社， 2012.【通联编辑：谢媛媛】专心-专注-专业