动手给你的女朋友写一个网页版歌词滚动器，秀一把

最新推荐文章于 2023-01-31 11:53:30 发布

Lavau

最新推荐文章于 2023-01-31 11:53:30 发布

阅读量265

点赞数

本文链接：https://blog.csdn.net/snakehj/article/details/109820995

版权

先把成果 show 出来
成果图

audio 标签

作用：引入一个音频文件
属性：
- src：音频的位置
- controls ：显示播放器
- autoplay ：自动播放（有些浏览器不支持）

步骤

拆开歌词
准备两个空数组: 时间数组歌词数组
准备正则表达式
循环截取
渲染页面
遍历数组,生成 li 放到 ul 中
随着音乐的播放拿到对应的时间
时间格式化成 00:00 的时间格式
找到时间数组里对应的时间索引
时间数组与歌词数组一一对应

难点主要是对歌词的分割——我采用的是正则表达式分割的
如果这一点看不懂，请看我的这篇博客

那么直接上代码了哦

代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../js/lrc.js"></script>
  <style>
    * {
     margin: 0;
     padding: 0;
    }

    ul, li {
      list-style: none;
    }

    #box{
      width: 300px;
      height: 300px;
      border: 2px solid pink;
      margin: 10px auto 0;
      background-color: #fff;
	  position: relative;
      overflow: hidden;
    }

    ul {
      position: absolute;
      top: 150px;
      width: 100%;
      transition: top .3s linear;
    }

    /* > 是 CSS 的子选择器*/
    ul > li {
      width: 100%;
      height: 20px;
      line-height: 20px;
      text-align: center;
      font-size: 20px;
    }

    /*li.active 表示 li 有一个 active 的类选择器*/
    ul > li.active {
      color: skyblue;
    }

    audio {
      width: 300px;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>

  <div id="box">
    <ul>
      <li class="active">1</li>
    </ul>
  </div>

  <audio src="../lrc/大碗宽面.mp3" controls></audio>

  <script>
    // 1-1 准备数组
    const timeArr = [];
    const lrcArr = [];

    // 1-2 准备正则
    /**
     * 解析:截取后将获得 [XX:XX.XX]AAAAA (X表示数字,A表示汉字)   AAAAA 两种字串
     *      g 是全局标识符,使截取后的下标指向下次的位置
     * @type {RegExp}
     */
    const reg = /\[(\d{2}:\d{2})\.\d{2}\](.+)/g;
    // 1-3 截取
    let tmp = reg.exec(lrcStr);
    while (tmp) {
      timeArr.push(tmp[1]);
      lrcArr.push(tmp[2]);
      tmp = reg.exec(lrcStr)
    }

    // 2-1 获取 ul 标签
    const ul = document.querySelector('ul');
    // 2-2 循环遍历歌词数组
    let str = '';
    lrcArr.forEach((item, index) => {
      str += `<li class="${index === 0 ? 'active' : ''}">${item}</li>`
    });
    ul.innerHTML = str;

    // 3-1 获取 audio 标签
    const audio = document.querySelector('audio');
    // 3-2 绑定事件
    audio.addEventListener('timeupdate', function () {
      // 3-3 格式化拿到的时间
      const {currentTime} = this;
      const minutes = parseInt(currentTime / 60);
      const seconds = parseInt(currentTime % 60);
      const timeStr = (minutes < 10 ? '0' + minutes : minutes) + ":" + (seconds < 10 ? '0' + seconds : seconds);

      // 4-1 在时间数组中找到对应的索引
      const index = timeArr.findIndex(item => item === timeStr);
      // 4-2 给 ul 赋值
      if (index !== -1) {
        ul.style.top = -index * 20 + 150 + 'px';
        ;[...ul.children].forEach(item => item.className = '');
        ul.children[index].className = 'active';
      }
    });
  </script>

</body>
</html>

项目地址：github

Lavau

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
动手给你的女朋友写一个网页版歌词滚动器，秀一把

先把成果 show 出来audio 标签作用：引入一个音频文件属性：src：音频的位置controls ：显示播放器autoplay ：自动播放（有些浏览器不支持）步骤拆开歌词准备两个空数组: 时间数组歌词数组准备正则表达式循环截取渲染页面遍历数组,生成 li 放到 ul 中随着音乐的播放拿到对应的时间时间格式化成 00:00 的时间格式找到时间数组里对应的时间索引时间数组与歌词数组一一对应难点主要是对歌词的分割——我采用的是正则表达式
复制链接

扫一扫