前言:这个功能也是我做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即当前播放时间。进行对比匹配,来渲染高亮区域,即当前的歌词,然后整体上移实现滚动。

好了以上就是我实现歌词同步的思路,希望对大家有所帮助。         ·

Logo

前往低代码交流专区

更多推荐