最后

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

给大家分享一些关于HTML的面试题。

通过以上处理得到一个新的数据 ，数据具体格式如下：

二、获取当前播放时间

 <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++) {


### 最后

如果你已经下定决心要转行做编程行业，在最开始的时候就要对自己的学习有一个基本的规划，还要对这个行业的技术需求有一个基本的了解。有一个已就业为目的的学习目标，然后为之努力，坚持到底。如果你有幸看到这篇文章，希望对你有所帮助，祝你转行成功。

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

![](https://img-blog.csdnimg.cn/img_convert/54a6b04f29167333b139d2753f60db9f.png)



坚持到底。如果你有幸看到这篇文章，希望对你有所帮助，祝你转行成功。

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

![](https://img-blog.csdnimg.cn/img_convert/54a6b04f29167333b139d2753f60db9f.png)