HTML5使用Audio标签实现歌词同步的效果


Posted in HTML / CSS onMarch 17, 2016

HTML5的最强大之处莫过于对媒体文件的处理,如利用一个简单的vedio标签就可以实现视频播放。类似地,在HTML5中也有对应的处理音频文件的标签,那就是audio标签
HTML5出来这么久了,但是关于它里面的audio标签也就用过那么一次,当然还仅仅只是把这个标签插入到了页面中。这次呢就刚好趁着帮朋友做几个页面,拿这个audio标签来练练手。
首先你需要向页面中插入一个audio标签,注意这里最好不要设置loop='loop',这个属性使用来设置循环播放的,因为到后面需要使用ended属性的时候,如果loop被设置为loop的话,ended属性将一直是false。
autoplay='autoplay'设置页面加载后自动播放音乐,preload和autoplay属性的作用是一样的,如果标签中出现了autoplay属性,那么preload属性将被忽略。
controls='controls'设置显示音乐的控制条。

XML/HTML Code复制内容到剪贴板
  1. <audio src="music/Yesterday Once More.mp3" id="aud" autoplay="autoplay" controls="controls" preload="auto">    
  2. 您的浏览器不支持audio属性,请更换浏览器在进行浏览。    
  3. </audio>   

有了这个标签之后,那么恭喜你,你的页面已经可以播放音乐了。但是这样会不会显得页面太过于单调了,于是我又给页面添加了一些东西,让歌词能够同步的显示在页面上,还能够选择要播放的音乐。那么先要做成这样的效果,我们就得要去下载一些lrc格式的歌词文件,然后你需要把这些音乐格式化一番。因为刚开始的音乐文件是这样的

HTML5使用Audio标签实现歌词同步的效果

我们需要把每一句歌词插入到一个二位数组里面,经过格式化之后歌词就变成这样的格式了
这里附上格式化歌词的代码

HTML5使用Audio标签实现歌词同步的效果

XML/HTML Code复制内容到剪贴板
  1. //歌词同步部分    
  2. function parseLyric(text) {    
  3. //将文本分隔成一行一行,存入数组    
  4. var lines = text.split('\n'),    
  5. //用于匹配时间的正则表达式,匹配的结果类似[xx:xx.xx]    
  6. pattern = /\[\d{2}:\d{2}.\d{2}\]/g,    
  7. //保存最终结果的数组    
  8. result = [];    
  9. //去掉不含时间的行    
  10. while (!pattern.test(lines[0])) {    
  11. lineslines = lines.slice(1);    
  12. };    
  13. //上面用'\n'生成生成数组时,结果中最后一个为空元素,这里将去掉    
  14. lines[lines.length - 1].length === 0 && lines.pop();    
  15. lines.forEach(function(v /*数组元素值*/ , i /*元素索引*/ , a /*数组本身*/ ) {    
  16. //提取出时间[xx:xx.xx]    
  17. var time = v.match(pattern),    
  18. //提取歌词    
  19. vvalue = v.replace(pattern, '');    
  20. //因为一行里面可能有多个时间,所以time有可能是[xx:xx.xx][xx:xx.xx][xx:xx.xx]的形式,需要进一步分隔    
  21. time.forEach(function(v1, i1, a1) {    
  22. //去掉时间里的中括号得到xx:xx.xx    
  23. var t = v1.slice(1, -1).split(':');    
  24. //将结果压入最终数组    
  25. result.push([parseInt(t[0], 10) * 60 + parseFloat(t[1]), value]);    
  26. });    
  27. });    
  28. //最后将结果数组中的元素按时间大小排序,以便保存之后正常显示歌词    
  29. result.sort(function(a, b) {    
  30. return a[0] - b[0];    
  31. });    
  32. return result;    
  33. }  

到了这里我们就能够很容易的使用每首音乐的歌词了,我们需要有一个function来获得歌词,并且让他同步的显示在页面上,能够正常的切换音乐。下面附上代码。

