基于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 歌曲播放功能的设计与实现

  主页面的设计是用

  标签设计的, 方法和侧拉页的页面设计类似.在Html5中用标签定义音乐, 在盒子底部插入一个滚动条:, 并设置几个按钮键, 包括前进、暂停、后退等[5].

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