H5新增标签audio的使用，实现歌词同步

需要用到的知识点

currentTime 当前播放时间

timeupdate   播放时间改变触发事件

实现思路

需要后端返回数据有时间戳和歌词，类似以下这样：

lyricDataList: [
        {
          time: 25,
          lyric: "也许世界就这样"
        },
        {
          time: 28,
          lyric: "我也还在路上"
        },
        {
          time: 31,
          lyric: "没人能诉说"
        },
        {
          time: 36,
          lyric: "也许我只能沉默"
        },
        {
          time: 39,
          lyric: "眼泪湿润眼眶"
        },
        {
          time: 42,
          lyric: "可又不甘懦弱"
        }
      ]

给audio添加timeupdate事件函数，在事件函数中遍历后端返回的数据，用当前cuttentTime当前播放时间跟数据中的时间戳做匹配，以下为实现代码：

mounted() {
    //给音频插件添加播放时事件
    this.$refs.audio.addEventListener("timeupdate", throttle(this.acquisitionTimeHandler, 1000))
    //筛选出歌词
    this.lyricDataList.forEach(item => {
      this.lyricList.push(item.lyric);
    })
  }

methods：{
    acquisitionTimeHandler() {
          //获取audio节点
          let audioEle = this.$refs.audio
          //获取歌词的父节点，通过点击的节点与数组中的歌词匹配
          let lyricUlEle = this.$refs.lyricUl
          //当前播放秒数
          let times = Math.ceil(audioEle.currentTime)
          this.lyricDataList.forEach((item,index) => {
            //通过时间匹配的结果，用下标寻找相应元素节点
                if (item.time === times) {
              lyricUlEle.childNodes.forEach(item=>{
                item.className = ''
              })
              lyricUlEle.childNodes[index].className = "lyric"
            }
          })
        }
}

以上仅提供简单实现思路，有问题欢迎指教