js网易云歌词解析处理，
生活随笔
收集整理的這篇文章主要介紹了
js网易云歌词解析处理，
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
網易云歌詞解析之顯示
廢話不多說，直接上代碼，請仔細親手跟著寫一遍，
如果你看懂了，記得點贊
<!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>總結
以上是生活随笔為你收集整理的js网易云歌词解析处理，的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： OCAD应用：二组元连续变焦系统
- 下一篇： 经纬度转cgcs座标_CGCS2000坐