使用js,html,css实现歌词滚动的效果

先看下效果吧

由于实现这个效果的重心是在于js,html 和 css 大家看代码就明白了

html

代码语言：javascript复制

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="./assets/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./style.css">
    <title>歌词滚动效果</title>
</head>
<body>
    <div class="contain">
        <audio src="https://m704.music.126.net/20240113180245/ce64353d84d93d230abf3ab672bfa732/jdymusic/obj/wo3DlMOGwrbDjj7DisKw/28481681349/59fe/87c8/8ed7/1b985989835af163dd057b1e3cbd74ea.mp3?_authSecret=0000018d022f36cf01dd0aa463681994" controls></audio>

        <div class="box">
            <ul>
             // 这里等后面使用js动态生成
            </ul>
        </div>

    </div>

    <script src="./main.js" type="module"></script>
</body>

</html>

css

代码语言：javascript复制

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
}


.contain {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background: #aa4b6b;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #3b8d99, #6b6b83, #aa4b6b);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #3b8d99, #6b6b83, #aa4b6b); /* W3C, IE 10 / Edge, Firefox 16 , Chrome 26 , Opera 12 , Safari 7  */

}

audio{
    width: 50%;
    height: 50px;

}
.box{
    width: 550px;
    height: 420px;
    text-align: center;
    color: #f6f6f6;
    
    /* 超出隐藏 */
    overflow: hidden;

}
ul {
   transition: .6s;
} 

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


.active{
    color: rgb(255, 150, 4);
    transform: scale(1.3);
}

js部分

1.导出资源

首先将准备好的歌词字符串进行导出

代码语言：javascript复制

 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]怪大地众生太美丽
 ....`;
 
 export default lrc

2. 引入资源

在主文件里面进行引入

代码语言：javascript复制

 import lrc from "./assets/data.js";
 console.log(lrc)

3. 歌词字符串转换为数组对象的形式

解析歌词转换为歌词数组对象的形式

因为目前歌词lrc 只是一个字符串对象,里面包含了歌曲时间和对应的歌词,但是在字符串里面,不好操作,我们需要将每一句歌词以及开始的时间放入一个歌词对象里面,然后将每一个歌词对象放入数组里面

代码语言：javascript复制

 const parseLrc = () => {
     // 准备好一个包含歌词对象的数组
     const lrcData = [];
     // 按照"]"字符进行分割
     const lines = lrc.split('n');
     // 生成一个数组,用来放置每一句歌词对象(包括时间,和 歌词)
     // 循环遍历整个歌词数组
     for (let i = 0; i < lines.length; i  ) {
         const item = lines[i].split(']')
         const time = item[0].substring(1);
         const words = item[1];
         const obj = {
             time: parseTime(time),
             words
         }
         lrcData.push(obj);
     }
     return lrcData
 }

观察歌词字符串 [00:01.06]难念的经n [00:03.95]演唱：周华健我们不难发现,我们首先可以按照n 进行分割, 得到一个字符串数组

然后进行遍历,拿到第二项,再次进行分割按照] 进行分割,得到['[00:01.06', '难念的经'],进而进行针对数组的第一项也就是开始时间 进行substring截取
然后创建一个歌词对象,在里面添加属性和值即可,

代码语言：javascript复制

  const obj = {
             time: parseTime(time),
             words
      }

但是又遇到了问题, 我们上面的时间,如果不进行特殊处理的话,是这样的 00:39.32 , 而我们希望它是39.32, 我们可以得出一个转换公式 第一个项 * 60 第二项

转换时间的函数

代码语言：javascript复制

 const parseTime = (timeStr) => {
     // 进行分割 按照:进行分割
     const parts = timeStr.split(':');
     return Number(parts[0]) * 60   Number(parts[1])
 }

最后将处理好的对象添加到准备好的数组里面即可, 并返回这个数组

4. 绘制页面

创建元素片段的作用主要为了优化代码, 提高效率,其实对于这种少数循环插入, 可以不采用.

代码语言：javascript复制

 const doms = {
     audio: document.querySelector('audio'),
     box: document.querySelector('.box'),
     ul: document.querySelector('.box ul')
 }

代码语言：javascript复制

 const drawPage = () => {
     // 创建元素片段
     const frag = document.createDocumentFragment();
     for (let i = 0; i < resulr.length; i  ) {
         // 创建li标签
         const li = document.createElement('li');
         // 设置li标签的文本内容
         li.textContent = resulr[i].words;
         frag.appendChild(li);
     }
     doms.ul.appendChild(frag);
 }
 drawPage()

5. 设置ul元素偏移

这个我们可以看一下图,来更好的方便去理解

这个是最大偏移量, 用来后续做边界判断的

每次更新时间线之后, ul元素的偏移的量:

代码语言：javascript复制

 // 容器高度
 var boxclientHeight = doms.box.clientHeight; // 420
 // 每个 li 的高度
 var liHeight = doms.ul.children[0].clientHeight;// 30
 // 最大偏移量
 //  最大偏移量 = ul的高度 - 容器高度
 //  最大偏移量 = 2160 - 420 = 1740
 var maxOffset = doms.ul.clientHeight - boxclientHeight;
 
 console.log("最大偏移量", maxOffset);
 
 // 高亮歌���   设置ul偏移量
 const setOffset = () => {
     let index = findIndex();
 
     // 
     console.log(index);
     //  30 * 1   15 = 45 - 210 = -165
     let offset = liHeight * index   liHeight / 2 - 210;
     console.log(offset);
     if (offset < 0) {
         offset = 0
     }
     // 如果超出最大偏移量 设置偏移量为最大偏移量
     if (offset > maxOffset) {
         offset = maxOffset
     }
 
     doms.ul.style.transform = `translateY(-${offset}px)`;
     console.log(doms.ul.style.transform);
     // 去掉之前的active样式
     let li = doms.ul.querySelector('.active');
     if (li) {
         li.classList.remove('active');
     }
     // 添加active样式
     li = doms.ul.children[index];
     if (li) {
         li.classList.add('active');
     }
 }

6. 添加事件监听, 不断执行偏移函数

代码语言：javascript复制

doms.audio.addEventListener('timeupdate', setOffset);

7. 完整js代码

data.js

代码语言：javascript复制

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]`;


