基于HTML5技术的音乐播放器的设计与 实现

常志强刘正余杨劲楠

皖西学院电子与信息工程学院

摘要：

本文采用IITML5技术，设计了一款音乐播放器，可以实现在线播放音乐，也可 以加载终端里存储的音乐文件?有效地减少了用户终端的安装软件数目，提供更 好的使用效果.HTML5技术还具有跨平台等优点，一次开发，可以应用在不同平 台系统上.

关键词：

HTML5 技术; 音乐播放器;Hbu订dcr;

收稿日期：2017-08-26

基金：皖西学院校级自然科学研究项目：基于ZigBee的温室大棚温湿度检测系统 的设计与实现(WXZQ1420)

Received： 2017-08-26

随着技术不断地进步，咅乐播放器以不同的类型出现，PC端的C/S模式和B/S 模式、移动终端的C/S模式等.由于HTML5技术的日趋成熟，以及移动终端硬件 的不断升级，出现了软件的B/S模式，只需要一个浏览器，就可以实现在线音 乐的播放，也可以播放终端上储存的音乐文件[1-4].

本文基于HTML5技术开发了一款咅乐播放器，该播放器能实现歌曲列表显示、切 换歌曲、更换音乐播放器背景等功能，能够满足用户的基本要求.

1 HTML5技术简介

HTML5技术在2014年正式形成规范，它比以往的任何HTML版木都要强大，更具 有交互性，将多媒体技术纳入其中，还提供了应用程序接口?它可以处理文字、 咅视频、图像等，有很好的人机交互性.HTML还可以跨平台，在不同的系统平台 上都可以使用?述可以跨设备，浏览器可以屏幕的尺寸不同来自动调整网页.

2开发环境介绍(HBuilder)

HBuilder是一款支持HTML5的Web开发集成开发环境?它的优点有很多，最重要 的是能快速输入代码，系统能够在用户输入代码的过程中，提示后面可能的输 入代码，方便快捷地完成代码的输入?另外，系统还提供能够实现具体功能的可 编程代码块，代码块的长度均在50行以上，这样就更便捷高效地完成相关功能 模块.

HBu订der的另外一个优点就是操作简便?它可以进行全方位提示，能提示语法、 ID、Class.图片、链接、字体等很多内容;在输入代码的过程中可以完全不用鼠 标?此外，它还支持很多种流行的编程语言，例如：jsp、php> ruby等web语言, coffee、less等编译型语言.

3系统设计及实现

3.1系统功能模块结构图

如图1所示，系统的功能模块图，系统包含播放列表、侧拉页设置、播放界面控 制等三个部分，播放列表可以实现添加歌曲，移除歌曲；侧拉页设置可以进行换 背景、换皮肤、分栏、滑动动画;播放界面控制分为显示收藏歌曲等功能.

侧拉页设置音乐播放器

侧拉页设置

播放界面控制

图1手机咅乐播放器功能模块结构图下载原图

鉴于篇幅的问题，本文屮将对几个主要的设计过程进行介绍，尽量对其详细描 述细节.

3. 2侧拉页分栏的设计与实现

Html5播放器中使用31〉列表(无序列表)来进行侧拉页分栏，使用〈li＞标签 定义每一个功能行，包含添加音乐、播放音乐、音效、换皮肤、换背景、设置、 退出等，用〈div＞标签设置播放器顶部信息：点击头像登录、收藏首歌曲等.

然后,在CSS里面设置侧拉页和列表的样式，选择合适的大小、位置等?在Html5 设置分栏地过程中，每个分栏之前都出现了一个点，在CSS中，可以用 list-style:none去除掉那些点?在设置列表和头部信息位置的时候，采用相对 定位的参数relative和绝对定位的参数absolute来进行设置，前者的设定是依 照目标在文档里的位置，后者的设定是依照目标在父级元素的位置?当没有父级 元素时，就追踪到顶级的内容块?通过nth-child ()选中父元素下面的目标内 容进行设计.

o需扫挪斤就 H師序播放G音效■换皮肤 门换背量

o

需扫挪斤就 H師序播放

G音效

■换皮肤 门换背量

◎睡眠

睜设置

0送岀

点击

收藏

图2歌曲播放及侧拉页的实现下载原图

3.3歌曲播放功能的设计与实现

主页面的设计是用〈div＞标签设计的，方法和侧拉页的页面设计类似.在Html5 中用＜audio＞标签定义音乐，在盒子底部插入一个滚动条:＜input

type二“range” class二“ran^e” />,并设置儿个按钮键，包括前进、暂停、后 退等⑸.

在CSS中设置页面内容，采用了 fixed语句，来区别在元素的定位类型上和之前 侧拉页的设置.Fixed语句让设计内容放置在对应的位置，实现绝对定位的布局, 通过屏幕大小自动调节页而大小?此处的弹性盒子，用di splay:-webkit-box语 句，把100%的宽度默认分为十等份.overflow: scroll语句提供一种滚动机制， 使元素框中出现滚动条.

创建一个类用于保存咅乐数据:数据模