javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > h5 bootstrap音乐播放器

使用HTML5+Boostrap打造简单的音乐播放器

作者:玉菲莎

这篇文章主要介绍了使用HTML5+Boostrap打造简单的音乐播放器 的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下

前言:这个是综合一下我最近在学的东西做的小Demo,到实际使用还有距离,但是用来练手巩固知识点还是不错的,最近在二刷JS书和Boostrap.css的源码,做完这个Demo也算是暂告一段落,接下来是jQuery的源码和Boostrap.js的源码,任务很艰巨呢,加油~在此就不整篇的贴代码了,如果感兴趣的小伙伴可以发消息给我,可以把代码传给你们~

正文:

先上效果图

1.布局:Boostrap里的响应式和自适应布局是自然跑不掉的,container中嵌套row再分别嵌套aside和main(H5新标签)和div(id="musicConsole")。aside是左侧的音乐列表,main是右边的歌词显示框,div是下面的控件框。

2.主要实现功能:

  (1)添加歌曲(歌曲列表右上角的“+”图标)和删除歌曲(歌曲列表右上角的“垃圾箱”图标)

  (2)点击歌曲列表中的歌曲:会播放对于曲目;如果有歌词,则滚动显示歌词,如果没有歌词则显示“没有歌词”;进度条和时间会随着歌曲的播放而变化。

  (3)点击上一首按钮(竖线+三角形),会播放上一首歌曲:如果有歌词,则滚动显示歌词,如果没有歌词则显示“没有歌词”;进度条和时间会随着歌曲的播放而变化。

    点击播放按钮(三角形),会变为暂停按钮(双竖线),歌曲也相应的由播放状态变为暂停状态。

    点击下一首按钮(三角形+竖线),会播放下一首歌曲:如果有歌词,则滚动显示歌词,如果没有歌词则显示“没有歌词”;进度条和时间会随着歌曲的播放而变化。

    点击音响按钮(喇叭),会变为静音按钮(喇叭+"x"),歌曲也相应的变为静音状态。

    点击循环按钮(带箭头的圈),会变为单次播放,保持循环按钮,则会重复单曲循环。

3.遇到的问题:

  (1)glyphicon的大小用font-size改变

     因为用到Boostrap的图标,默认的大小太小了,试了一下width和height没反应,才反应过来,是用font-size来改变大小的

  (2)str.replace(oldStr,newStr)

    点击播放按钮时,会改变播放状态,相应的也要改变按钮的图标,所以用到了replace,搞了半天都没有反应,结果发现是因为它是重新生成一个字符串,不是直接在原串上面改,orz

  (3)浏览器因为安全考虑,很难读取本地文件

    本来打算用localStorage来存音乐列表中的内容的,用H5的FileReader试了半天,没办法,此路不通只有放弃。

FileReader可以用来读取图片或者html文件,它的readeAsDataURL方法能够获取文件路径,说到这个,就真的要笑了,我试着存了一个音乐文件,ok,再来,啥?localStorage内存用完了?5M就存一个文件路径?逗我?

  以下的问题,全部是歌词部分了。。。做的时候真的有很心累的感觉。。。

  (4)解析歌词时遇到的问题

歌词一般是lrc文件,其实就是纯文本,用AJAX可以获得后台传过来的数据,但是没有后台陪我玩啊,所以就只能直接把歌词copy过来,当做死数据,写在字符串里。

原计划用split('\r\n')把字符串分解为一句一句的歌词,放到数组里。

结果各种报错啊,搞了半天,最后定位在这个split上了,网上查了半天,哦,原来是js的锅。

因为js语法不强制在最后结尾加分号,所以用系统换行符会(即,回车)被卡死。主要有两个应对方案:

1)手动删除换行符,改用\n换行,此方案在页面上会有换行效果  

2)在系统换行符前面加\,此方案在页面上无换行效果

  (5)滚动歌词时遇到的问题

 歌词添加成功后,完美的显示了,但是还要和音乐同步才行,和当前播放时间的比对,相应的歌词列表的top向上移动多少,当歌词为空时的判断,最后边界的判断,这些问题都搞定后,又冒出来一个循环播放,歌词不能重新显示。搞了半天,我去,居然是因为loop=true时,ended事件监听不到,没办法,只能舍弃loop,在ended的事件里面加入对loop的判断了。

嗯,很好,完美的显示了,心情有点小激动。到处乱点,测试看还有没有问题,想着应该可以完结了的时候,又出错了【冷漠.jpg】,接着调吧。先找出错误的原因,在F12开发人员工具(我去百度,上面就是这么写的)中,看到歌词active样式变化居然有两个同时添加,所以向上滚动才会这么快,而且还一会儿上一会儿下的乱跳。找到罪魁祸首了,setTimeout。因为是递归调用,所以需要clclearTimeout来清除。ok,现在基本没问题啦。

后话:

  啊,还有,因为我最近很迷马鹿啊,所以就亲切的给我的播放器取个名字叫“摩洛哥播放器”吧~【大哥比哈特】做这个Demo花了三天时间,单是歌词就调了一半以上的时间,而且可以看到,遇到的主要问题都是歌词的显示问题,醉了。不过,不论怎么说,最后做出来了, 看到它终于能正常的滚了,那种成就感还是很有的。虽然做出来了,但是就在我写这篇博客的时候,我又发现错误了orz。

以上所述是小编给大家介绍的使用HTML5+Boostrap打造简单的音乐播放器,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

您可能感兴趣的文章:
阅读全文