前言：这个功能也是我做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即当前播放时间。进行对比匹配，来渲染高亮区域，即当前的歌词，然后整体上移实现滚动。
好了以上就是我实现歌词同步的思路，希望对大家有所帮助。·
