<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="shortcut icon" href="./assets/favicon.ico" type="image/x-icon" /> <link rel="stylesheet" href="./index.css" /> </head> <body> <audio id="five" src="./assets/music.mp3" controls></audio> <!-- lorem 虚拟字符 --> <!-- margin-top可以进行滚动 但是性能较低 会触发reflow --> <!-- 推荐使用transform:translateY --> <div class="container"> <ul class="lrc-list"></ul> </div> </body> <script src="./data.js"></script> <script src="./index.js"></script> </html>
歌名： 难念的经 周华健 4：48
/** * 获取歌词数据 lrc * 讲歌词数据解析为我们需要的数组包对象格式 * @time 歌词开始时间 * @words 歌词内容 */ function parseLrc(lrc) { var lines = lrc.split('\n') var lrcData = [] for (var i = 0; i < lines.length; i++) { var item = lines[i] var line = item.split(']') var obj = { time: parseTime(line[0].substring(1)), words: line[1], } lrcData[i] = obj } return lrcData } var lrcData = parseLrc(lrc) var doms = { container: document.querySelector('.container'), audio: document.getElementById('five'), ul: document.querySelector('.container ul'), } /** * 将时间转为秒 * @param {时间} time * @returns */ function parseTime(time) { var times = time.split(':') var parts = +times[0] * 60 + +times[1] return parts.toFixed(2) } /** * 计算出，在当前播放器播放到第几秒的情况下 * lrcData数组中，应该高亮显示的歌词下标 * 如果没有任何一句歌词需要显示，则得到-1 */ function findIndex() { var curTime = doms.audio.currentTime for (let i = 0; i < lrcData.length; i++) { if (curTime < lrcData[i].time) { return i - 1 } } // 找不到说明到最后一句了 return lrcData.length - 1 } // 操作界面 function createEle() { var frag = document.createDocumentFragment() for (let i = 0; i < lrcData.length; i++) { var li = document.createElement('li') li.textContent = lrcData[i].words frag.appendChild(li) } doms.ul.appendChild(frag) } createEle() // 获取容器的高度 var containHeight = doms.container.clientHeight // 获取li高度 var liHeight = doms.ul.children[0].clientHeight // 最大偏移量 var maxOffset = doms.ul.clientHeight - containHeight // 设置向上偏移量 function setOffset() { var height = findIndex() * liHeight - containHeight / 2 if (height < 0) { height = 0 } if (height > maxOffset) { height = maxOffset } doms.ul.style.transform = `translateY(-${height}px)` setStyle(findIndex()) } // 样式处理 function setStyle(index) { var li = doms.ul.querySelector('.active') if (li) { li.classList.remove('active') } li = doms.ul.children[index] if (li) { li.classList.add('active') } } doms.audio.addEventListener('timeupdate', function () { setOffset() })
* { margin: 0; padding: 0; } body { background: #000; color: #666; text-align: center; } audio { width: 450px; margin: 30px 0; } .container { height: 420px; border: 1px solid transparent; overflow: hidden; } .container ul { border: 2px solid transparent; transition: 0.2s; list-style: none; } ul li { height: 30px; line-height: 30px; transition: 0.2s; } ul li.active { color: #fff; transform: scale(1.2); }
var lrc = `[00:01.06]难念的经 [00:03.95]演唱：周华健 [00:06.78] [00:30.96]笑你我枉花光心计 [00:34.15]爱竞逐镜花那美丽 [00:36.75]怕幸运会转眼远逝 [00:39.32]为贪嗔喜恶怒着迷 [00:41.99]责你我太贪功恋势 [00:44.48]怪大地众生太美丽 [00:47.00]悔旧日太执信约誓 [00:49.66]为悲欢哀怨妒着迷 [00:52.56]啊 舍不得璀灿俗世 [00:57.66]啊 躲不开痴恋的欣慰 [01:02.86]啊 找不到色相代替 [01:08.09]啊 参一生参不透这条难题 [01:13.15]吞风吻雨葬落日未曾彷徨 [01:15.73]欺山赶海践雪径也未绝望 [01:18.23]拈花把酒偏折煞世人情狂 [01:20.90]凭这两眼与百臂或千手不能防 [01:23.76]天阔阔雪漫漫共谁同航 [01:26.09]这沙滚滚水皱皱笑着浪荡 [01:28.68]贪欢一刻偏教那女儿情长埋葬 [01:32.38] [01:34.09]吞风吻雨葬落日未曾彷徨 [01:36.50]欺山赶海践雪径也未绝望 [01:39.07]拈花把酒偏折煞世人情狂 [01:41.69]凭这两眼与百臂或千手不能防 [01:44.68]天阔阔雪漫漫共谁同航 [01:46.93]这沙滚滚水皱皱笑着浪荡 [01:49.54]贪欢一刻偏教那女儿情长埋葬 [01:53.41] [02:15.45]笑你我枉花光心计 [02:18.53]爱竞逐镜花那美丽 [02:21.14]怕幸运会转眼远逝 [02:23.76]为贪嗔喜恶怒着迷 [02:26.43]责你我太贪功恋势 [02:28.98]怪大地众生太美丽 [02:31.60]悔旧日太执信约誓 [02:34.26]为悲欢哀怨妒着迷 [02:36.90]啊 舍不得璀灿俗世 [02:42.04]啊 躲不开痴恋的欣慰 [02:47.34]啊 找不到色相代替 [02:52.52]啊 参一生参不透这条难题 [02:57.47]吞风吻雨葬落日未曾彷徨 [03:00.05]欺山赶海践雪径也未绝望 [03:02.64]拈花把酒偏折煞世人情狂 [03:05.27]凭这两眼与百臂或千手不能防 [03:08.22]天阔阔雪漫漫共谁同航 [03:10.49]这沙滚滚水皱皱笑着浪荡 [03:13.06]贪欢一刻偏教那女儿情长埋葬 [03:18.45]吞风吻雨葬落日未曾彷徨 [03:20.90]欺山赶海践雪径也未绝望 [03:23.54]拈花把酒偏折煞世人情狂 [03:26.21]凭这两眼与百臂或千手不能防 [03:29.07]天阔阔雪漫漫共谁同航 [03:31.32]这沙滚滚水皱皱笑着浪荡 [03:33.92]贪欢一刻偏教那女儿情长埋葬 [03:39.32]吞风吻雨葬落日未曾彷徨 [03:41.84]欺山赶海践雪径也未绝望 [03:44.38]拈花把酒偏折煞世人情狂 [03:47.04]凭这两眼与百臂或千手不能防 [03:49.99]天阔阔雪漫漫共谁同航 [03:52.20]这沙滚滚水皱皱笑着浪荡 [03:54.89]贪欢一刻偏教那女儿情长埋葬 [04:00.28]吞风吻雨葬落日未曾彷徨 [04:02.68]欺山赶海践雪径也未绝望 [04:05.25]拈花把酒偏折煞世人情狂 [04:07.90]凭这两眼与百臂或千手不能防 [04:10.85]天阔阔雪漫漫共谁同航 [04:13.08]这沙滚滚水皱皱笑着浪荡 [04:15.75]贪欢一刻偏教那女儿情长埋葬 [04:19.48]`;