JavaScript解析lrc文件音乐歌词
2017-09-19 19:17
1366 查看
最近尝试做一个音乐播放器,遇到歌词匹配问题。
做歌词匹配,首先要将lrc文件中的信息读取出来。以下是lrc文件部分内容
![](https://oscdn.geek-share.com/Uploads/Images/Content/202008/19/65402c6175ae0704068dc00badfd289b)
先参考以下网易云音乐歌词部分的HTML。
![](https://oscdn.geek-share.com/Uploads/Images/Content/202008/19/7fbf1dc51a7121395d8e81188c057bff)
根据以上的HTML,我的思路是讲lrc文件解析成一个json数组。如下
![](https://oscdn.geek-share.com/Uploads/Images/Content/202008/19/d61eee50ff0c75367b69ea2d29adb997)
通过Ajax从后台取得一个lrc文件进行解析。也可以在后台直接用PHP/JAVA解析,再传一个json数组到前台,这里主要演示使用js进行解析
以下是代码的实现,代码肯定有许许多多的不足,仅供参考使用。
打印出来的结果。
![](https://oscdn.geek-share.com/Uploads/Images/Content/202008/19/f35027371a45503b3af797570bda27b1)
可以通过以下的函数将歌词添加到指定的地方(这里演示的为添加到body中)。
![](https://oscdn.geek-share.com/Uploads/Images/Content/202008/19/f3cc1bae8eeccd9bb1e7e9cf0db12fef)
添加后的结果。
![](https://oscdn.geek-share.com/Uploads/Images/Content/202008/19/41222849a9b431c1245aa0e61a4d1dff)
以上代码只能解析这种形式开头的lrc文件。
![](https://oscdn.geek-share.com/Uploads/Images/Content/202008/19/ad9008439b34de0abd76602eb60eb6aa)
而以下开头的lrc文件解析则会出错。先凑合看吧,等我更新。
做歌词匹配,首先要将lrc文件中的信息读取出来。以下是lrc文件部分内容
先参考以下网易云音乐歌词部分的HTML。
根据以上的HTML,我的思路是讲lrc文件解析成一个json数组。如下
通过Ajax从后台取得一个lrc文件进行解析。也可以在后台直接用PHP/JAVA解析,再传一个json数组到前台,这里主要演示使用js进行解析
以下是代码的实现,代码肯定有许许多多的不足,仅供参考使用。
<script> var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP"); xhr.open("GET", "lyric2.lrc", true); xhr.send(); xhr.onreadystatechange = function() { if(xhr.readyState === 4 && xhr.status === 200) { var lyricStr = xhr.responseText; // 匹配歌词文本中的换行符.制表符 var regexTrim = new RegExp("[\\r\\n]", "g"); // 匹配歌词文本中的时间 例如 [00:04.11], 这种写法比较流氓,虽然可行。但只能匹配99分钟之内的时间格式 [99.04.11] var regexGetTime = new RegExp("\\[.{8}\\]", "g"); // 匹配歌词文本中的歌词 例如 刘瑞琦 - 晴天 var regexGetLyric = new RegExp("[^\\[\\]\\:\\.\\d]+", "g"); // 用于存放时间 var aTime = []; // 用于存放歌词 var aLyric = []; // 存放json对象 例如 {"time": "4.11", "lyric": "刘瑞琦 - 晴天"} var jsonLyric = []; var result; // 删除歌词文本中的所有换行符.制表符 var lyricStr2 = lyricStr.replace(regexTrim, ''); // 将匹配到的时间存入数组,exec()返回的是数组,该数组只存放每一次匹配到的值。 while((result=regexGetTime.exec(lyricStr2)) != null) { aTime.push(result.toString()); } // 将匹配到的歌词存入数组 while((result=regexGetLyric.exec(lyricStr2)) != null) { aLyric.push(result.toString()); } for(var i=0, j=aTime.length; i<j; i++) { var obj = {}; obj.lyric = aLyric[i]; obj.time = getTime(aTime[i]); jsonLyric.push(obj); } // 打印json数组 console.log(jsonLyric); } } // 将 [00:04.11] 转化为 4.11(以 秒.毫秒 格式) function getTime(time) { var str = time; // 删除 '[' str = str.substr(1); // 删除 ']' str = str.substr(0, str.length-1); var minutes = parseInt(str.slice(0, str.indexOf(':'))); var seconds = parseFloat(str.substr(str.indexOf(':')+1)); var newTime = (minutes*60 + seconds).toFixed(2); return newTime; } </script>
打印出来的结果。
可以通过以下的函数将歌词添加到指定的地方(这里演示的为添加到body中)。
添加后的结果。
以上代码只能解析这种形式开头的lrc文件。
而以下开头的lrc文件解析则会出错。先凑合看吧,等我更新。
相关文章推荐
- JavaScript解析lrc文件音乐歌词
- JavaScript解析lrc文件音乐歌词
- JavaScript解析lrc文件音乐歌词
- Java使用正则表达式解析LRC歌词文件
- MP3制作之LRC歌词文件解析(附:源代码)
- android开发--mp3播放器项目源代码(xml文件解析,.lrc,.mp3文件下载,同时显示歌词)
- ios开发学习--歌词处理--解析lrc文件
- 歌词文件lrc的解析类(目前在WINCE下使用)
- c#解析Lrc歌词文件
- C语言 解析lrc歌词文件
- C语言 解析lrc歌词文件
- c#解析Lrc歌词文件
- C语言 解析lrc歌词文件
- C语言 解析lrc歌词文件
- android 在线获取音乐歌词lrc文件
- C语言 LRC歌词文件解析
- 歌词文件LRC的解析,可用于音乐播放器实现歌词同步操作
- C#解析Lrc歌词文件过程详解
- android 在线获取音乐歌词lrc文件
- MP3 lrc文件的解析