js怎么调用LRC歌词文件,在线等
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js怎么调用LRC歌词文件,在线等相关的知识，希望对你有一定的参考价值。
我做的一个html5播放器，现在已经实现播放功能了，现在要实现歌词同步， 我把歌词放在外部的一个lrc文件里，请问我在JS里面要怎么调用这个lrc，写一下简单代码看看最好。
涉及几个问题。
首先，需要有LRC文件，可以放在本地或者用Ajax读取。
其次需要解析LRC文件，生成排序的数组。下面的代码供参考。
最后，利用<audio>标签的currentTime属性获得当前播放的时间，实时刷新歌词显示。具体的显示代码可做成单行（最简单，替换标签内文本即可）、双行或者多行高亮都可以。
function parseLyric(text)lyric = text.split('\\r\\n'); //先按行分割
var _l = lyric.length; //获取歌词行数
lrc = new Array(); //新建一个数组存放最后结果
for(i=0;i<_l;i++)
var d = lyric[i].match(/\\[\\d2:\\d2((\\.|\\:)\\d2)\\]/g); //正则匹配播放时间
var t = lyric[i].split(d); //以时间为分割点分割每行歌词，数组最后一个为歌词正文
if(d != null) //过滤掉空行等非歌词正文部分
//换算时间，保留两位小数
var dt = String(d).split(':');
var _t = Math.round(parseInt(dt[0].split('[')[1])*60+parseFloat(dt[1].split(']')[0])*100)/100;
lrc.push([_t, t[1]]);
return lrc;
追问
用AJax读取是怎么读取？
追答个人使用Ajax，一般配合JQuery，因为非常方便。
下面的代码是最简单的JQuery的Ajax实现，其中“url”这个参数，传递了欲读取文件的地址。一般情况下这个地址必须是在同服务器上的，即不允许跨域加载（如http://www.baidu.com/xxx.html这样的地址）。除非返回的数据格式为JSONP格式，这时需要指定dataType:'jsonp'参数，以便Ajax知道要读取都是JSONP格式数据。
$(document).ready(function()$("#b01").click(function() //绑定事件
htmlobj=$.ajax(url:"/jquery/test1.txt",async:false); //获取test1.txt内容并赋值
$("#myDiv").html(htmlobj.responseText); //替换标签内的html
);
);
上面的解释，涉及了不少概念，如果之前没有了解过，可以搜索相关资料，其实很简单，尤其对于有基础的。
我的Android进阶之旅------>Android自定义View来实现解析lrc歌词并同步滚动上下拖动缩放歌词的功能
文章目录
以上是关于js怎么调用LRC歌词文件,在线等的主要内容，如果未能解决你的问题，请参考以下文章
JavaScrpt LRC歌词同步 和 es6 的 fetch 的 async/await 和 promise 两种写法