XML/HTML Code复制内容到剪贴板
  1. function fn(sgname){    
  2. $.get('music/'+sgname+'.lrc',function(data){    
  3. var str=parseLyric(data);    
  4. for(var i=0,li;i<str.length;i++){    
  5. li=$('<li>'+str[i][1]+'</li>');    
  6. $('#gc ul').append(li);    
  7. }    
  8. $('#aud')[0].ontimeupdate=function(){//视屏 音频当前的播放位置发生改变时触发    
  9. for (var i = 0l = str.length; i < l; i++) {    
  10. if (this.currentTime /*当前播放的时间*/ > str[i][0]) {    
  11. //显示到页面    
  12. $('#gc ul').css('top',-i*40+200+'px'); //让歌词向上移动    
  13. $('#gc ul li').css('color','#fff');    
  14. $('#gc ul li:nth-child('+(i+1)+')').css('color','red'); //高亮显示当前播放的哪一句歌词    
  15. }    
  16. }    
  17. if(this.ended){ //判断当前播放的音乐是否播放完毕    
  18. var songslen=$('.songs_list li').length;    
  19. for(var i0,val;i<songslen;i++){    
  20. val=$('.songs_list li:nth-child('+(i+1)+')').text();    
  21. if(val==sgname){    
  22. i=(i==(songslen-1))?1:i+2;    
  23. sgname=$('.songs_list li:nth-child('+i+')').text(); //音乐播放完毕之后切换下一首音乐    
  24. $('#gc ul').empty(); //清空歌词    
  25. $('#aud').attr('src','music/'+sgname+'.mp3');    
  26. fn(sgname);    
  27. return;    
  28. }    
  29. }    
  30. }    
  31. };    
  32. });    
  33. } fn($('.songs_list li:nth-child(1)').text());   

那么到了这里你的音乐歌词已经能够正常的同步显示在页面上了。不过还缺少一个东西,就是一个音乐的列表,我希望能够点击这个列表里的音乐,从而播放该音乐,下面附上代码。
HTML代码

XML/HTML Code复制内容到剪贴板
  1. <div class="songs_cnt">    
  2. <ul class="songs_list">    
  3. <li>Yesterday Once More</li>    
  4. <li>You Are Beautiful</li>    
  5. </ul>    
  6. <button class="sel_song"><br/><br/></button>    
  7. </div>    
  8. <div id="gc">    
  9. <ul></ul>    
  10. </div>   

css代码

XML/HTML Code复制内容到剪贴板
  1. #gc{    
  2. width: 400px;    
  3. height: 400px;    
  4. background: transparent;    
  5. margin: 100px auto;    
  6. color: #fff;    
  7. font-size: 18px;    
  8. overflow: hidden;    
  9. position: relative;    
  10. }    
  11. #gc ul{    
  12. position: absolute;    
  13. top: 200px;    
  14. }    
  15. #gc ul li{    
  16. text-align: center;    
  17. height: 40px;    
  18. line-height: 40px;    
  19. }    
  20. .songs_cnt{    
  21. float: left;    
  22. margin-top: 200px;    
  23. position: relative;    
  24. }    
  25. .songs_list{    
  26. background-color: rgba(0,0,0,.2);    
  27. border-radius: 5px;    
  28. float: left;    
  29. width: 250px;    
  30. padding: 15px;    
  31. margin-left: -280px;    
  32. }    
  33. .songs_list li{    
  34. height: 40px;    
  35. line-height: 40px;    
  36. font-size: 16px;    
  37. color: rgba(255,255,255,.8);    
  38. cursor: pointer;    
  39. }    
  40. .songs_list li:hover{    
  41. font-size: 20px;    
  42. color: rgba(255,23,140,.6);    
  43. }    
  44. .sel_song{    
  45. position: absolute;    
  46. top: 50%;    
  47. width: 40px;    
  48. height: 80px;    
  49. margin-top: -40px;    
  50. font-size: 16px;    
  51. text-align: center;    
  52. background-color: transparent;    
  53. border: 1px solid #2DCB70;    
  54. font-weight: bold;    
  55. cursor: pointer;    
  56. border-radius: 3px;    
  57. font-family: sans-serif;    
  58. transition:all 2s;    
  59. -moz-transition:all 2s;    
  60. -webkit-transition:all 2s;    
  61. -o-transition:all 2s;    
  62. }    
  63. .sel_song:hover{    
  64. color: #fff;    
  65. background-color: #2DCB70;    
  66. }    
  67. .songs_list li.active{    
  68. color: #f00;    
  69. }   

js代码

XML/HTML Code复制内容到剪贴板
  1. $('.songs_list li:nth-child(1)').addClass('active');    
  2. $('.songs_cnt').mouseenter(function () {    
  3. var e=event||window.event;    
  4. var tage.target||e.srcElement;    
  5. if(tag.nodeName=='BUTTON'){    
  6. $('.songs_list').animate({'marginLeft':'0px'},'slow');    
  7. }    
  8. });    
  9. $('.songs_cnt').mouseleave(function () {    
  10. $('.songs_list').animate({'marginLeft':'-280px'},'slow');    
  11. });    
  12. $('.songs_list li').each(function () {    
  13. $(this).click(function () {    
  14. $('#aud').attr('src','music/'+$(this).text()+'.mp3');    
  15. $('#gc ul').empty();    
  16. fn($(this).text());    
  17. $('.songs_list li').removeClass('active');    
  18. $(this).addClass('active');    
  19. });    
  20. })  

