原生js+css实现音乐歌词跟随音乐播放滚动动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：多媒体

代码描述：原生js+css实现音乐歌词跟随音乐播放滚动动画效果代码。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <style>
        * {
      margin: 0;
      padding: 0;
    }
    
    html,
    body {
      background: #000;
      color: #666;
      text-align: center;
    }
    
    audio {
      width: 30vw;
      outline: none;
      margin: 30px 0;
    }
    
    .container {
      height: 56vh;
      overflow: hidden;
    }
    
    ul {
      list-style: none;
      /* 不推荐使用 margin-top 来实现歌词向上滚动效果，会改变布局几何信息，从而引发浏览器的重新渲染，导致性能降低（几何信息改变是在浏览器主线程渲染的） */
      /* margin-top: -190px; */
      /* 推荐使用 transform ，因为 transform 是在其他线程进行渲染绘制的，不会影响主线程，性能较高 */
      /* transform: translateY(-190px); */
      transition: 0.6s;
    }
    
    .container ul>li {
      height: 30px;
      line-height: 30px;
      transition: 0.6s;
    }
    
    .container ul>li.active {
      color: #fff;
      /* 同理这里不通过使用 font-size 来改变选中歌词的大小，是因为改变几何信息导致性能降低 */
      transform: scale(1.2);
    }
    </style>
</head>

<body>
    <audio controls preload="auto" src="//repo.bfw.wiki/bfwrepo/sound/5c89fd22dea6948307.mp3"></audio>
    <div class="container">
        <ul class="lrc-list">
        </ul>
    </div>
    <script>
        const data_1_lrc = `[00:01.42]《Im so sorry》
[00:03.68]词曲；马世豪
[00:06.69]verse：1
[00:11.20]I just wanna sorry(只想说声抱歉）
[00:13.96]你又引起我的注意
[00:17.22]watch my baby （看着我的宝贝）
[00:20.48]I don’t walk away（我不会走开）
[00:23.24]I just wanna sorry（只想说声抱歉）
[00:26.25]不太容易
[00:29.26]没办法离开你
[00:32.14]再次爱上了你
[00:34.77]有些爱像玻璃杯
[00:38.33]很容易就会破碎
[00:41.29]没办法后悔
[00:44.56]就算口渴不能续杯
[00:47.31]你就是我的视野
[00:50.72]打开了我的世界
[00:53.33]想你了解
[00:56.34]不要再拒绝
[00:59.35]窗外风筝在摇曳
[01:02.11]我做着给你的音乐
[01:06.12]闭上我的眼睛都是你
[01:11.90]路过飞舞的彩蝶
[01:14.41]偷拍你靠我的肩
[01:17.17]只为记录回忆
[01:20.18]Im so sorry
[01:23.44]时隔多年
[01:26.20]很多值得去回味
[01:29.96]爱你撒娇时的嘴
[01:32.97]淡淡的香水味
[01:35.48]从没有腻味
[01:38.49]对你的爱没减退
[01:42.00]抱歉又爱上你 my baby
[01:44.50]hook：
[01:46.76]Im so sorry  Oo ～
[01:54.28]Oo ～～～
[01:59.30]Im so sorry  Oo ～
[02:05.56]Oo ～～～
[02:11.33]Im so sorry  Oo ～
[02:18.60]Oo ～～～
[02:22.86]Im so sorry  Oo ～
[02:28.62]Oo ～
[02:33.64]I do it for you（我全是为了你）
[02:54.19]verse：2
[02:58.95]可能无法了解
[03:02.21]我为什么说sorry
[03:04.97]细细体会
[03:08.23]我又寻到了恋爱的感觉
[03:10.99]想想那是什么滋味
[03:14.25]就像海鸥在飞
[03:17.51]微风轻吹和霓虹互追
[03:23.78]抛去喧闹的大街
[03:26.53]翱翔在淡红色的天
[03:30.80]多少人想找也找不回
[03:35.56]这种奇幻的感觉
[03:38.82]拿着笔和纸来写
[03:42.83]编成音乐如同诗写
[03:47.60]往事提笔挥
[03:50.61]手中琴弦在唱谁
[03:53.87]你我坐态背对背
[03:56.88]乐声在耳边围
[03:59.89]曲终双目对
[04:02.40]两人共饮三两杯
[04:06.16]我不爱佳人爱谁
[04:08.16]Hook：
[04:11.17]Im so sorry  Oo ～
[04:18.44]Oo ～～～
[04:23.21]Im so sorry  Oo ～
[04:30.73]Oo ～～～
[04:34.99]Im so sorry  Oo ～
[04:42.14]Oo ～～～
[04:47.30]Im so sorry  Oo ～
[04:53.55]Oo ～
[04:56.81]I do it for you（我全是为了你）`;
    </script>
    <script>
        /**
 * 偏爱 - Lil Ghost小鬼 歌词数据，参考 assets/audio/lyric/偏爱 - Lil Ghost小鬼.lrc
 */
