歌词滚动效果

最新推荐文章于 2024-05-20 15:17:08 发布

前端专业写bug

最新推荐文章于 2024-05-20 15:17:08 发布

阅读量363

点赞数 9

文章标签： javascript 前端

本文链接：https://blog.csdn.net/bs521521/article/details/136208783

版权


<!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);
    }
}