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

Vol.33No.11Nov.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技术开发了一款音乐播放器，该播放器能实现歌曲列表显示、切换歌曲、更换音乐播放器背景等功能，能够满足用户的基本要求.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播放器中使用ul列表（无序列表）来进行侧拉页分栏，使用li标签定义每一个功能行，包含添加音乐、播放音乐、音效、换皮肤、换背景、设置、退出等，用div标签设置播放器顶部信息：点击头像登录、收藏首歌曲等.然后，在CSS里面设置侧拉页和列表的样式，选择合适的大小、位置等.在Html5设置分栏地过收稿日期院2017-08-26基金项目院皖西学院校级自然科学研究项目:基于ZigBee的温室大棚温湿度检测系统的设计与实现(WXZQ1420);皖西学院2015年省级大学生创新创业训练计划项目:基于51单片机的自动测控LED节能照明系统(006040216051)图1手机音乐播放器功能模块结构图35--图2歌曲播放及侧拉页的实现程中，每个分栏之前都出现了一个点，在CSS中，可以用list-style:none去除掉那些点.在设置列表和头部信息位置的时候，采用相对定位的参数rel-ative和绝对定位的参数absolute来进行设置，前者的设定是依照目标在文档里的位置，后者的设定是依照目标在父级元素的位置.当没有父级元素时，就追踪到顶级的内容块.通过nth-child(）选中父元素下面的目标内容进行设计.3.3歌曲播放功能的设计与实现主页面的设计是用div标签设计的，方法和侧拉页的页面设计类似.在Html5中用audio标签定义音乐，在盒子底部插入一个滚动条：inputtype=“range”class=“range”/，并设置几个按钮键，包括前进、暂停、后退等[5].在CSS中设置页面内容，采用了fixed语句，来区别在元素的定位类型上和之前侧拉页的设置.Fixed语句让设计内容放置在对应的位置，实现绝对定位的布局，通过屏幕大小自动调节页面大小.此处的弹性盒子，用display:-webkit-box语句，把100%的宽度默认分为十等份.overflow:scroll语句提供一种滚动机制，使元素框中出现滚动条.创建一个类用于保存音乐数据:数据模型，用varmusicModels=[]语句定义一个保存音乐数据模型的数组，然后把数据加入数组里，解析json数据.在JS中实现歌曲的播放与暂停功能.歌曲的播放和暂停切换，实际上是图片的切换，在播放和暂停按钮图片上添加点击事件，并监听这个事件，监听歌曲是否在播放.在歌曲播放页面上添加一个点击事件，用来实现任意选择播放.Siblings()函数用于找到兄弟元素，输入一些所需元素后，能够通过DOM发现关联内容并创建对应的jQuery实例.有众多供我们使用的选择器，这个函数能够可以管理它们，而这些内容的类型也和参数一样.在确定了一个选择器之后，会进行一些必需的检测，验证通过符合匹配元素.用if(this.currentTime==this.du-ration){_this.nextMusic();}语句设置顺序播放.播放完当前歌曲条目后，会按顺序自动播放列表中的下一首.3.4如何在JSON文件中添加歌曲在JSON文件中添加歌曲的标准样式如下：[{src:music/周杰伦-给我一首歌的时间.mp3,img:img/zhouJL.png,num:10,music-Name:给我一首歌的时间,name:周杰伦}]Src是源文件保存的目录路径，Img是图片文件，num是文件位置，musicName是歌名，name是歌手.添加歌曲可在JSON文件中按上述顺序填写，并把源文件导入到HBuilder中.4小结本文用HBuilder设计一款基于HTML5的音乐播放器，用div来构建音乐播放器的整体框架和侧拉页，用ul和li设计歌曲列表，用audio来播放歌曲，并且用input插入一个滚动条.在css里设置播放器所要的各个参数.在javascript里实现歌曲的播放、暂停、上一首、下一首等操作，同时也包括歌曲图片和歌曲的同步、侧拉页的显示和侧拉页换肤、主题背景的更换等选项.在pbl.json文件里实现歌曲的添加和更换功能[6].相比其他实现方法，此软件应用的平台更广泛，又节省了终端的存储空间，具有很高的实用性.HTML5技术是日后的发展方向，具有很高的发展潜力.———————————————————参考文献:也1页陈振宇.基于Android的手机音乐播放器的设计与开发[D].西安电子科技大学袁2014.也2页季玉茹袁王德忠.基于安卓的音乐播放器设计[J].电脑知识与技术,2013(25).也3页胡晓东.基于android平台音乐播放器的设计与实现[D].吉林大学袁2014.也4页苏航.基于Android的音乐播放器软件的设计与实现[D].电子科技大学袁2016.也5页郑培纯.基于HTML5的多媒体播放网站[D].吉林大学袁2014.也6页王健.iOS平台在线音乐播放器设计与实现[J].自动化技术与应用,2016(06).图3侧拉页换皮肤的实现36--