简介:高亮歌词这里需要说一个文件，也就是.lrc文件，这个功能制作是将文件中时间与音乐文件中播放的进度作比较，实现文件何时滚动换行以及高亮的，好了看代码（我的歌曲文件是周总的《等你下课》）
css代码:
.container {width: 340px;height: 500px;border: 2px solid black;border-radius: 5px;display: flex;flex-direction: column;}.img {width: 150px;height: 150px;border: 1px solid cyan;border-radius: 10px;margin: 20px auto;}.container .box {flex: 1;overflow: hidden;}ul {overflow: hidden;transition-duration: 600ms;}ul,li {list-style: none;padding: 0;margin: 0;font-size: 16px;font-weight: bold;}li.on {background-image: -webkit-linear-gradient(right, red, blue);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}p {overflow: hidden;text-overflow: ellipsis;height: 16px;line-height: 16px;-webkit-line-clamp: 1;-webkit-box-orient: vertical;display: -webkit-box;text-align: center;margin-top: 0;margin-bottom: 16px;}audio {margin-top: 10px;}
html代码：
<div class="container"><div class="img"></div><div class="box"><ul id="lrclist"><!-- 保证歌词在正中间 --></ul></div></div><audio src="./material/60054704083.flac" id="audio" controls="controls" loop></audio><button onclick="play()">播放</button><button onclick="over()">暂停</button><button onclick="stop()">静音</button><button onclick="end()">播放完毕后</button><button onclick="update()">我要切歌</button>
js代码：
// 歌词文件 =》等你下课var lrcJSON = {"[00:01.74]": "等你下课(with 杨瑞代) - 周杰伦","[00:08.09]": "词：周杰伦","[00:10.18]": "曲：周杰伦","[00:12.61]": "","[00:15.16]": "Jay：你住的 巷子里","[00:18.77]": "我租了一间公寓","[00:21.93]": "","[00:22.48]": "为了想与你不期而遇","[00: 27.25]": "","[00: 28.55]": "高中三年 我为什么","[00: 31.60]": "为什么不好好读书","[00: 34.55]": "","[00: 35.69]": "没考上跟你一样的大学","[00: 39.89]": "","[00: 40.64]": "我找了份工作","[00: 42.89]": "","[00: 43.73]": "离你宿舍很近","[00: 46.23]": "","[00: 46.98]": "当我开始学会做蛋饼","[00: 50.41]": "才发现你 不吃早餐","[00: 55.24]": "喔 你又擦肩而过","[00: 59.33]": "","[01: 00.01]": "你耳机听什么","[01: 02.52]": "","[01: 03.18]": "能不能告诉我","[01: 05.64]": "","[01: 06.74]": "合：躺在你学校的操场看星空","[01: 13.50]": "","[01: 14.32]": "教室里的灯还亮着你没走","[01: 19.76]": "","[01: 20.78]": "记得 我写给你的情书","[01: 26.32]": "","[01: 27.28]": "都什么年代了","[01: 29.68]": "","[01: 30.54]": "到现在我还在写着","[01: 34.17]": "总有一天总有一年会发现","[01: 39.54]": "","[01: 40.30]": "有人默默的陪在你的身边","[01: 46.10]": "","[01: 46.97]": "也许 我不该在你的世界","[01: 52.47]": "","[01: 53.33]": "当你收到情书","[01: 55.70]": "","[01: 56.78]": "也代表我已经走远","[02: 01.67]": "","[02: 24.25]": "Gary：学校旁 的广场","[02: 27.98]": "","[02: 28.54]": "我在这等钟声响","[02: 31.36]": "","[02: 32.39]": "等你下课一起走好吗","[02: 37.34]": "Jay：弹着琴 唱你爱的歌","[02: 41.52]": "暗恋一点都不痛苦","[02: 43.88]": "Gary：一点都不痛苦","[02: 45.43]": "Jay：痛苦的是你","[02: 46.83]": "合：根本没看我","[02: 49.75]": "Jay：我唱这么走心","[02: 52.23]": "Gary：这么走心","[02: 53.40]": "Jay：却走不进你心里","[02: 55.49]": "Gary：进你心里","[02: 56.96]": "Jay：在人来人往","[02: 58.50]": "合：找寻着你 守护着你","[03: 01.74]": "不求结局","[03: 04.63]": "合：喔","[03: 06.13]": "Gary：你又擦肩","[03: 07.57]": "合：而过","[03: 08.97]": "","[03: 09.62]": "Jay：我唱告白气球","[03: 11.86]": "","[03: 12.94]": "终于你回了头","[03: 15.69]": "","[03: 16.94]": "合：躺在你学校的操场看星空","[03: 23.27]": "","[03: 24.23]": "教室里的灯还亮着你没走","[03: 29.54]": "","[03: 30.58]": "记得 我写给你的情书","[03: 35.76]": "","[03: 37.04]": "都什么年代了","[03: 39.09]": "","[03: 40.19]": "到现在我还在写着","[03: 43.89]": "总有一天总有一年会发现","[03: 49.31]": "","[03: 50.07]": "有人默默的陪在你的身边","[03: 55.87]": "","[03: 56.68]": "也许 我不该在你的世界","[04: 02.12]": "","[04: 02.98]": "当你收到情书","[04: 05.29]": "","[04: 06.59]": "也代表我已经走远"}var lrcTime = [];//歌词对应的时间数组var ul = document.getElementById('lrclist');//获取ulvar i = 0;for (const key in lrcJSON) {if (lrcJSON.hasOwnProperty(key)) {var value = lrcJSON[key];lrcTime[i++] = parseFloat((parseFloat(key.substr(1, 3)) * 60 + parseFloat(key.substring(4, 10))).toFixed(2));//00:00.000转化为00.000格式ul.innerHTML += "<li><p>" + lrcJSON[key] + "</p></li>";//ul里填充歌词}}lrcTime[lrcTime.length] = lrcTime[lrcTime.length - 1] + 3;//如不另加一个结束时间，到最后歌词滚动不到最后句var $li = ul.getElementsByTagName('li');//获取所有livar currentLine = 0;//当前播放到哪一句了var currentTime; //当前播放的时间var ppxx;//保存ul的translateY值window.onload = function () {var bgm = document.getElementById('audio');// 监听音频播放结束后的操作bgm.addEventListener('ended', function (e) {// 开始切歌update();})// 监听音频时间改变事件bgm.addEventListener('timeupdate', function (e) {currentTime = bgm.currentTime;for (j = currentLine, len = lrcTime.length; j < len; j++) {if (currentTime < lrcTime[j + 1] && currentTime > lrcTime[j]) {currentLine = j;ppxx = currentLine * -32; // 每行歌词的高度ul.style.transform = "translateY(" + ppxx + "px)";if (currentLine > 1) {$li[currentLine - 1].setAttribute("class", "");$li[currentLine].setAttribute("class", "on");}break;}}})// audio进度更改后事件audio.onseeked = function () {currentTime = bgm.currentTime;$li[currentLine - 1].setAttribute("class", "");for (k = 0, len = lrcTime.length; k < len; k++) {if (currentTime < lrcTime[k + 1] && currentTime < lrcTime[k]) {currentLine = k;break;}}};}// 开始播放function play() {bgm.play();}// 暂停function over() {bgm.pause();}// 如果音频是暂停，返回truefunction stop() {if (bgm.muted) {bgm.muted = false;console.log("接触静音状态");} else {bgm.muted = true;console.log("打开静音状态");}}// 歌曲路径数组let material = ['./material/60054704083.flac']; // 我要切歌function update() {var url = bgm.src;if (material.indexOf(url) < material.length - 1) {bgm.src = material[(material.indexOf(url) + 1)];} else {bgm.src = material[0];}// 重新播放play();}
思路引用:
/yzy_csdn/article/details/84536646
/lijiasiang/article/details/79209683