好了,到了这里,那么你的这个歌词同步的效果的一些功能差不多都有了,关于HTML5使用Audio标签实现歌词同步的效果今天也就到这里了。更多信息请登录三水点靠木网站了解更多!

HTML / CSS 相关文章推荐
CSS3中Transform动画属性用法详解
Jul 04 HTML / CSS
CSS3 伪类选择器 nth-child()说明
Jul 10 HTML / CSS
用CSS3实现Win8风格的方格导航菜单效果
Apr 10 HTML / CSS
纯CSS实现菜单、导航栏的3D翻转动画效果
Apr 23 HTML / CSS
一款纯css3实现简单的checkbox复选框和radio单选框
Nov 05 HTML / CSS
纯css3实现照片墙效果
Dec 26 HTML / CSS
CSS3实现滚动条动画效果代码分享
Aug 03 HTML / CSS
css3类选择器之结合元素选择器和多类选择器用法
Mar 09 HTML / CSS
HTML5标签使用方法详解
Nov 27 HTML / CSS
HTML5 Canvas实现烟花绽放特效
Mar 02 HTML / CSS
canvas 实现 github404动态效果的示例代码
Nov 15 HTML / CSS
浅析HTML5 Landmark
Sep 11 HTML / CSS
HTML5仿手机微信聊天界面
Mar 18 #HTML / CSS
HTML5 Canvas实现文本对齐的方法总结
Mar 24 #HTML / CSS
使用HTML5 Canvas API中的clip()方法裁剪区域图像
Mar 25 #HTML / CSS
HTML5 Canvas API中drawImage()方法的使用实例
Mar 25 #HTML / CSS
深入研究HTML5实现图片压缩上传功能
Mar 25 #HTML / CSS
移动web模拟客户端实现多方框输入密码效果【附代码】
Mar 25 #HTML / CSS
HTML5打开本地app应用的方法
Mar 31 #HTML / CSS
You might like
可以在线执行PHP代码包装修正版
2008/03/15 PHP
php批量上传的实现代码
2013/06/09 PHP
简单的php文件上传(实例)
2013/10/27 PHP
php post大量数据时发现数据丢失问题解决方法
2015/06/20 PHP
PHP使用NuSOAP调用Web服务的方法
2015/07/18 PHP
PHP与jquery实时显示网站在线人数实例详解
2016/12/02 PHP
PHP curl 或 file_get_contents 获取需要授权页面的方法
2017/05/05 PHP
php fread函数使用方法总结
2019/05/28 PHP
javascript基于jQuery的表格悬停变色/恢复,表格点击变色/恢复,点击行选Checkbox
2008/08/05 Javascript
JS模拟的QQ面板上的多级可展开的菜单
2009/10/10 Javascript
JS实现自动变化的导航菜单效果代码
2015/09/09 Javascript
jquery实现经典的淡入淡出选项卡效果代码
2015/09/22 Javascript
谈谈JS中常遇到的浏览器兼容问题和解决方法
2016/12/17 Javascript
angularjs项目的页面跳转如何实现(5种方法)
2017/05/25 Javascript
jquery一键控制checkbox全选、反选或全不选
2017/10/16 jQuery
Node.js上传文件功能之服务端如何获取文件上传进度
2018/02/05 Javascript
vue中阻止click事件冒泡,防止触发另一个事件的方法
2018/02/08 Javascript
详解vue2.0 不同屏幕适配及px与rem转换问题
2018/02/23 Javascript
基于Nodejs的Tcp封包和解包的理解
2018/09/19 NodeJs
Vue实现移动端左右滑动效果的方法
2018/11/27 Javascript
判断文字超过2行添加展开按钮,未超过则不显示,溢出部分显示省略号
2019/04/28 Javascript
[15:28]DOTA2 HEROS教学视频教你分分钟做大人-剧毒术士
2014/06/13 DOTA
Python读csv文件去掉一列后再写入新的文件实例
2017/12/28 Python
pandas数据清洗,排序,索引设置,数据选取方法
2018/05/18 Python
解决Django中多条件查询的问题
2019/07/18 Python
Python3.6 + TensorFlow 安装配置图文教程(Windows 64 bit)
2020/02/24 Python
Python列表的深复制和浅复制示例详解
2021/02/12 Python
python re模块常见用法例举
2021/03/01 Python
大学优秀班主任事迹材料
2014/05/02 职场文书
销售团队口号大全
2014/06/06 职场文书
七一建党日演讲稿
2014/09/05 职场文书
领导班子个人对照检查材料(群众路线)
2014/09/26 职场文书
第28个世界无烟日活动总结
2015/02/10 职场文书
使用HTML+Css+transform实现3D导航栏的示例代码
2021/03/31 HTML / CSS
详解MongoDB的条件查询和排序
2021/06/23 MongoDB
java实现web实时消息推送的七种方案
2022/07/23 Java/Android