Web前端最新vue实现歌词滚动_vue 实现一个歌词滚动效果(3)，老师讲的真棒

本文链接：https://blog.csdn.net/2401_84434331/article/details/138593705

更多面试题

**《350页前端校招面试题精编解析大全》**内容大纲主要包括 HTML，CSS，前端基础，前端核心，前端进阶，移动端开发，计算机基础，算法与数据结构，项目，职业发展等等

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

 <audio :src="music" @timeupdate="audioTime" controls></audio>

音频播放控件有个事件 @timeupdate事件可以实时反馈当前播放进度信息，封装audioTime函数，具体代码如下：

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

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

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

<template>
  <div>
    <audio :src="music" @timeupdate="audioTime" controls></audio>
    <div
      :class="className"
      :style="{ 'animation-duration': `${lrcTime}000ms` }" >
      {{ dataWords }}
    </div>
  </div>
</template>

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;
        }
      }
    },

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

以下是全部代码：

<template>
  <div class="hello">
    <audio :src="music" @timeupdate="audioTime" controls></audio>
    <div
      :class="className"
      :style="{ 'animation-duration': `${lrcTime}000ms` }" >
      {{ dataWords }}
    </div>
  </div>
</template>

<script>
import music from "../assets/music.mp3";
export default {
  data() {
    return {
      className: "text load",
      lrcTime: "",
      music,
      currenttime: "",
      LRC: `[00:00.000] 作词 : 周耀辉/李焯雄
[00:01.000] 作曲 : 林健华
[00:02.000] 编曲 : 林健华
[00:15.000]忽然之间
[00:18.000]天昏地暗
[00:21.000]世界可以忽然什么都没有
[00:28.000]我想起了你
[00:32.000]再想到自己
[00:35.000]我为什么总在非常脆弱的时候
[00:40.000]怀念你
[00:43.000]''
[00:44.000]我明白太放不开你的爱
[00:49.000]太熟悉你的关怀分不开
[00:54.000]想你算是安慰还是悲哀
[00:58.000]而现在就算时针都停摆
[01:03.000]就算生命像尘埃分不开
[01:08.000]我们也许反而更相信爱
[01:24.000]''
[01:25.000]如果这天地
[01:29.000]最终会消失
[01:32.000]不想一路走来珍惜的回忆
[01:38.000]没有你
[01:40.000]''
[01:41.000]我明白太放不开你的爱
[01:46.000]太熟悉你的关怀分不开
[01:51.000]想你算是安慰还是悲哀
[01:55.000]而现在就算时针都停摆
[02:00.000]就算生命像尘埃分不开
[02:05.000]我们也许反而更相信爱
[02:34.000]''
[02:35.000]我明白太放不开你的爱
[02:40.000]太熟悉你的关怀分不开
[02:45.000]想你算是安慰还是悲哀
[02:49.000]而现在就算时针都停摆
[02:54.000]就算生命像尘埃分不开
[03:00.000]我们也许反而更相信爱`,
      lrcData: "",
      dataWords: "",
    };
  },
  name: "HelloWorld",
  methods: {
    //歌词数据转化为数组
    formatLrc() {
      var strLrc = this.LRC.split("\n");
      let arr = [];
      for (var i = 0; i < strLrc.length; i++) {
        var str = strLrc[i];
        var parts = str.split("]");
        var timeStr = parts[0].substring(1);
        var obj = {
          time: this.formatTime(timeStr),
          words: parts[1],
        };
        arr.push(obj);
      }
      this.lrcData = arr;
    },
    //时间转换（秒）
#### 总结

三套“算法宝典”

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

![28天读完349页，这份阿里面试通关手册，助我闯进字节跳动](https://img-blog.csdnimg.cn/img_convert/921d61c147522637cff31846545fe430.png)



算法刷题LeetCode中文版（为例）

人与人存在很大的不同，我们都拥有各自的目标，在一线城市漂泊的我偶尔也会羡慕在老家踏踏实实开开心心养老的人，但是我深刻知道自己想要的是一年比一年有进步。

最后，我想说的是，无论你现在什么年龄，位于什么城市，拥有什么背景或学历，跟你比较的人永远都是你自己，所以明年的你看看与今年的你是否有差距，不想做咸鱼的人，只能用尽全力去跳跃。祝愿，明年的你会更好！

由于篇幅有限，下篇的面试技术攻克篇只能够展示出部分的面试题，详细完整版以及答案解析，有需要的可以关注
------------------------------------------------------------------

想说的是，无论你现在什么年龄，位于什么城市，拥有什么背景或学历，跟你比较的人永远都是你自己，所以明年的你看看与今年的你是否有差距，不想做咸鱼的人，只能用尽全力去跳跃。祝愿，明年的你会更好！

由于篇幅有限，下篇的面试技术攻克篇只能够展示出部分的面试题，详细完整版以及答案解析，有需要的可以关注
------------------------------------------------------------------