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

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

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