Yan Home

Appearance

案例-歌词滚动 ​

思路 ​

  1. 数据逻辑 --先看数据是否为自己方便使用，自己可以对数据进行改造。
  2. 页面逻辑 --做的时候，并不是按照点击
  3. 事件 --事件就是利用对应的 API，将已有的页面逻辑像连连看一样进行连接。

页面逻辑其实就是一个又一个的函数，就像搭积木一样搭建起来。

先写页面结构和样式，尽可能的让‘小弟’为 js 铺路。

每个函数写上对应的 js 注释，写完一个忘记一个，确保每个函数经得起测试，之后就像使用浏览器已经写好的 Api 直接使用即可。

函数要保证逻辑的独立性。

代码 ​

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>歌词滚动效果</title>
    <link rel="stylesheet" href="./css/index.css" />
    <link rel="shortcut icon" href="./assets/favicon.ico" type="image/x-icon" />
  </head>

  <body>
    <audio controls src="./assets/music.mp3"></audio>
    <div class="container">
      <ul></ul>
    </div>

    <script src="./js/data.js"></script>
    <script src="./js/index.js"></script>
  </body>
</html>
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]`;
js
//数据处理
/**
 * 格式化数据，格式为[{time,text}...]
 * @returns
 */
function parseLrc() {
  const result = [];
  const lineArr = lrc.split("\n");
  lineArr.forEach((line) => {
    const parts = line.split("]");
    const timeStr = parts[0].substring(1);
    const obj = {
      time: parseTime(timeStr),
      text: parts[1],
    };
    result.push(obj);
  });
  return result;
}

/**
 * 格式化时间，将时间转化为秒
 * @param {*} timeStr 传入的时间字符串 00:08:02
 * @returns 返回秒
 */
function parseTime(timeStr) {
  // +'123'可以转换为数值类型的123
  const parts = timeStr.split(":");
  return +parts[0] * 60 + +parts[1];
}

const lrcData = parseLrc();
console.log(lrcData);

//页面逻辑
/*将dom放在一个对象中，防止产生变量名的污染，因为会大量的获取dom */
const dom = {
  //播放器
  audio: document.querySelector("audio"),
  //ul
  ul: document.querySelector(".container ul"),
  //盒子
  container: document.querySelector(".container"),
};

/**
 * 页面初始化的时候将歌词渲染
 */
function initDom() {
  const frag = document.createDocumentFragment(); //创建一个Dom片段
  lrcData.forEach((item) => {
    const oli = document.createElement("li");
    oli.innerText = item.text;
    // dom.ul.appendChild(oli);//会不停的引起回流
    frag.appendChild(oli);
  });
  dom.ul.appendChild(frag); //将dom片段放入ul,这样就不会重复的引起回流了
}
initDom();

/**
 * 播放到当前秒的时候,找到当前应该高亮的歌词下标
 * 如果没有任何一句歌词需要显示，则得到-1
 * @returns
 */
function findIndex() {
  const curTime = dom.audio.currentTime;
  console.log(curTime);
  //边界 0的时候是-1,不知道显示哪个  超过的时候，显示最大的
  for (let i = 0; i < lrcData.length; i++) {
    if (curTime < lrcData[i].time) return i - 1;
  }

  //找遍了都没有，就说明播放在了最后一句
  return lrcData.length - 1;
}

const liHeight = dom.ul.children[0].clientHeight; //每个li的高度
const containerHeight = dom.container.clientHeight; //盒子的高度
const maxHeight = dom.ul.clientHeight - containerHeight; //可以滚动得最大高度
/**
 * 设置歌词滚动的偏移
 */
function setOffset() {
  const activeIndex = findIndex();
  //ul应该滚动的距离是,第一个li到当前li的高度的一半 - container盒子高度的一半
  let offset = activeIndex * liHeight + liHeight / 2 - containerHeight / 2;
  if (activeIndex < 0) offset = 0;
  if (activeIndex > maxHeight) offset = maxHeight;
  dom.ul.style.transform = `translateY(-${offset}px)`;
  //清除所有高亮
  let li = dom.ul.querySelector(".active");
  if (li) {
    console.log("激活的", li);
    li.classList.remove("active");
  }
  //设置高亮
  li = dom.ul.children[activeIndex];
  if (li) li.classList.add("active");
}

//
dom.audio.addEventListener("timeupdate", setOffset);
css
* {
  margin: 0;
  padding: 0;
}
body {
  color: #666;
  background-color: #000;
  text-align: center;
}
ul {
  list-style: none;
}

/*  */
audio {
  width: 450px;
  margin: 30px 0;
}

.container {
  height: 420px;
  overflow: hidden;
  /* border:1px solid #666 */
}
.container ul {
  transition: all 0.6s;
}
.container li {
  height: 30px;
  line-height: 30px;
  transition: all 0.2s;
  /* css的属性是直接从一个变到另一个的，是瞬间的 */
  /* transition的过度效果支队数值型的css属性起作用 */
}

.container li.active {
  color: #fff;
  transform: scale(1.2);
}

MIT License

Copyright © 2024-present Yan