音乐播放器歌词滚动效果实现_qt音乐播放器歌词滚动-CSDN博客

本文链接：https://blog.csdn.net/XiugongHao/article/details/136872723

这篇文章介绍了如何使用HTML、CSS和JavaScript配合，实现在网页上展示音频歌词并根据音频播放进度动态高亮显示对应歌词。代码展示了如何解析歌词文件、计算播放进度对应的歌词索引以及更新DOM来控制歌词列表的滚动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述
index.css

* {
  padding: 0;
  margin: 0;
}
body {
  background: #000;
  color: #666;
   /*对内部行盒子元素实现居中 */
  text-align: center;
}
audio {
  width: 450px;
  margin: 30px 0;
}
.container {
  height: 420px;
  overflow: hidden;
   /*border: 2px solid #fff;*/
}
.container ul {
   /*border: 1px solid #fff;*/
  transition: 0.6s;
  list-style: none;
}
.container ul li {
  height: 30px;
  line-height: 30px;
  transition: 0.2s;
}
.container li.active {
  color: #fff;
  transform: scale(1.2);
}

data.js

var lrc = `[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]天阔阔雪漫漫共谁同航
[01:46.93]这沙滚滚水皱皱笑着浪荡
[01:49.54]贪欢一刻偏教那女儿情长埋葬
[01:53.41]
[02:15.45]笑你我枉花光心计
[02:18.53]爱竞逐镜花那美丽
[02:21.14]怕幸运会转眼远逝
[02:23.76]为贪嗔喜恶怒着迷
[02:26.43]责你我太贪功恋势
[02:28.98]怪大地众生太美丽
[02:31.60]悔旧日太执信约誓
[02:34.26]为悲欢哀怨妒着迷
[02:36.90]啊 舍不得璀灿俗世
[02:42.04]啊 躲不开痴恋的欣慰
[02:47.34]啊 找不到色相代替
[02:52.52]啊 参一生参不透这条难题
[02:57.47]吞风吻雨葬落日未曾彷徨
[03:00.05]欺山赶海践雪径也未绝望
[03:02.64]拈花把酒偏折煞世人情狂
[03:05.27]凭这两眼与百臂或千手不能防
[03:08.22]天阔阔雪漫漫共谁同航
[03:10.49]这沙滚滚水皱皱笑着浪荡
[03:13.06]贪欢一刻偏教那女儿情长埋葬
[03:18.45]吞风吻雨葬落日未曾彷徨
[03:20.90]欺山赶海践雪径也未绝望
[03:23.54]拈花把酒偏折煞世人情狂
[03:26.21]凭这两眼与百臂或千手不能防
[03:29.07]天阔阔雪漫漫共谁同航
[03:31.32]这沙滚滚水皱皱笑着浪荡
[03:33.92]贪欢一刻偏教那女儿情长埋葬
[03:39.32]吞风吻雨葬落日未曾彷徨
[03:41.84]欺山赶海践雪径也未绝望
[03:44.38]拈花把酒偏折煞世人情狂
[03:47.04]凭这两眼与百臂或千手不能防
[03:49.99]天阔阔雪漫漫共谁同航
[03:52.20]这沙滚滚水皱皱笑着浪荡
[03:54.89]贪欢一刻偏教那女儿情长埋葬
[04:00.28]吞风吻雨葬落日未曾彷徨
[04:02.68]欺山赶海践雪径也未绝望
[04:05.25]拈花把酒偏折煞世人情狂
[04:07.90]凭这两眼与百臂或千手不能防
[04:10.85]天阔阔雪漫漫共谁同航
[04:13.08]这沙滚滚水皱皱笑着浪荡
[04:15.75]贪欢一刻偏教那女儿情长埋葬
[04:19.48]`;

index.js

/**
 * 解析字符串
 * 字符串 -> 对象数组
 * {time: 开始时间,word: 歌词内容}
 */
function parseLrc() {
  // 先变成对象
  let lines = lrc.split('\n');
  let result = []
  for (let i = 0; i < lines.length; i++) {
    let str = lines[i];
    let parts = str.split(']')
    let timeStr = parts[0].substring(1)
    let obj = {
      time: parseTime(timeStr),
      words: parts[1]
    }
    result.push(obj)
  }
  return result
}
/**
 * 将时间的字符串转换为数字（s）
 * @param {String} timeStr 时间字符串
 */
function parseTime(timeStr) {
  let parts = timeStr.split(':')
  return +parts[0] * 60 + +parts[1]
}
let lrcData = parseLrc()


const doms = {
  audio: document.querySelector('audio'),
  ul: document.querySelector('.container ul'),
  container: document.querySelector('.container')
}

/**
 * 计算出当前播放器的播放进度下
 * 应该高亮显示的歌词下标
 */
function findIndex() {
  const curTime = doms.audio.currentTime
  for (let i = 0; i < lrcData.length; i++) {
    if (lrcData[i].time > curTime) {
      return i - 1
    }
  }
  return lrcData.length - 1
}
/**
 * 创建歌词列表
 */
function createLrcList() {
  // 创建文档片段
  let frag = document.createDocumentFragment()
  for (let i = 0; i < lrcData.length; i++) {
    let li = document.createElement('li')
    li.innerText = lrcData[i].words
    frag.appendChild(li)  // 如果直接加到 ul 中会每次都渲染 dom
  }
  doms.ul.appendChild(frag)
}
createLrcList()
// 容器高度
let containerHeight = doms.container.clientHeight
let liHeight = doms.ul.children[0].clientHeight
// 最大偏移量
let maxOffset = doms.ul.clientHeight - containerHeight
/**
 * 设置ul元素的偏移量
 */
function setOffset() {
  let index = findIndex()
  let offset = liHeight * index + liHeight / 2 - containerHeight / 2
  if (offset < 0) {
    offset = 0
  }
  // if (offset > maxOffset) {
  //   offset = maxOffset
  // }
  doms.ul.style.transform = `translateY(-${offset}px)`
  let li = doms.ul.querySelector('.active')
  if (li) {
    li.classList.remove('active')
  }
  li = doms.ul.children[index]
  if (li) {
    li.classList.add('active')
  }
}
doms.audio.addEventListener('timeupdate', setOffset)

index.html

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

<head>
    <meta charset="UTF-8">
    <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0"
    >
    <title>Document</title>
    <link
            rel="shortcut icon"
            href="./assets/favicon.ico"
            type="image/x-icon"
    >
    <link
            rel="stylesheet"
            href="./css/index.css"
    >
</head>

<body>
<!--
  布尔属性书写方式：
  1. 属性名="属性名"
  2. 属性名
-->
<audio
        controls
        src="./assets/music.mp3"
></audio>
<div class="container">
    <!-- 乱数假文 -->
    <ul class="lrc-list">
        <!-- <li>Lorem ipsum dolor sit.</li> -->
    </ul>
</div>
<script src="./js/data.js"></script>
<script src="./js/index.js"></script>
</body>

</html>