js网易云歌词解析处理，

1登峰造极

已于 2023-04-07 10:08:42 修改

阅读量450

点赞数 1

分类专栏： js 文章标签： javascript 前端算法

于 2023-01-04 10:50:39 首次发布

本文链接：https://blog.csdn.net/qq_33323469/article/details/128544450

版权

js 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

网易云歌词解析之显示

废话不多说，直接上代码，请仔细亲手跟着写一遍，

如果你看懂了，记得点赞

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>歌詞解析詳解</title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
	
var lyric =[];	
let lrc1 = `[00:00.000] 作词 : 姚若龙\n[00:01.000] 作曲 : 李正帆\n[00:18.290]背靠着背 坐在地毯上\n[00:22.990]听听音乐 聊聊愿望\n[00:26.610]你希望我越来越温柔\n[00:30.599]我希望你放我在心上\n[00:36.580]你说想送我个浪漫的梦想\n[00:40.530]谢谢我带你找到天堂\n[00:45.040]哪怕用一辈子才能完成\n[00:49.220]只要我讲你就记住不忘\n[00:53.180]\n[00:55.580]我能想到最浪漫的事\n[00:59.370]就是和你一起慢慢变老\n[01:03.890]一路上收藏点点滴滴的欢笑\n[01:07.670]留到以后 坐着摇椅 慢慢聊\n[01:12.250]我能想到最浪漫的事\n[01:17.200]就是和你一起慢慢变老\n[01:20.860]直到我们老的哪儿也去不了\n[01:24.980]你还依然 把我当成 手心里的宝\n[01:30.670]\n[02:02.190]\n[02:06.250]背靠着背 坐在地毯上\n[02:11.280]听听音乐 聊聊愿望\n[02:15.189]你希望我越来越温柔\n[02:18.898]我希望你放我在心上\n[02:24.219]你说想送我个浪漫的梦想\n[02:29.889]谢谢我带你找到天堂\n[02:34.490]哪怕用一辈子才能完成\n[02:37.309]只要我讲你就记住不忘\n[02:41.238]\n[02:44.380]我能想到最浪漫的事\n[02:48.199]就是和你一起慢慢变老\n[02:52.398]一路上收藏点点滴滴的欢笑\n[02:56.498]留到以后 坐着摇椅 慢慢聊\n[03:01.259]我能想到最浪漫的事\n[03:06.379]就是和你一起慢慢变老\n[03:10.680]直到我们老的哪儿也去不了\n[03:14.798]你还依然 把我当成 手心里的宝\n[03:20.728]\n[03:23.090]我能想到最浪漫的事\n[03:26.748]就是和你一起慢慢变老\n[03:30.898]一路上收藏点点滴滴的欢笑\n[03:35.489]留到以后 坐着摇椅 慢慢聊\n[03:40.088]我能想到最浪漫的事\n[03:43.909]就是和你一起慢慢变老\n[03:48.058]直到我们老的哪儿也去不了\n[03:52.459]你还依然 把我当成 手心里的宝\n[04:00.280]\n[04:06.190]\n[04:08.490]\n`


//将歌词切割开 已、\n分割开 形成一个数组
/*
"[00:00.000] 作词 : 姚若龙"
"[00:01.000] 作曲 : 李正帆"
"[00:18.290]背靠着背 坐在地毯上"
"[00:22.990]听听音乐 聊聊愿望"
"[00:26.610]你希望我越来越温柔"
"[00:30.599]我希望你放我在心上"
*/
let arr = lrc1.split("\n");
//歌词数组长度
let len = arr.length;
for (let i = 0; i < len; i++) {
	
	
	let temp_row = arr[i];
	
	console.log("原始数据"+temp_row + typeof temp_row+'类型') //例如[00:18.290]背靠着背 坐在地毯上
	//再将字符串用]分割开来 //  ['[00:59.370', '就是和你一起慢慢变老'] 此时形成一个新数组 
	let new_arr = temp_row.split("]");
	console.log("用】分割后的"+new_arr +"数组长度"+new_arr.length)
	/*
	pop 移除最后一个数组元素 这里需要注意的是 其实是得到数组最后一个元素 而打印原数组 才是少了最后一个元素 比如 var arr [1,2,3,4]  pop后的数组就是[4]  原来的数     组 是[1,2,3]
	*/
	 let text = new_arr.pop(); //这里得到的就是 歌词那一句 就是和你一起慢慢变老
	 
	 console.log("得到歌词"+text)
	 console.log('-------------------------------------')
	 
	new_arr.forEach((element) => {
		//创建一个新对象，用于组装数据
	  let obj = {};
	  let time_arr = element.substr(1, element.length - 1).split(":"); //  ['03', '40.088']
	  console.log(time_arr)
	 
	 // 注意 ['03', '40.088'] 第一个单位是分钟 需要转化成秒   time_arr[0] * 60     后面的我们需要四舍五入取整  Math.ceil方法将 x 向上舍入到最接近的整数。  Math.ceil(time_arr[1]   40.0       // 88 就是41
	
	    
	 // 相加得到的就是秒 parseInt() 函数可解析一个字符串，并返回一个整数。 因为以后这里需要 监听播放器的播放时间 用歌词中的时间来匹配播放器时间，
	 // 从而匹配上播放的歌词
	
	  let s = parseInt(time_arr[0]) * 60 + Math.ceil(time_arr[1]);
	  
	  obj.time = s;
	  obj.text = text;
	  lyric.push(obj);
	});
  }
 //最后组装成一个新数组 拿到页面上遍历展示即可
	console.log(lyric)
	   // [
		  // {time: 0, text: ' 作词 : 姚若龙'}
		  // {time: 1, text: ' 作曲 : 李正帆'}
		  // {time: 19, text: '背靠着背 坐在地毯上'}
		  // {time: 23, text: '听听音乐 聊聊愿望'}
		  // {time: 27, text: '你希望我越来越温柔'}
		  // {time: 31, text: '我希望你放我在心上'}
		  // {time: 37, text: '你说想送我个浪漫的梦想'}
		  // {time: 41, text: '谢谢我带你找到天堂'}
		  // {time: 46, text: '哪怕用一辈子才能完成'}
		  // {time: 50, text: '只要我讲你就记住不忘'},  
	   // ]


				
	</script>
</html>