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

Vol.33No.11 Nov.2017 赤峰学院学报(自然科学版) JournalofChifengUniversity(NaturalScienceEdition) 第 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 技术开发了一款音乐播放器，该播放器能实现歌曲列表显示、切换歌曲、更换音乐播放器背景等功能，能够满足用户的基本要 求. 1 HTML5 技术简介 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 播放器中使用

• 列表(无序列表)来进行侧拉页分栏，使用
• 标签定义每一个功能行，包 含 添 加音乐、播放音乐、音效、换皮肤、换背景、设 置 、退 出 等 ，用
  标签设置播放器顶部信息：点 击 头 像 登 录 、收 藏 首 歌 曲 等 . 然 后 ，在 CSS 里面设置侧拉页和列表的样式，选择合适的大小、位 置 等 . 在 Html5 设置分栏地过 收稿日期院2017-08-26 基金项目