基于HTML5技术的音乐播放器的设计与实现
基于HTML5技术的音乐播放器的设计与实现
常志强 刘正余 杨劲楠
皖西学院电子与信息工程学院
X
新浪微博
腾讯微博
人人网
开心网
豆瓣网
网易微博
摘????要：
本文采用HTML5技术, 设计了一款音乐播放器, 可以实现在线播放音乐, 也可以加载终端里存储的音乐文件.有效地减少了用户终端的安装软件数目, 提供更好的使用效果.HTML5技术还具有跨平台等优点, 一次开发, 可以应用在不同平台系统上.
关键词：
HTML5技术; 音乐播放器; Hbuilder;
收稿日期：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行以上, 这样就更便捷高效地完成相关功能模块.
HBuilder的另外一个优点就是操作简便.它可以进行全方位提示, 能提示语法、ID、Class、图片、链接、字体等很多内容;在输入代码的过程中可以完全不用鼠标.此外, 它还支持很多种流行的编程语言, 例如:jsp、php、ruby等web语言, coffee、less等编译型语言.
3 系统设计及实现
3.1 系统功能模块结构图
如图1所示, 系统的功能模块图, 系统包含播放列表、侧拉页设置、播放界面控制等三个部分, 播放列表可以实现添加歌曲, 移除歌曲;侧拉页设置可以进行换背景、换皮肤、分栏、滑动动画;播放界面控制分为显示收藏歌曲等功能.
图1 手机音乐播放器功能模块结构图 ??下载原图
鉴于篇幅的问题, 本文中将对几个主要的设计过程进行介绍, 尽量对其详细描述细节.
3.2 侧拉页分栏的设计与实现
Html5播放器中使用
- 列表 (无序列表) 来进行侧拉页分栏, 使用
- 标签定义每一个功能行, 包含添加音乐、播放音乐、音效、换皮肤、换背景、设置、退出等, 用
然后, 在CSS里面设置侧拉页和列表的样式, 选择合适的大小、位置等.在Html5设置分栏地过程中, 每个分栏之前都出现了一个点, 在CSS中, 可以用list-style:none去除掉那些点.在设置列表和头部信息位置的时候, 采用相对定位的参数relative和绝对定位的参数absolute来进行设置, 前者的设定是依照目标在文档里的位置, 后者的设定是依照目标在父级元素的位置.当没有父级元素时, 就追踪到顶级的内容块.通过nth-child () 选中父元素下面的目标内容进行设计.
图2 歌曲播放及侧拉页的实现 ??下载原图
3.3 歌曲播放功能的设计与实现
主页面的设计是用
在CSS中设置页面内容, 采用了fixed语句, 来区别在元素的定位类型上和之前侧拉页的设置.Fixed语句让设计内容放置在对应的位置, 实现绝对定位的布局, 通过屏幕大小自动调节页面大小.此处的弹性盒子, 用display:-webkit-box语句, 把100%的宽度默认分为十等份.overflow:scroll语句提供一种滚动机制