const data_2_lrc = `[00:00.01]歌曲名 偏爱
[00:00.02]歌手名 Lil Ghost小鬼
[00:00.03]作词：葛大为+Lil Ghost小鬼
[00:00.04]作曲：陈伟
[00:00.39]RAP词/曲：Lil Ghost小鬼
[00:00.64]原唱：张芸京
[00:00.84]编曲：陈令韬/欧智/大肥猫BFCat 
[00:00.99]制作人：陈令韬
[00:01.19]监制：陈令韬
[00:01.39]混音：李金城
[00:01.54]母带：李金城
[00:01.69]混音监制：陈令韬
[00:01.84]录音师：梁家银
[00:01.99]录音室：Tweak Tone Labs 
[00:02.14]混音室：432Hz Studio 
[00:02.29]音频编辑：欧恒
[00:02.44]音乐制作发行： 
[00:02.64]智慧大狗/环球唱片
[00:02.79]出品人：张葛
[00:03.09]监制：崔恕/王明宇
[00:13.77]Don't say goodbye 
[00:20.60]我想重来
[00:26.75]更努力爱
[00:32.89]让你能明白
[00:39.42]把昨天都作废
[00:42.71]现在你在我眼前
[00:45.96]我想爱请给我机会
[00:52.04]如果我错了也承担
[00:55.78]认定你就是答案
[01:00.17]我不怕谁嘲笑我极端
[01:04.91]相信自己的直觉
[01:08.50]顽固的人不喊累
[01:11.75]爱上你我不撤退
[01:17.04]我说过我不闪躲
[01:19.98]我非要这么做
[01:22.62]讲不听也偏要爱
[01:24.77]更努力爱让你明白
[01:29.71]我没有别条路能走
[01:32.65]你决定要不要陪我
[01:35.29]讲不听偏爱
[01:36.84]靠我感觉爱
[01:38.49]等你的依赖
[01:41.68]对你偏爱
[01:48.78]即使我说的废话都没用
[01:51.54]逃不出名叫现实的地缝
[01:54.14]确认过心脏是否还会痛
[01:56.02]回忆中一个人的深夜
[01:57.71]看不见星空
[01:58.81]怎么去偏爱
[01:59.81]又怎么把时间作废
[02:01.41]不过是消遣
[02:02.35]是害怕痛的太琐碎
[02:04.05]或许我会
[02:04.90]这次管他到底错与对
[02:06.64]So please girl 
[02:07.59]就和固执的我Run away 
[02:09.34]我的世界早已冰冷的无法
[02:11.78]接受这没有你的童话
[02:14.58]没有了你的我快无法呼吸
[02:17.47]A还是B选择你是我的目的
[02:20.06]就算这次没把握
[02:22.41]但我说过不闪躲
[02:27.95]是我着了魔
[02:30.63]我说过我不闪躲
[02:33.13]我非要这么做
[02:35.17]讲不听也偏要爱
[02:37.07]更努力爱让你明白
[02:41.06]我没有别条路能走
[02:43.75]你决定要不要陪我
[02:45.75]讲不听偏爱
[02:47.19]靠我感觉爱
[02:48.49]等你的依赖
[02:51.14]对你偏爱
[02:51.97]Come on 
[02:52.42]我发誓这次抓紧
[02:53.42]绝不可能会失去你
[02:54.72]是你教我加快了脚步
[02:56.01]不在乎有多远的距离
[02:57.36]所有的痛和梦
[02:58.31]促使我向前冲
[02:59.91]让那些困难全都
[03:01.10]留在一万年以后
[03:02.55]这病症的频率越发地加剧
[03:05.34]尝试了忘了你
[03:06.44]可记忆无法擦去
[03:08.04]这次我偏要错
[03:09.18]和命运去作斗争
[03:10.63]就让时间见证
[03:11.53]答案用你的名字构成
[03:14.10]把昨天都作废`;
    </script>
    <script>
        /**
 * dom节点对象，方便后续获取
 */
const doms = {
  audio: document.querySelector('audio'),
  ul: document.querySelector('.lrc-list'),
  container: document.querySelector('.container'),
}

/**
 * 歌词数据
 */
// const lrcData = parseLrc(data_1_lrc);
const lrcData = parseLrc(data_2_lrc);

// ************* 歌词处理相关开始 *************
/**
 * 解析歌词
 * 
 * @param {String} lrcStr 歌词字符串
 * @returns {[{startTime:String, lyric:String}]} 歌词对象列表
 */
function parseLrc(lrcStr) {
  if (!lrcStr) {
    return [];
  }

  // 去掉 "[" 并分割歌词
  const lrcArray = lrcStr..........完整代码请登录后点击上方下载按钮下载查看