HTML5应用Audio标识完成歌词同歩的实际效果

日期:2021-02-27 类型:科技新闻 

关键词:在线网页制作,建网页,个人简介网页制作,简单网页,建立网页

HTML5的最强劲的地方莫过度对新闻媒体文档的解决,如运用1个简易的vedio标识便可以完成视頻播发。相近地,在HTML5中也是有对应的解决声频文档的标识,那便是audio标识
HTML5出来这么久了,可是有关它里边的audio标识也就用过那末1次,自然还仅仅只是把这个标识插进到了网页页面中。这次呢就恰好趁着帮盆友做几个网页页面,拿这个audio标识来练练手。
最先你必须向网页页面中插进1个audio标识,留意这里最好是不必设定loop='loop',这个特性应用来设定循环系统播发的,由于到后边必须应用ended特性的情况下,假如loop被设定为loop的话,ended特性将1直是false。
autoplay='autoplay'设定网页页面载入后全自动播发歌曲,preload和autoplay特性的功效是1样的,假如标识中出現了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>   

有了这个标识以后,那末恭贺你,你的网页页面早已能够播发歌曲了。可是这样会不容易显得网页页面太过度简单了,因而我又给网页页面加上了1些物品,让歌词可以同歩的显示信息在网页页面上,还可以挑选要播发的歌曲。那末先要做成这样的实际效果,大家就得要去免费下载1些lrc文件格式的歌词文档,随后你必须把这些歌曲文件格式化1番。由于一开始的歌曲文档是这样的


大家必须把每句歌词插进到1个2位数字能量数组里边,历经文件格式化以后歌词就变为这样的文件格式了
这里附上文件格式化歌词的编码

XML/HTML Code拷贝內容到剪贴板
  1. //歌词同歩一部分    
  2. function parseLyric(text) {    
  3. //将文字隔开成1行1行,存入数字能量数组    
  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'转化成转化成数字能量数组时,結果中最终1个为空元素,这里将去掉    
  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. //由于1行里边将会有好几个時间,因此time有将会是[xx:xx.xx][xx:xx.xx][xx:xx.xx]的方式,必须进1步隔开    
  21. time.forEach(function(v1, i1, a1) {    
  22. //去掉時间里的中括号获得xx:xx.xx    
  23. var t = v1.slice(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. }  

到了这里大家就可以够很非常容易的应用每首歌曲的歌词了,大家必须有1个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'); //高亮度显示信息当今播发的哪1句歌词    
  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:i+2;    
  23. sgname=$('.songs_list li:nth-child('+i+')').text(); //歌曲播发结束以后切换下1首歌曲    
  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());   

那末到了这里你的歌曲歌词早已可以一切正常的同歩显示信息在网页页面到了。但是还缺乏1个物品,便是1个歌曲的目录,我期待可以点一下这个目录里的歌曲,从而播发该歌曲,下面附上编码。
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: ⑵80px;    
  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: ⑷0px;    
  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':'⑵80px'},'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. })  

好了,到了这里,那末你的这个歌词同歩的实际效果的1些作用类似都有了,有关HTML5应用Audio标识完成歌词同歩的实际效果今日也就到这里了。更多信息内容请登陆脚本制作之家网站掌握更多!