export default lrc

main.js

代码语言：javascript复制

import lrc from "./assets/data.js";

/**
 * 将歌词字符 转换为对象的形式
 * obj = {time:开始时间, words: 歌词内容}
 */


const parseLrc = () => {
    // 准备好一个包含歌词对象的数组
    const lrcData = [];

    // 按照"]"字符进行分割
    const lines = lrc.split('n');
    // console.log(lines);
    // 生成一个数组,用来放置每一句歌词对象(包括时间,和 歌词)
    // 循环遍历整个歌词数组
    for (let i = 0; i < lines.length; i  ) {
        const item = lines[i].split(']')
        // console.log(item);
        const time = item[0].substring(1);
        const words = item[1].substring(1);
        const obj = {
            time: parseTime(time),
            words
        }
        lrcData.push(obj);
    }
    return lrcData

}


// 转换规则 
//  00:39.32 ===> 0   39   0.32 = 39.32
// 01:02.86 ===> 60   2   0.86 = 62.86

const parseTime = (timeStr) => {
    // 进行分割 按照:进行分割
    const parts = timeStr.split(':');

    return Number(parts[0]) * 60   Number(parts[1])
}
const resulr = parseLrc()

// console.log(resulr);


// 页面绘制
// 获取dom
const doms = {
    audio: document.querySelector('audio'),
    box: document.querySelector('.box'),
    ul: document.querySelector('.box ul')
}

const drawPage = () => {
    // 创建元素片段
    const frag = document.createDocumentFragment();
    for (let i = 0; i < resulr.length; i  ) {
        // 创建li标签
        const li = document.createElement('li');
        // 设置li标签的文本内容
        li.textContent = resulr[i].words;
        frag.appendChild(li);
    }
    doms.ul.appendChild(frag);
}
drawPage()

// 找到当前歌词
const findIndex = () => {
    // 播放器当前时间
    const curTime = doms.audio.currentTime;
    for (let i = 0; i < resulr.length; i  ) {
        if (curTime < resulr[i].time) {
            return i - 1;
        }
    }
    // 找遍了都没找到（说明播放到最后一句）
    return lrcData.length - 1;
}

// 容器高度
var boxclientHeight = doms.box.clientHeight;

console.log("boxclientHeight", boxclientHeight);
// 每个 li 的高度
var liHeight = doms.ul.children[0].clientHeight;
console.log(liHeight); // 30
// 最大偏移量
var maxOffset = doms.ul.clientHeight - boxclientHeight;
//  最大偏移量 = ul的高度 - 容器高度
//  最大偏移量 = 2160 - 420 = 1740
console.log("最大偏移量", maxOffset);

// 高亮歌词   设置ul偏移量
const setOffset = () => {
    let index = findIndex();

    // 
    console.log(index);
    //  30 * 1   15 = 45 - 210 = -165
    let offset = liHeight * index   liHeight / 2 - 210;
    console.log(offset);
    if (offset < 0) {
        offset = 0
    }
    if (offset > maxOffset) {
        offset = maxOffset
    }

    doms.ul.style.transform = `translateY(-${offset}px)`;
    console.log(doms.ul.style.transform);
    // 去掉之前的active样式
    let li = doms.ul.querySelector('.active');
    if (li) {
        li.classList.remove('active');
    }
    // 添加active样式
    li = doms.ul.children[index];
    if (li) {
        li.classList.add('active');
    }
}


doms.audio.addEventListener('timeupdate', setOffset);

到此就结束了, 主要难点在于计算ul的偏移量, 和最大偏移量, 以及边界情况考虑. 不过,只要画好图,一分析,便会清晰明了许多.

css html 对象数组字符串

0 人点赞

使用js,html,css实现歌词滚动的效果

html

css

js部分

1.导出资源

2. 引入资源

3. 歌词字符串转换为 数组对象的形式

4. 绘制页面

5. 设置ul元素偏移

6. 添加事件监听, 不断执行偏移函数

7. 完整js代码

3. 歌词字符串转换为数组对象的形式