当前位置：文档库 › 基于HTML5技术的音乐播放器的设计与实现

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

Vol.33No.11Nov.2017

赤峰学院学报（自然科学版）

Journal of Chifeng University （Natural Science Edition ）第33卷第11期（下）

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

常志强,刘正余,杨劲楠

(皖西学院电子与信息工程学院,安徽

六安

237012)

摘

要:本文采用HTML5技术,设计了一款音乐播放器,可以实现在线播放音乐,也可以加载终端里

存储的音乐文件.有效地减少了用户终端的安装软件数目,提供更好的使用效果.HTML5技术还具有跨平台等优点,一次开发,可以应用在不同平台系统上.

关键词:HTML5技术;音乐播放器;Hbuilder 中图分类号：TP399

文献标识码：A

文章编号：1673-260X （2017）11-0035-02

随着技术不断地进步，

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

本文基于HTML5技术开发了一款音乐播放

器，该播放器能实现歌曲列表显示、

切换歌曲、更换音乐播放器背景等功能，能够满足用户的基本要求.

1HTML5技术简介

HTML5技术在2014年正式形成规范，它比以

往的任何HTML 版本都要强大，更具有交互性，

将多媒体技术纳入其中，还提供了应用程序接口.它

可以处理文字、音视频、图像等，

有很好的人机交互性.HTML 还可以跨平台，在不同的系统平台上都可以使用.还可以跨设备，浏览器可以屏幕的尺寸不同来自动调整网页.

2开发环境介绍(HBuilder )

HBuilder 是一款支持HTML5的Web 开发集成开发环境.它的优点有很多，最重要的是能快速

输入代码，系统能够在用户输入代码的过程中，

提示后面可能的输入代码，方便快捷地完成代码的输入.另外，系统还提供能够实现具体功能的可编程代码块，代码块的长度均在50行以上，这样就更便捷高效地完成相关功能模块.

HBuilder 的另外一个优点就是操作简便.它可

以进行全方位提示，能提示语法、ID 、Class 、图片、

链接、字体等很多内容；在输入代码的过程中可以完

全不用鼠标.此外，它还支持很多种流行的编程语言，例如：jsp 、php 、ruby 等web 语言，coffee 、less 等编译型语言.

3系统设计及实现

3.1系统功能模块结构图

如图1所示，系统的功能模块图，

系统包含播放列表、侧拉页设置、播放界面控制等三个部分，

播放列表可以实现添加歌曲，

移除歌曲；侧拉页设置可以进行换背景、换皮肤、分栏、滑动动画；播放界面控制分为显示收藏歌曲等功能.

鉴于篇幅的问题，本文中将对几个主要的设计

过程进行介绍，尽量对其详细描述细节.3.2侧拉页分栏的设计与实现

Html5播放器中使用

来进行侧拉页分栏，使用