<!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="shortcut icon" href="./assets/favicon.jpg" type="image/x-icon">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<audio controls src="./assets/背包-苏有朋.mp3"></audio>
<div class="container">
<ul class="lrc-list">
<!-- li*10>lorem3 lorem假文3个词 -->
<!-- <li>Lorem.</li>
<li>Adipisci?</li>
<li>Fugiat!</li>
<li>Molestias.</li>
<li>Fugiat!</li>
<li>Eum.</li>
<li class="active">Possimus?</li>
<li>Similique.</li>
<li>Similique!</li>
<li>Ab?</li>
<li>Lorem, ipsum dolor.</li>
<li>Porro, eveniet exercitationem!</li>
<li>Nam, molestias eius.</li>
<li>At, corporis ipsum?</li>
<li>Nemo, distinctio! Aliquid!</li>
<li>Earum, similique ea!</li>
<li>Magnam, eum fugiat!</li>
<li>Quod, quaerat possimus.</li>
<li>Deleniti, quos assumenda.</li>
<li>Nam, porro itaque.</li>
<li>Rerum, recusandae quis.</li>
<li>Mollitia, quod sunt!</li>
<li>Veniam, totam amet.</li>
<li>Voluptate, ipsam autem!</li>
<li>Dolor, maiores explicabo!</li>
<li>Laboriosam, quidem quisquam.</li>
<li>Perferendis, possimus ratione.</li>
<li>Quisquam, soluta incidunt.</li>
<li>Debitis, sequi recusandae.</li>
<li>Incidunt, facere a.</li>
<li>Iste, natus sit!</li>
<li>Ducimus, voluptas! Repellendus.</li>
<li>Beatae, voluptate sed.</li>
<li>Inventore, aliquam natus.</li>
<li>Perspiciatis, sint dignissimos.</li>
<li>Inventore, ab saepe!</li>
<li>Inventore, dolor incidunt.</li>
<li>Dicta, sunt harum.</li>
<li>Dignissimos, soluta dicta!</li>
<li>Ipsam, quia aliquid.</li> -->
</ul>
</div>
<script src="./assets/背包 - 苏有朋.js"></script>
<script src="./js/index.js"></script>
</body>
</html>
let lrc = `
[00:00.00] 作曲 : 李子恒
[00:34.92]轻轻地打开背包
[00:37.51]发现我的行囊
[00:39.38]是一本年轻的护照
[00:43.44]通过了成长的骄傲
[00:46.12]投入另一个
[00:47.99]天涯海角
[00:51.53]装过了多少希望
[00:53.70]装过多少惆怅
[00:55.60]像一张岁月的邮票
[00:59.63]把自己寄给明天
[01:01.91]背着旧愁新情
[01:04.20]不断地寻找
[01:07.69]
[01:09.90]我那穿过风花雪月的年少
[01:14.15]我那驼着岁月的背包
[01:18.15]我的青春梦里落花知多少
[01:22.19]寂寞旅途谁明了
[01:26.27]曾经为你痴狂多少泪和笑
[01:30.34]曾经无怨无悔的浪潮
[01:34.38]我的流浪路上几多云和树
[01:38.38]只有背包陪着我奔跑
[01:43.06]
[02:18.30]轻轻地打开背包
[02:20.90]发现我的行囊
[02:22.82]是一本年轻的护照
[02:26.90]通过了成长的骄傲
[02:29.56]投入另一个
[02:31.39]天涯海角
[02:34.98]装过了多少希望
[02:37.15]装过多少惆怅
[02:39.02]像一张岁月的邮票
[02:43.13]把自己寄给明天
[02:45.34]背着旧愁新情
[02:47.47]不断地寻找
[02:50.84]
[02:53.55]我那穿过风花雪月的年少
[02:57.51]我那驼着岁月的背包
[03:01.59]我的青春梦里落花知多少
[03:05.62]寂寞旅途谁明了
[03:09.66]曾经为你痴狂多少泪和笑
[03:13.74]曾经无怨无悔的浪潮
[03:17.82]我的流浪路上几多云和树
[03:21.89]只有背包陪着我奔跑
[03:26.25]
[03:32.12]我那穿过风花雪月的年少
[03:36.12]我那驼着岁月的背包
[03:40.20]我的青春梦里落花知多少
[03:44.20]寂寞旅途谁明了
[03:48.28]曾经为你痴狂多少泪和笑
[03:52.35]曾经无怨无悔的浪潮
[03:56.38]我的流浪路上几多云和树
[04:00.26]只有背包陪着我奔跑
[04:04.38]
`
// 解析歌词字符串
/**
* 解析歌词字符串
* 得到一个歌词对象的数组
* 每个歌词对象
* {time:time,word:歌词内容}
*/
function parseLrc() {
var lines = lrc.split('\n')
var arr = []
lines.map(item => {
let wordTime = item.split(']')
let timeSen = wordTime[0].replace('[', '').split(':')
let time = +timeSen[0] * 60 + +(timeSen[1])
if (wordTime[0].replace('[', '') != '') {
arr.push({ time: time, word: wordTime[1] })
}
})
return arr
console.log(arr);
}
// 获取需要的dom
let dom = {
audio: document.querySelector('audio'),
ul: document.querySelector('.lrc-list'),
container: document.querySelector('.container')
}
let lrcData = parseLrc()
/**
* 计算当前,播放到第几秒的情况
* lrcData应该高亮显示的歌词下标
*/
function findIndex() {
let currentTime = dom.audio.currentTime
let wordLrc = 0
lrcData.map((item, index) => {
if (currentTime > item.time) {
console.log(currentTime,item.time);
return wordLrc = index
}
})
return wordLrc
console.log(wordLrc);
}
/**
* 创建歌词元素li
*/
function createLrcLi() {
// 创建一个收集的dom
let frag = document.createDocumentFragment()
lrcData.map(item => {
let li = document.createElement('li')
li.textContent = item.word
frag.appendChild(li)
})
// 将收集的dom一次插入
dom.ul.appendChild(frag)
}
createLrcLi()
//盒子高
let h = dom.container.clientHeight
let lih = dom.ul.children[0].clientHeight
let maxOffset = dom.ul.clientHeight - h //最大偏移
/**
* 设置ur偏移量
*/
function setOffset() {
var index = findIndex()
let offset = lih * index + lih / 2 - h / 2
if (offset < 0) {
offset = 0
}
if (offset > maxOffset) {
offset = maxOffset
}
dom.ul.style.transform = `translateY(-${offset}px)`
let li = dom.ul.querySelector('.active')
if (li) {
li.classList.remove('active')
}
li = dom.ul.children[index]
if (li) {
li.classList.add('active')
}
console.log(offset);
}
dom.audio.addEventListener('timeupdate',
setOffset
)
*{
margin: 0;
padding: 0;
}
body{
background: #000;
color: #666;
text-align: center;
}
audio{
width: 450px;
margin: 30px 0;
}
.container{
height: 420px;
overflow: hidden;
li{
height: 30px;
line-height: 30px;
transition: all .5s;
}
.lrc-list{
list-style: none;
/* transform: translateY(-300px); */
transition: all 1s;
}
.active{
color: #FFF;
transform: scale(1.3);
}
}