玩转前端——歌词滚动（html、js、css）

本项目共五个文件，完整文件下载链接

index.css

* {
    margin: 0;
    padding: 0;
}

body {
    background: #000;
    color: #666;
    text-align: center;
}

audio {
    width: 800px;
    margin: 50px 0;
}

.container {
    height: 420px;
    overflow: hidden;
}
.container{
    transform: translateY(150px);
}
.container ul {
    transition: 0.2s;
    list-style: none;
}

.container li {
    height: 30px;
    line-height: 30px;
    transition: 0.2s;
}

.container li.active {
    color: #fff;
    transform: scale(1.5);
}

data.js

var lrc = '[00:46.04]Mu hly pur la\n[00:47.95]风起了\n[00:48.67]Ma hxa jji la\n[00:49.90]雨下了\n[00:50.41]Mge qi ci la\n[00:51.85]荞叶落了\n[00:52.21]Syr qi shy la ve\n[00:53.61]树叶黄了\n[00:58.77]Nyix ke pur la\n[00:59.54]春去秋来\n[01:00.98]Mu cu pur la\n[01:01.55]我的思绪\n[01:03.21]Hxie mop pur la ve\n[01:04.72]起伏不定\n[01:12.11]Cyp ku cyp vit op\n[01:13.72]时光流转\n[01:16.43]Cyp shyr cip hlep op\n[01:17.71]岁月沧桑\n[01:24.81]Ap jie lop\n[01:25.89]不要怕\n[01:26.82]Ap jie lop\n[01:27.84]不要怕\n[01:28.98]Ap jie lop ap jie\n[01:29.79]不要怕不要\n[01:30.51]Ap jie lop ap jie\n[01:31.23]不要怕不要\n[01:31.64]Ap jie lop\n[01:32.12]不要怕\n[01:39.18]Mgop nyi ap qyt op\n[01:40.51]无论严寒\n[01:40.93]Cax nyi ap qyt op\n[01:41.49]或酷暑\n[01:51.42]Ap jie lop\n[01:51.98]不要怕\n[01:53.18]Ap jie lop\n[01:53.77]不要怕\n[01:55.57]Ap jie lop ap jie\n[01:56.03]不要怕不要\n[01:56.70]Ap jie lop ap jie\n[01:57.82]不要怕不要\n[01:58.28]Ap jie lop\n[01:58.94]不要怕\n[02:05.23]Nax nyi tat qyt map\n[02:05.74]无论伤痛啊\n[02:07.19]Shax nyi tat qyt op\n[02:07.66]还是苦难\n[02:57.82]Mu hly pur la\n[02:58.53]风起了\n[02:59.01]Ma hxa jji la\n[02:59.99]雨下了\n[03:01.31]Mge qi ci la\n[03:02.03]荞叶落了\n[03:03.37]Syr qi shy la ve\n[03:03.93]树叶黄了\n[03:09.95]Nyix ke pur la\n[03:10.98]春去\n[03:12.26]Mu cu pur la\n[03:13.09]秋来\n[03:14.69]Hxie mop pur la ve\n[03:15.82]心绪起伏\n[03:22.97]Cyp ku cyp vit op\n[03:25.33]时光流转\n[03:27.27]Cyp shyr cip hlep op\n[03:30.32]岁月沧桑\n[03:37.26]Ap jie lop\n[03:37.61]不要怕\n[03:38.27]Ap jie lop\n[03:38.91]不要怕\n[03:40.19]Ap jie lop ap jie\n[03:40.91]不要怕不要\n[03:42.65]Ap jie lop ap jie\n[03:43.17]不要怕不要\n[03:44.84]Ap jie lop\n[03:45.61]不要怕\n[03:49.47]Mgop nyi ap qyt op\n[03:50.39]无论严寒\n[03:51.62]Cax nyi ap qyt op\n[03:52.59]或酷暑\n[04:02.58]Ap jie lop\n[04:03.31]不要怕\n[04:04.65]Ap jie lop\n[04:05.32]不要怕\n[04:07.16]Ap jie lop ap jie\n[04:08.05]不要怕不要\n[04:09.39]Ap jie lop ap jie\n[04:10.21]不要怕不要\n[04:11.55]Ap jie lop\n[04:12.64]不要怕\n[04:16.24]Nax nyi tat qyt map\n[04:17.06]无论严寒\n[04:18.23]Shax nyi tat qyt op\n[04:18.95]或酷暑\n[04:29.24]Ap jie lop\n[04:29.91]不要怕\n[04:31.03]Ap jie lop\n[04:31.54]不要怕\n[04:33.29]Ap jie lop ap jie\n[04:33.81]不要怕不要\n[04:35.92]Ap jie lop ap jie\n[04:36.39]不要怕不要\n[04:38.28]Ap jie lop\n[04:39.21]不要怕\n[04:42.09]Ap jie lop\n[04:43.12]不要怕\n[04:44.87]Ap jie lop\n[04:45.44]不要怕\n[04:47.08]Ap jie lop ap jie\n[04:47.65]不要怕不要\n[04:48.68]Ap jie lop ap jie\n[04:49.34]不要怕不要\n[04:51.55]Ap jie lop ap\n[04:52.73]不要怕\n[04:56.22]Nax nyi tat qyt map\n[04:57.40]无论伤痛啊\n[04:58.42]Shax nyi tat qyt op\n[04:59.29]还是苦难'

