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

 更新时间:2016年08月05日 13:44:39   作者:玉菲莎   我要评论
这篇文章主要介绍了使用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打造简单的音乐播放器,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对澳门金沙网上娱乐网站的支持!

相关文章

  • js实现背景图自适应窗口大小

    js实现背景图自适应窗口大小

    本文分享了背景图自适应窗口大小的实例代码,具有一定的参考作用。下面跟着小编一起来看下吧
    2017-01-01
  • js模拟jquery的slide和fadeIn和fadeOut功能

    js模拟jquery的slide和fadeIn和fadeOut功能

    以前用过jquery的slideUp,slideDown,等许多很不错的方法,感觉很容易就能实现页面元素的动画效果!
    2010-07-07
  • javascript中SetInterval与setTimeout的定时器用法

    javascript中SetInterval与setTimeout的定时器用法

    Javascript的setTimeOut和setInterval函数应用非常广泛,它们都用来处理延时和定时任务,比如打开网页一段时间后弹出一个登录框,页面每隔一段时间发送异步请求获取最新数据等,本文文章通过代码示例给大家介绍javascript中SetInterval与setTimeout的定时器用法
    2015-08-08
  • 小程序getLocation需要在app.json中声明permission字段

    小程序getLocation需要在app.json中声明permission字段

    这篇文章主要介绍了小程序getLocation需要在app.json中声明permission字段,个别需要获取用户地理位置的在开发者工具调试时会出现getLocation需要在app.json中声明permission字段 ,下面我们就一起来解决一下
    2019-04-04
  • 浅谈JavaScript的push(),pop(),concat()方法

    浅谈JavaScript的push(),pop(),concat()方法

    下面小编就为大家带来一篇浅谈JavaScript的push(),pop(),concat()方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • javascript定时保存表单数据的代码

    javascript定时保存表单数据的代码

    我相信有不少TX用过QQ或163的邮箱吧?他们中有一个比较有用且有趣的功能,如果您在编写邮件,那在固定一个时间频率内,它会自动将您的邮件内容保存起来,以免丢失。
    2011-03-03
  • layer.open弹层查看缩略图的原图,自适应大小的实例

    layer.open弹层查看缩略图的原图,自适应大小的实例

    今天小编就为大家分享一篇layer.open弹层查看缩略图的原图,自适应大小的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • css+js实现部分区域高亮可编辑遮罩层

    css+js实现部分区域高亮可编辑遮罩层

    下面介绍我在项目中实现的方式,全屏遮罩,部分区域可操作,需要的朋友可以参考下
    2014-03-03
  • JavaScript时间日期操作实例小结【5个示例】

    JavaScript时间日期操作实例小结【5个示例】

    这篇文章主要介绍了JavaScript时间日期操作,结合5个具体实例形式分析了javascript针对日期时间的各种常见操作技巧,需要的朋友可以参考下
    2018-12-12
  • 浅谈js函数的多种定义方法与区别

    浅谈js函数的多种定义方法与区别

    下面小编就为大家带来一篇浅谈js函数的多种定义方法与区别。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11

最新评论