基于web的音乐播放器的设计与实现

邓海文

关键词：HTML5；vue；webpack

中图分类号：TP37 文献标识码：A 文章编号：1009-3044（2018）29-0098-02

1 背景

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

2 系统设计

2.1 系统功能分析

项目要支持大多数音乐文件的格式，还要有丰富的音乐资源。项目设计的预期实现功能有：支持大多数音乐格式、当前音乐播放进度可以进行空盒子。显示播放总时长和当前播放时长、兼容各大浏览器，登录注册、收藏音乐等，使用户更轻松方便进行音乐试听。

音乐播放器主要实现功能描述如下：

1）歌曲播放控制，就是改變当前歌曲的状态及歌曲信息。

2）时间控制，界面上要有歌曲总长度和当前进度，并且可以通过手动拖拽来改变当期那进度。

3）歌词同步，显示当前播放进度对应的歌词信息。

4）跳转页面是歌曲状态不变，即首页跳转列表详情，之前播放的歌曲不变，播放进度不变。这是通过vuex来存储当前歌曲播放的所有信息来实现的。

5）搜索功能，用户可以通过关键词或歌曲名来搜索歌曲，点击搜索后会返回所有符合要求的歌曲列表。

6）声音控制，调整歌曲音量的大小。

7）皮肤控制，可以自定义皮肤，选择自己中意的样式，也有默认样式，即歌手写真。

8）注册登录。

2.2 系统功能结构图

在综合系统功能分析的基础上，得到系统的功能结构图如下：

1）项目整体：该项目有两个实体，即管理员，用户。主要行为有：管理员登录，管理员管理后台数据；用户注册，用户登录，在线试听。管理员登录后才能进行相关的后台数据，如查询用户信息，添加或审核相应歌曲，修改项目中歌曲对应的详细信息，如歌曲名称，歌曲播放链接，歌曲对应海报等，及时更新后台数据。而用户则必须注册后台才能自动存入用户信息，以便登录时可以在线试听，下载，收藏歌曲，和记录该用户账号的历史记录，用户在线试听无需登录就可进行，点击相应歌曲，就会根据歌曲hash值来向后台请求该歌曲的详细信息，如图1所示：

2）用户：针对用户来说，在线试听包括以下功能，选择歌曲，铃声订阅，歌曲暂停播放，歌词同步，歌曲进度控制，下载歌曲，收藏歌曲。用户通过以上功能来体验歌曲，放松心情。如图2所示：

3） 管理员：后台管理员主要负责歌曲审核，添加歌曲，管理用户信息。

① 歌曲审核：添加歌曲之前管理员要审核歌曲信息，例如歌曲是否存在，歌曲是否健康，歌手，歌词是否正确，信息是否完整等，通过后才可进行添加。

② 添加歌曲：当有新的歌曲时，管理员要添加该歌曲到数据库中，比如歌曲名称，歌手，歌曲播放链接，歌曲带时间轴的歌词，歌曲对应海报，歌曲分裂等一系列歌曲信息。

③ 管理用户信息：进入后台首页，管理用户的登录信息和登录时进行的操作，比如当用户注册时，用户初始信息存入数据库，当用户更改密码时要及时更新数据库，当用户进行相应的操作，比如收藏歌曲，订阅彩铃等，这些行为也要存储在后台用户数据中，以便用户查看或进行其他行为。如图3所示：

3 系统部分功能的实现与程序的编制

系统主要包含以下功能模块：注册模块、登录模块、歌曲搜索模块、歌曲播放控制模块、歌曲在线列表模块等模块。以下为部分模块的界面和实现部分代码。

3.1 歌曲搜索模块

作为一个音乐播放器，歌曲搜索功能是必不可少的，通过输入歌曲名称，歌手名字或关键词后点击搜索按钮来向后台请求数据，返回符合条件的数据总数和歌曲列表。例如输入王杰点击搜索，搜索后界面如图4所示。向后台请求数据的代码如图5所示。

其中this.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.

【通联编辑：谢媛媛】