原生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.........完整代码请登录后点击上方下载按钮下载查看