index.js

var doms = {
    Audio: document.querySelector('audio'),
    ul: document.querySelector('.container ul'),
    container: document.querySelector('.container'),
    ulclass: document.querySelector('.Lcrlist')
}
var lrc = parseLrc()
createLrcElement()
console.log(lrc)

var containerHeight = doms.container.clientHeight
var liHeight = doms.ul.children[0].clientHeight
var maxOffset = doms.ul.clientHeight - doms.container.clientHeight

/**
 * 解析歌词字符串
 * 得到一个歌词对象数组
 */
function parseLrc() {
    var lines = lrc.split("\n");
    var result = [];
    for (var i = 0; i < lines.length; i++) {
        var line = lines[i];
        var parts = line.split("]")
        var obj = {
            time: parseTime(parts[0].substring(1)),
            words: parts[1]
        }
        result.push(obj)
    }
    return result
}

/**
 * 转换时间
 * 返回秒数
 */
function parseTime(timeStr) {
    var time = timeStr.split(":")
    return +time[0] * 60 + +time[1]
}

/**
 * 计算歌词放大的位置
 * 返回歌词下标
 */
function findIndex() {
    var Curtime = doms.Audio.currentTime;
    for (var i = 0; i < lrc.length; i++) {
        if (lrc[i].time > Curtime) {
            return i - 1;
        }
    }
    return lrc.length - 1;
}

/**界面
 * 创建歌词元素
 */
function createLrcElement() {
    var frag = document.createDocumentFragment()
    for (var i = 0; i < lrc.length; i++) {
        var li = document.createElement("li")
        li.textContent = lrc[i].words
        // doms.ul.appendChild(li)//改动了dom树

        frag.appendChild(li)
    }
    doms.ul.appendChild(frag)
}

/**
 * 设置ul元素的偏移量
 *歌词放大高亮显示
 */
function setOffset() {
    var index = findIndex()
    var offset = liHeight * index + liHeight / 2 - containerHeight / 2
    if (offset < 0) {
        offset = 0
    }
    if (index < 0) {
        index = 0
    }
    if (offset > maxOffset) {
        offset = maxOffset
    } 
    console.log(offset)
    doms.ul.style.transform = `translateY(-${offset}px)`;
    //去掉上一个active样式 
    var li = doms.ul.querySelector('.active')
    if (li) {
        li.classList.remove('active')
    }

    li = doms.ul.children[index]
    {
        li.classList.add("active")
    }
 
}

doms.Audio.addEventListener("timeupdate",setOffset)

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./CSS/index.css">
</head>
<body>
    <audio controls src="./音乐/不要怕(彝族语)--瓦其依合.mp3"></audio>
    <div class="container">
    <ul class="Lcrlist">
    </ul>
    </div>
</body>

<script src="./JS/data.js"></script>
<script src="./JS/index.js"></script>
</html>

运行结果如下：