Merge pull request #4 from tgx1587900660/dev_html

Added LRC display and scrolling functionality to song player.
tgx1587900660 · Feb 2, 2024 · b112ed5 · b112ed5
2 parents 549f9c5 + e7c4bff
commit b112ed5
Show file tree

Hide file tree

Showing 5 changed files with 267 additions and 0 deletions.
diff --git a/src/demo/01.歌词滚动效果/assets/data.js b/src/demo/01.歌词滚动效果/assets/data.js
@@ -0,0 +1,61 @@
+var lrc = `[00:09.70]请你不要再迷恋哥，哥只是一个传说
+[00:10.70] ~~~
+[00:20.60]你不要再迷恋我，我只是一个传说
+[00:26.45]我不曾寂寞，因为有你曾陪着我
+[00:31.39]When everybody says someone is a hero
+[00:34.30]No one really knows the truth about an idol
+[00:37.00]Whose inside is pretty lonely n' vulnerable
+[00:39.51]Wishing there'll be someone who do know
+[00:41.89]One time, he set himself a high goal
+[00:44.60]He wants to be there as a role model
+[00:47.03]Ever since then life becomes a live show
+[00:49.98]Real time show without any rehearsal
+[00:52.57]每一个传说 都会随时间褪色
+[00:57.14]每个强者都会有 背后的辛酸挫折
+[01:02.34]之所以活的洒脱 是因为懂得取舍
+[01:08.21]之所以淡漠 是把一切都看破
+[01:12.47]请你不要再迷恋哥，哥只是一个传说
+[01:18.00]虽然我 舍不得 可是我 还是要说
+[01:23.21]你们还要记得我 ,尽管我还在飘泊
+[01:29.07]哥不会寂寞，因为有寂寞陪着哥
+[01:33.61]你不要再迷恋我，我只是一个传说 ( 哈 )
+[01:38.86]虽然我 故作冷漠 是不想 再次难过
+[01:44.06]你不要再迷恋哥，哥只是一个传说
+[01:49.90]我 不曾寂寞， 因为有你曾陪着我
+[01:57.35]Ey Yo
+[02:00.15]Come on
+[02:04.01]Everybody listen now
+[02:05.47]나한테 미련을 두지마,설화만 이니까
+[02:08.19]너랑 함께 있어서 고독한 사람이아니라
+[02:10.83]모든설화는 시간에 따라서 돌아가
+[02:13.38]고독이랑 함께 있어서 고독한 사람이 아니야
+[02:16.04]每一个传说 都会随时间褪色
+[02:20.54]每个强者都会有 背后的辛酸挫折
+[02:25.81]之所以活的洒脱 是因为懂得取舍
+[02:31.69]之所以淡漠 是把一切都看破
+[02:35.93]请你不要再迷恋哥，哥只是一个传说
+[02:41.45]虽然我 舍不得 可是我 还是要说
+[02:46.63]你们还要记得我 ,尽管我还在飘泊
+[02:52.55]哥不会寂寞，因为有寂寞陪着哥
+[02:57.07]你不要再迷恋我 (哈)，我只是一个传说
+[03:02.33]虽然我 故作冷漠 是不想 再次难过
+[03:07.53]你不要再迷恋哥，哥只是一个传说
+[03:13.38]我 不曾寂寞， 因为有你曾陪着我
+[03:18.76]爱 也还要割舍 是因为 没有结果
+[03:27.70]如果说 你也会懂得 就一起 唱这首歌
+[03:40.33]请你不要再迷恋哥
+[03:42.17]（我荣耀 我落魄 我期盼）
+[03:44.05]哥只是一个传说
+[03:45.57]（我堕落 我挥霍 我窘迫 我漂泊 我稳固）
+[03:46.76]虽然我 舍不得
+[03:47.71]（我深爱 我幸福 我放纵 我悔恨）
+[03:49.32]可是我 还是要说
+[03:50.17]（我醒悟 我失落 我一切都做过）
+[03:51.88]你不要再迷恋我
+[03:53.00]（现在我清醒了 玩够了 释然了）
+[03:54.51]我只是一个传说
+[03:55.59]（看透了 回头了 承受了 从此之后）
+[03:57.68]我 不曾寂寞
+[03:59.70]因为有你曾陪着我
+[04:01.02]（不再难受了一切都默默接受了 ）
+[04:02.93]哈哈！`
diff --git a/src/demo/01.歌词滚动效果/assets/哥只是个传说.mp3 b/src/demo/01.歌词滚动效果/assets/哥只是个传说.mp3
diff --git a/src/demo/01.歌词滚动效果/index.html b/src/demo/01.歌词滚动效果/index.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="style.css" />
+
+    <title>歌词滚动效果</title>
+  </head>
+  <body>
+    <audio id="audio" controls src="assets/哥只是个传说.mp3"></audio>
+    <div class="container">
+      <ul class="lrc-list">
+        <!-- <li>Lorem ipsum dolor sit amet.</li>
+        <li>Aliquam at hic explicabo rem.</li>
+        <li>Asperiores labore voluptas molestiae. Dolor.</li>
+        <li>Non voluptatem voluptas quae debitis.</li>
+        <li>Quis similique fugit minus illum!</li>
+        <li>Libero neque architecto quod fugiat!</li>
+        <li>Quidem magnam eos aspernatur ratione.</li>
+        <li>Vero voluptates quam aliquam blanditiis!</li>
+        <li class="active">Voluptatibus at porro itaque aut.</li>
+        <li>Blanditiis eos repudiandae veritatis exercitationem.</li>
+        <li>Beatae placeat eaque accusantium nesciunt.</li>
+        <li>Sequi nobis odit animi et.</li>
+        <li>Ullam sit maiores eos? Provident?</li>
+        <li>Minima molestias cupiditate non quidem.</li>
+        <li>Doloribus aliquam possimus necessitatibus ea?</li>
+        <li>Delectus reprehenderit nemo voluptatem praesentium.</li>
+        <li>Ipsum, quae suscipit! Quas, earum!</li>
+        <li>Vero blanditiis expedita dicta in?</li>
+        <li>Recusandae debitis et unde repellendus?</li>
+        <li>Dolore voluptatem sequi quod sit!</li>
+        <li>Vero suscipit ea iusto consequatur.</li>
+        <li>Sunt odio accusamus nihil explicabo.</li>
+        <li>Eaque dicta animi laboriosam quidem!</li>
+        <li>Itaque impedit mollitia consequatur ducimus?</li>
+        <li>Maxime ea debitis nobis deleniti.</li>
+        <li>Labore quibusdam qui reprehenderit corporis!</li>
+        <li>Officiis molestias adipisci amet fugiat!</li>
+        <li>Ipsa quia recusandae quaerat mollitia?</li>
+        <li>Vero iste iure sed delectus.</li>
+        <li>Voluptatibus, qui? Ratione, placeat quae!</li> -->
+      </ul>
+    </div>
+
+    <script src="assets/data.js"></script>
+    <script src="index.js"></script>
+  </body>
+</html>
diff --git a/src/demo/01.歌词滚动效果/index.js b/src/demo/01.歌词滚动效果/index.js
@@ -0,0 +1,117 @@
+/**
+ * 集中获取dom元素，存放到一个 对象doms 中
+ */
+const doms = {
+  audio: document.querySelector('#audio'),
+  container: document.querySelector('.container'),
+  ul: document.querySelector('.lrc-list')
+}
+
+/**
+ * 解析lrc歌词字符串
+ * 返回一个歌词对象数组，
+ * 每个歌词对象: { time: 开始时间, words: 歌词内容 }
+ */
+function parseLrc() {
+  const arr = lrc.split('\n')
+  const result = arr.map(item => {
+    if (item.includes('[') && item.includes(']')) {
+      const time = item.match(/\[(\d{2}:\d{2}.\d{2})/)[1]
+      const words = item.replace(`[${time}]`, '')
+      return {
+        time: parseTime(time),
+        words
+      }
+    }
+  })
+  return result
+}
+
+/**
+ * 将一个时间字符串解析为数字 (秒)
+ * @param {string} timeStr 时间字符串，如 '01:23.45'
+ * @returns {number} 解析后的数字，如 83.45
+ */
+function parseTime(timeStr) {
+  const [m, s] = timeStr.split(':')
+  return +m * 60 + +s
+}
+const lrcList = parseLrc()
+console.log('lrcList :>> ', lrcList)
+
+/**
+ * 计算出当播放器播放到第几秒的情况下，
+ * 应该显示哪一行歌词的索引,
+ * 如果没有一句歌词需要显示，返回 -1
+ * @returns {number} 应该显示的行号，从 0 开始
+ */
+function findIndex() {
+  const currentTime = doms.audio.currentTime
+  // console.log('currentTime :>> ', currentTime)
+  for (let i = 0; i < lrcList.length; i++) {
+    if (currentTime < lrcList[i].time) {
+      return i - 1
+    }
+  }
+
+  return lrcList.length - 1
+}
+// findIndex()
+
+/**
+ * 创建显示歌词的元素 li，
+ * 并将它们添加到 ul 中，
+ * 使用 document.createDocumentFragment() 提高性能
+ * @returns {void}
+ */
+function createLrcElements() {
+  const frags = document.createDocumentFragment()
+
+  for (let i = 0; i < lrcList.length; i++) {
+    const li = document.createElement('li')
+    li.textContent = lrcList[i].words
+    frags.append(li)
+  }
+
+  // console.log('frags :>> ', frags)
+  doms.ul.appendChild(frags)
+}
+createLrcElements()
+
+const containerHeight = doms.container.clientHeight // 容器的自身高度(不包括边框)
+const liHeight = doms.ul.children[0].clientHeight // 每个 li 的高度
+const maxOffset = doms.ul.clientHeight - containerHeight
+/**
+ * 设置 ul 的偏移量，使其与当前播放时间相对应，
+ * 使当前播放时间对应的 那个歌词元素li, 出现在容器的最中间
+ * @returns {void}
+ */
+function setOffset() {
+  const index = findIndex()
+  let offset = liHeight * index + liHeight / 2 - containerHeight / 2
+  // 边界判断：没有超出时，offset 为 0，超出时，offset 为 maxOffset
+  if (offset < 0) {
+    offset = 0
+  }
+  if (offset > maxOffset) {
+    offset = maxOffset
+  }
+  doms.ul.style.transform = `translateY(-${offset}px)`
+
+  // 去掉之前高亮的li的 active 类名
+  const activeLi = doms.ul.querySelector('.active')
+  if (activeLi) {
+    activeLi.classList.remove('active')
+  }
+
+  // 设置当前高亮的li的 active 类名
+  const li = doms.ul.children[index]
+  if (li) {
+    li.classList.add('active')
+  }
+}
+// console.dir(doms.audio)
+// setOffset()
+
+// 监听 audio 元素的 timeupdate 事件，并调用 setOffset 方法
+doms.audio.addEventListener('timeupdate', setOffset)
diff --git a/src/demo/01.歌词滚动效果/style.css b/src/demo/01.歌词滚动效果/style.css
@@ -0,0 +1,39 @@
+* {
+  padding: 0;
+  margin: 0;
+}
+
+html,
+body {
+  height: 100%;
+  width: 100%;
+  background-color: #000;
+  color: #666;
+  text-align: center;
+}
+audio {
+  width: 450px;
+  margin: 30px auto;
+}
+
+.container {
+  height: 420px;
+  margin: 20px auto;
+  border: 2px solid #fff;
+  overflow: hidden;
+  /* overflow-y: scroll; */
+}
+
+.container ul {
+  list-style: none;
+}
+.container li {
+  height: 30px;
+  line-height: 30px;
+  transition: 0.6s;
+  /* border: 1px solid #fff; */
+}
+.container li.active {
+  transform: scale(1.2);
+  color: #fff;
+}