基于web的音乐播放器的设计与实现(共4页)

1、精选优质文档-倾情为你奉上基于web的音乐播放器的设计与实现作者：邓海文来源：电脑知识与技术2018年第29期        摘要：设计并实现了一个基于web的音乐播放器。音乐播放器以vue为主要框架，以vue-cli脚手架和webpack的主要框架来构建项目原型，主要使用mint-ui、swiper插件、音频控制，相关技术是html5、css、javascript和zepto.js、touch.js、vuex、node.js、express等等。该项目实现了音乐播放、音乐暂停、歌曲切换、歌词同步、歌曲快速向前和倒

2、带、歌曲搜索、歌曲收藏、歌曲下载还有登录注册等功能。        关键词：HTML5；vue；webpack        中图分类号：TP37 文献标识码：A 文章编号：1009-3044（2018）29-0098-02        1 背景        音乐是情感的衍生

3、品，它代表着人们的内心感受。音乐播放网站是人们经常使用的平台之一，通过音乐平台人们可以放松心情，感受生活的喜怒哀乐，得到精神上的升华，这大大推动了各式各样音乐播放软件的产生，尤其是基于web的音乐播放器。课题开发了一个功能完善，界面美观，操作简单的音乐播放器。        2 系统设计        2.1 系统功能分析        项目要支持大多数音乐

4、文件的格式，还要有丰富的音乐资源。项目设计的预期实现功能有：支持大多数音乐格式、当前音乐播放进度可以进行空盒子。显示播放总时长和当前播放时长、兼容各大浏览器，登录注册、收藏音乐等，使用户更轻松方便进行音乐试听。        音乐播放器主要实现功能描述如下：        1）歌曲播放控制，就是改变当前歌曲的状态及歌曲信息。        2）时间控制，界面

5、上要有歌曲总长度和当前进度，并且可以通过手动拖拽来改变当期那进度。        3）歌词同步，显示当前播放进度对应的歌词信息。        4）跳转页面是歌曲状态不变，即首页跳转列表详情，之前播放的歌曲不变，播放进度不变。这是通过vuex来存储当前歌曲播放的所有信息来实现的。        5）搜索功能，用户可以通过关键词或歌曲名来搜索歌曲，点击搜索后会

6、返回所有符合要求的歌曲列表。        6）声音控制，调整歌曲音量的大小。        7）皮肤控制，可以自定义皮肤，选择自己中意的样式，也有默认样式，即歌手写真。        8）注册登录。        2.2 系统功能结构图   

7、60;    在综合系统功能分析的基础上，得到系统的功能结构图如下：        1）项目整体：该项目有两个实体，即管理员，用户。主要行为有：管理员登录，管理员管理后台数据；用户注册，用户登录，在线试听。管理员登录后才能进行相关的后台数据，如查询用户信息，添加或审核相应歌曲，修改项目中歌曲对应的详细信息，如歌曲名称，歌曲播放链接，歌曲对应海报等，及时更新后台数据。而用户则必须注册后台才能自动存入用户信息，以便登录时可以在线试听，下载，收藏歌曲，和记录该用户账号的历史记录，用

8、户在线试听无需登录就可进行，点击相应歌曲，就会根据歌曲hash值来向后台请求该歌曲的详细信息，如图1所示：        2）用户：针对用户来说，在线试听包括以下功能，选择歌曲，铃声订阅，歌曲暂停播放，歌词同步，歌曲进度控制，下载歌曲，收藏歌曲。用户通过以上功能来体验歌曲，放松心情。如图2所示：        3） 管理员：后台管理员主要负责歌曲审核，添加歌曲，管理用户信息。     &

9、#160;   歌曲审核：添加歌曲之前管理员要审核歌曲信息，例如歌曲是否存在，歌曲是否健康，歌手，歌词是否正确，信息是否完整等，通过后才可进行添加。         添加歌曲：当有新的歌曲时，管理员要添加该歌曲到数据库中，比如歌曲名称，歌手，歌曲播放链接，歌曲带时间轴的歌词，歌曲对应海报，歌曲分裂等一系列歌曲信息。         管理用户信息：进入后台首页，管理用户的登录信息和登录时进行的操作，比如当用户注册时，用

10、户初始信息存入数据库，当用户更改密码时要及时更新数据库，当用户进行相应的操作，比如收藏歌曲，订阅彩铃等，这些行为也要存储在后台用户数据中，以便用户查看或进行其他行为。如图3所示：        3 系统部分功能的实现与程序的编制        系统主要包含以下功能模块：注册模块、登录模块、歌曲搜索模块、歌曲播放控制模块、歌曲在线列表模块等模块。以下为部分模块的界面和实现部分代码。     

11、;   3.1 歌曲搜索模块        作为一个音乐播放器，歌曲搜索功能是必不可少的，通过输入歌曲名称，歌手名字或关键词后点击搜索按钮来向后台请求数据，返回符合条件的数据总数和歌曲列表。例如输入王杰点击搜索，搜索后界面如图4所示。向后台请求数据的代码如图5所示。        其中this.keyword是通过vue双向的双向数据绑定来获取输入框的value值，在请求数据时作为参数向后台请求数据。

12、60;       3.2 播放控制模块        player组件中有点击下一曲功能，歌曲详情页有点击上一曲/下一曲功能，vuex中存在一个全局变量songIndex，当点击上一曲时，让songIndex-，当点击下一曲时，songIndex+，界面如图6所示：        点击上一曲和下一曲实现的具体代码如图7所示：   

13、60;    点击上一曲播放调用函数prev（），点击下一曲播放调用函数next（），这些函数都放在公共空间的actions中，以便在每个页面都可以调用这些函数。        该播放器经试用，功能基本达到了要求，完全能够适应互联网音乐播放器的一般要求。但界面还可以制作更精美，此项目对于设计与制作一个基于web的其他小程序具有参考意义。        参考文献：        1 曲大旗. 基于Android的手机音乐播放器的设计与实现Z.        2 李光毅. 中文高性能响应式Web开发实战M. 北京： 人民邮电出版社， 2016.        3 贾铮. HTML+CSS网页布局开发指南M. 北京： 清华大学出版社， 2008.