歌词滚动显示

*郑*

已于 2024-01-09 09:14:14 修改

阅读量386

点赞数 10

分类专栏：前端文章标签：前端

于 2024-01-09 09:12:50 首次发布

本文链接：https://blog.csdn.net/weixin_42202992/article/details/135471335

版权

前端专栏收录该内容

68 篇文章 0 订阅

订阅专栏

歌词滚动显示

模仿音乐软件实现歌词随播放时间滚动显示

环境准备

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./12.css">
</head>
<body>
<audio src="https://lx-sycdn.kuwo.cn/7d4355bcb05cd643e29c2a9da660f643/659c95da/resource/n1/29/63/1116273328.mp3?from=vip" controls ></audio>
<div class ="container">
    <ul class="lrc">
    </ul>
</div>
</body>
<script src="./data.js"></script>
<script src="./12.js"></script>
</html>

data.js歌词

const data = `
[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]天阔阔雪漫漫共谁同航
`

css

*{
    margin: 0;
padding: 0;
}
body{
    background-color: #000;
    color: #666;
    /*居中*/
    text-align: center;
}
audio{
    width: 450px;
    margin: 30px 0;
}
.container{
    height: 420px;
    overflow: hidden;
    border: 2px solid #fff;
}
.container ul{
    border: 2px solid #fff;
    transition: 0.2s;
    list-style: none;
}
.container li{
    height: 30px;
    /*border: 1px solid #fff;*/
    line-height: 30px;
    /*动画*/
    transition: 0.5s;
}
.container li.active{
    color: #fff;
    /*使文字放大1.5倍*/
    transform: scale(1.5);
}

解析歌词为对象数组

function parseData(data){
    var result = [];
    var lines = data.split('\n');
    for (let i = 1; i < lines.length-1; i++) {
        var line = lines[i];
        var str = line.split("]");
        var time = str[0].substring(1);
        var obj ={
            time: parseTime(time),
            words: str[1]
        }
        result.push(obj);
    }
    return result;
}
/**
 * 解析时间字符串为数字(秒)
 * @param time
 * @returns {number}
 */
function parseTime(time){
    var parts = time.split(":");
    return parts[0] *60 + +parts[1];
}

在这里插入图片描述

查找指定时间点的歌词

var doms = {
    audio: document.querySelector('audio'),
    ul: document.querySelector('.lrc'),
    container: document.querySelector('.container'),
}
function findIndex(){
    //播放器当前时间
    let cuTime = doms.audio.currentTime;
    console.log(cuTime)
    for (let i = 0; i < lrcData.length; i++) {
        if(lrcData[i].time > cuTime){
            return i - 1;
        }
        if(lrcData.length - 1 === i){
            //最后一条歌词下标
            return lrcData.length - 1;
        }
    }
}

创建歌词元素li

function createLrcElements(){
    //文档片段
    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);
}
createLrcElements();

计算偏移量

function setOffset(){
    var index = findIndex();
    var offset = liHeight * index + liHeight/2 - containerHeight/2;
    if(offset<0){
        offset = 0;
    }else if(offset > maxOffset){
        offset = maxOffset;
    }
    doms.ul.style.transform = 'translateY(-' + offset +'px)';
    //去除之前的active样式
    let activeLi = doms.ul.querySelector('.active');
    if(activeLi){
        activeLi.classList.remove('active');
    }
    let li = doms.ul.children[index];
   if(li){
       li.classList.add('active');
   }
    console.log(offset)
}

监听播放时间执行偏移计算

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

在这里插入图片描述

*郑*

关注

10
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
歌词滚动显示

实现歌词滚动显示
复制链接

扫一扫

专栏目录

歌词滚动显示

歌词滚动显示

环境准备

html

data.js歌词

css

解析歌词为对象数组

查找指定时间点的歌词

创建歌词元素li

计算偏移量

监听播放时间执行偏移计算

“相关推荐”对你有帮助么？