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

1、基于html5技术的音乐播放器的设计与 实现常志强刘正余杨劲楠皖西学院电子与信息工程学院摘要：本文采用iitml5技术，设计了一款音乐播放器，可以实现在线播放音乐，也可 以加载终端里存储的音乐文件有效地减少了用户终端的安装软件数目，提供更 好的使用效果.html5技术还具有跨平台等优点，一次开发，可以应用在不同平 台系统上.关键词：html5 技术; 音乐播放器;hbu订dcr;收稿日期：2017-08-26基金：皖西学院校级自然科学研究项目：基于zigbee的温室大棚温湿度检测系统 的设计与实现(wxzq1420)received： 2017-08-26随着技术不断地进步，咅乐播放器以不同的

2、类型出现，pc端的c/s模式和b/s 模式、移动终端的c/s模式等.由于html5技术的日趋成熟，以及移动终端硬件 的不断升级，出现了软件的b/s模式，只需要一个浏览器，就可以实现在线音 乐的播放，也可以播放终端上储存的音乐文件1-4.本文基于html5技术开发了一款咅乐播放器，该播放器能实现歌曲列表显示、切 换歌曲、更换音乐播放器背景等功能，能够满足用户的基本要求.1 html5技术简介html5技术在2014年正式形成规范，它比以往的任何html版木都要强大，更具 有交互性，将多媒体技术纳入其中，还提供了应用程序接口它可以处理文字、 咅视频、图像等，有很好的人机交互性.html还可以跨平台

3、，在不同的系统平台 上都可以使用述可以跨设备，浏览器可以屏幕的尺寸不同来自动调整网页.2开发环境介绍（hbuilder）hbuilder是一款支持html5的web开发集成开发环境它的优点有很多，最重要 的是能快速输入代码，系统能够在用户输入代码的过程中，提示后面可能的输 入代码，方便快捷地完成代码的输入另外，系统还提供能够实现具体功能的可 编程代码块，代码块的长度均在50行以上，这样就更便捷高效地完成相关功能 模块.hbu订der的另外一个优点就是操作简便它可以进行全方位提示，能提示语法、 id、class.图片、链接、字体等很多内容;在输入代码的过程中可以完全不用鼠 标此外，它还支持很多种

4、流行的编程语言，例如：jsp、php> ruby等web语言, coffee、less等编译型语言.3系统设计及实现3.1系统功能模块结构图如图1所示，系统的功能模块图，系统包含播放列表、侧拉页设置、播放界面控 制等三个部分，播放列表可以实现添加歌曲，移除歌曲；侧拉页设置可以进行换 背景、换皮肤、分栏、滑动动画;播放界面控制分为显示收藏歌曲等功能.侧拉页设置音乐播放器播放界面控制图1手机咅乐播放器功能模块结构图下载原图鉴于篇幅的问题，本文屮将对几个主要的设计过程进行介绍，尽量对其详细描 述细节.3. 2侧拉页分栏的设计与实现html5播放器中使用31列表(无序列表)来进行侧拉页分栏，使用

5、li标签 定义每一个功能行，包含添加音乐、播放音乐、音效、换皮肤、换背景、设置、 退出等，用div标签设置播放器顶部信息：点击头像登录、收藏首歌曲等.然后,在css里面设置侧拉页和列表的样式，选择合适的大小、位置等在html5 设置分栏地过程中，每个分栏之前都出现了一个点，在css中，可以用 list-style:none去除掉那些点在设置列表和头部信息位置的时候，采用相对 定位的参数relative和绝对定位的参数absolute来进行设置，前者的设定是依 照目标在文档里的位置，后者的设定是依照目标在父级元素的位置当没有父级 元素时，就追踪到顶级的内容块通过nth-child ()选中父元素

6、下面的目标内 容进行设计.o需扫挪斤就 h師序播放g音效换皮肤 门换背量睡眠睜设置0送岀点击收藏图2歌曲播放及侧拉页的实现下载原图3.3歌曲播放功能的设计与实现主页面的设计是用div标签设计的，方法和侧拉页的页面设计类似.在html5 中用audio标签定义音乐，在盒子底部插入一个滚动条:inputtype二“range” class二“rane” />,并设置儿个按钮键，包括前进、暂停、后 退等.在css中设置页面内容，采用了 fixed语句，来区别在元素的定位类型上和之前 侧拉页的设置.fixed语句让设计内容放置在对应的位置，实现绝对定位的布局, 通过屏幕大小自动调节页而大小此处的

7、弹性盒子，用di splay:-webkit-box语 句，把100%的宽度默认分为十等份.overflow: scroll语句提供一种滚动机制， 使元素框中出现滚动条.创建一个类用于保存咅乐数据:数据模型，用var music models二语句定义一 个保存音乐数据模型的数组，然后把数据加入数组里，解析json数据.在js中实现歌曲的播放与暂停功能歌曲的播放和暂停切换，实际上是图片的 切换，在播放和暂停按钮图片上添加点击事件，并监听这个事件，监听歌曲是 否在播放在歌曲播放页面上添加一个点击事件，用来实现任意选择播放.siblings ()函数用于找到兄弟元素，输入一些所需元素后，能够通过d

8、0m 发现关联内容并创建对应的j query实例有众多供我们使用的选择器，这个函 数能够可以管理它们，而这些内容的类型也和参数一样在确定了一个选择器z 后，会进行一些必需的检测，验证通过符合匹配元素用if (this, current time=this. duration) this, next music () ;语句设置顺序播放播放完当 前歌曲条目后，会按顺序直动播放列表中的下一首.3.4如何在js0n文件中添加歌曲在json文件中添加歌曲的标准样式如下：src："music/周杰伦-给我一首歌的时间.mp3", img：img/zhou jl. png",

9、，zmusicname，/：，/给我一首歌的时间 "name":"周杰伦src是源文件保存的目录路径，img是图片文件，num是文件位置，music name 是歌名，name是歌手添加歌曲可在json文件中按上述顺序填写，并把源文件 导入到ubuilder中.点站收藏1扫颤音 約m g扫描听歌音效换皮肤换背昌睡眠p *1 设置退岀点击头像登录收簸10苜歌曲图3侧拉页换皮肤的实现 下载原图4小结本文用hbuilder设计一款基于html5的音乐播放器，用div来构建音乐播放器 的整体框架和侧拉页，用ul和li设计歌曲列表，用audio来播放歌曲，并且用 input插入一个滚动条.在css里设置播放器所要的各个参数.在javascript里 实现歌曲的播放、暂停、上一首、下一首等操作，同时也包括歌曲图片和歌曲的 同步、侧拉页的显示和侧拉页换肤、主题背景的更换等选项在pbl. json文件里 实现歌曲的添加和更换功能凹.相比其他实现方法，此软件应用的平台更广泛，乂节省了终端的存储空间，具 有很高的实用性.html5技术是日后的发展方向，具有很高的发展潜力.参考文献1 陈振宇基于android的手机音斥播放器的设计与开发d 西安电子科技大 学，2014.2 季玉茹，王德忠基于安卓的音斥播放器设计j电脑知识与技术，2013 (