音乐播放器 歌词同步滚动功能实现

前言：这个功能也是我做vue项目运用到的，刚开始觉得好难，但是细想还是觉得尝试挑战一下。首先就是百度，发现百度真的东西很乱，广告也多。后来去B站刷大佬们的视频，才有了实现它的思路，确实很感谢B站大佬们。写下这篇博客呢，也是对我这段时间的学习总结，知识点梳理..

---

一、前提

        因为我做的项目是要和后端进行连接，所以这里的歌词是从后端获取到的，也是经过沟通，约定好字段和格式，首先我们要实现这个功能，要了解audio标签的属性currentTime，这个属性可以设置返回音频的当前位置，也是实现歌词同步的核心之一，当然audio标签还有更多的用法，大家感兴趣可以拓展一下，这方面知识网上有不少，这里不就一一阐述了。

[00:05]作词 : 伍佰
[00:12]作曲 : 伍佰
[00:23]编曲 : 伍佰 & China Blue
[00:34]让我将你心儿摘下
[00:38]试着将它慢慢溶化
[00:41]看我在你心中是否仍完美无瑕
[00:48]是否依然为我事事牵挂
[00:52]依然爱我无法自拔
[00:55]心中是否有我未曾到过的地方啊
[01:02]那里湖面总是澄清
[01:05]那里空气充满宁静
[01:09]雪白明月照在大地
[01:12]藏着你不愿提起的回忆
[01:18]你说真心总是可以从头
[01:22]真爱总是可以长久
[01:25]为何你的眼神还有孤独时的落寞

二、实现

        接下来要准备的是后端给的数据，也可以自己先找一个这样类型的数据，每句歌词前面一定要有时间戳，这也是我们判断歌词和歌曲进度的点。具体实现思路就是把歌词和歌曲时间点分别存放到数组中，转化格式，(当然也可以存放到二维数组或者json对象中，主要是把歌词和时间区分开)获取当前audio标签播放的时间点然后进行对比。再进行dom的渲染。到这里也就差不多了，逻辑思路也不是很难，下面是源码：

这里是dom元素和css样式

<template>
    <div class="songCi">
            <div class="cover">
                <!-- 存放歌词的dom元素 -->
                <ul class="cover-l"></ul>
        </div>
    </div>
</template>


<style>
.songCi {
  width: 3.75rem;
  height: 100%;
  background-color: #191919;
  overflow: hidden;
  text-align: center;
  position: relative;
}
.songCi div{
    font-size: 0.16rem;
    transition: top 1s linear;
}
.songCi p{
    position: relative;
    line-height: 0.36rem;
}
.songCi ul{
    position: absolute;
    top: 150px;
    width: 400px;
    transition: top 1s linear;
}
.songCi  ul>li{
    list-style: none;
    height: 30px;
    line-height: 30px;
    text-align: center;
    width: 400px;
}
.songCi span{
    position: absolute;
    left: 0.2rem;
}
.active{
    color: #269;
}
</style>

主要是准备过渡属性以及定位，还有移动距离和高亮样式

然后js逻辑部分是：

        我这里因为是在父组件发送的请求，所以用了父子组件传值，子组件用prpos属性获取到了这个歌词，然后在watch监听中操作处理。

        这里主要的思路就是，把歌词进行拆分，让每句歌词前面的时间点来动态匹配，audio的currentTime即当前播放时间。进行对比匹配，来渲染高亮区域，即当前的歌词，然后整体上移实现滚动。

好了以上就是我实现歌词同步的思路，希望对大家有所帮助。         ·