vue实现歌词滚动_vue 实现一个歌词滚动效果，音频面试文案

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数HarmonyOS鸿蒙开发工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年HarmonyOS鸿蒙开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上HarmonyOS鸿蒙开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新

如果你觉得这些内容对你有帮助，可以添加VX：vip204888 （备注鸿蒙获取）

一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

      //保存当前歌词动画执行事件
      this.lrcTime = this.lrcData[i].time - this.lrcData[i - 1].time;
      return i - 1;
    }
  }
},

> 
>     获取到当前播放时间之后，和歌词数组里的时间相互匹配，当播放器当前时间第一次小于歌词时间时当前数组下标减一即为当前时间数组所对应歌词下标。
> 
> 
> 


具体页面布局我这里写的相对比较简单，主要只有一个播放控件

> 
>  css定义动画，实现歌词颜色从左到右缓慢变化。
> 
> 
> 

@keyframes scan {
0% {
background-size: 0 100%;
}
100% {
background-size: 100% 100%;
}
}
.text {
background: #7e7e7e -webkit-linear-gradient(left, #76ca16, #0fa046) no-repeat 0
0;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-size: 0 100%;
}
.load {
background-size: 100% 100%;
animation: scan linear;
}

    由于每一句歌词演唱时间不同，如果每一句歌词动画执行时间都相同的话，页面会很生硬，显得比较尴尬。我这里用了个笨办法，用下一句歌词的时间减去当前歌词的时间，得到的就是当前歌词演唱所需的时间，把歌词动画时间修改为当前获取的花时间，即可实现歌词和演唱时间同步的效果，具体代码如下：

audioTime(e) {
var time = e.target.currentTime; //当前播放器时间
for (var i = 0; i < this.lrcData.length; i++) {
if (time < this.lrcData[i].time) {
//循环歌词数组，当播放器当前时间第一次小于歌词时间时当前数组下标减一即为当前时间数组所对应歌词下标
this.lrcTime = this.lrcData[i].time - this.lrcData[i - 1].time;
this.dataWords = this.lrcData[i - 1].words;
return i - 1;
}
}
},

综上所述，即可得到一个简单的歌词和歌曲同步效果的歌词滚动！


以下是全部代码：