Vue3-歌词根据时间自动滚动
Vue3-歌词根据时间自动滚动创建结构,给合适的样式JS处理字符串,DOM,使得歌词滚动起来引用歌词,并实现滚动创建结构,给合适的样式<div class="lyric" v-show="isLyric" @click="isLyric = !isLyric" ref="playLrc"><div class="scroll-lrc"><p:class="{ acti
·
Vue3-歌词根据时间自动滚动
创建结构,给合适的样式
<div class="lyric" v-show="isLyric" @click="isLyric = !isLyric" ref="playLrc">
<div class="scroll-lrc">
<p
:class="{ active: getStateFn(item.time, item.pre) }"
v-for="(item, index) in $store.getters.listLyric"
:key="index"
>{{ item.content }}</p>
</div>
</div>
.lyric {
width: 7.5rem;
height: 7.1rem;
position: relative;
left: 0;
top: 3rem;
z-index: 10000;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
overflow: scroll;
padding: 0.2rem 0 0.4rem;
.scroll-lrc {
width: 7.1rem;
position: absolute;
left: calc(50% - 3.55rem);
top: 1.5rem;
overflow: hidden;
p {
width: 7.5rem;
text-align: center;
color: #fff;
}
p.active {
color: #ff0000;
}
}
}
通过接口能够获取到的歌词大致如下
[00:01.930]词:周仁
[00:02.890]曲:张博文
[00:03.900]OP:腾煌星象
[00:03.900]出品:网易飓风工作室
[00:13.210]
[00:15.200]填不满半排观众的电影
[00:18.820]直到散场时突然亮起灯
[00:22.730]字幕定格在某某出品和发行
[00:26.000]我目送 他们行色匆匆
[00:29.580]像个自不量力的复读生
[00:33.150]完不成金榜题名的使命
[00:36.980]命不是猜剪刀石头布的决定
[00:40.730]那么任性
[00:44.220]我吹过你吹过的晚风
[00:47.820]那我们算不算 相拥
[00:51.430]可如梦初醒般的两手空空
[00:55.040]心也空
[00:58.600]我吹过你吹过的晚风
[01:02.200]是否看过同样 风景
[01:05.799]像扰乱时差留在错位时空
[01:09.370]终是空 是空
[01:30.580]数不完见证许愿的繁星
[01:34.010]没灵验谁来安慰坏心情
[01:37.930]十字路口闪烁不停的信号灯
[01:41.190]有个人 显然心事重重
[01:44.810]三个字 只能说给自己听
[01:48.340]仰着头不要让眼泪失控
[01:52.200]哪里有可以峰回路转的宿命
[01:55.920]我不想听
[01:59.500]我吹过你吹过的晚风
[02:03.060]那我们算不算 相拥
[02:06.700]可如梦初醒般的两手空空
[02:10.259]心也空
[02:13.629]我吹过你吹过的晚风
[02:17.430]是否看过同样 风景
[02:21.060]像扰乱时差留在错位时空
[02:24.539]终是空 是空
[02:31.800]我吹过你吹过的晚风
[02:35.349]空气里弥漫着 心痛
[02:38.930]可我们 最后 在这错位时空
[02:42.599]终成空
[02:46.150]我吹过你吹过的晚风
[02:49.650]空气里弥漫着 心痛
[02:53.250]可我们 最后 在这错位时空
[02:56.830]终成空 成空
[03:02.210]
[03:03.210]编曲:陈林
[03:04.210]分轨混音:Mr.鱼
[03:05.210]制作人:艾辰
[03:06.210]贝斯:谭玮
[03:07.210]吉他:望雷
[03:08.210]监制/统筹:孙斌@子文沐凡
[03:09.210]贴唱/和声:沙栩帆
[03:11.210]企划:丁柏昕/袁晓童
[03:12.210]宣发:徐思灵/苏琦惠
[03:13.210]出品人:谢奇笛/凌联兴
[03:14.210]本歌曲来自〖飓风计划〗
[03:15.210]10亿现金激励,千亿流量扶持!
[03:16.210]业务联系:jf399@vip.163.com
JS处理字符串,DOM,使得歌词滚动起来
在vue
的store
的getter
里处理歌词,分别换行、去除空行、分割内容、时分秒
listLyric(state) {
if (state.lyric == null) {
return
}
// 换行
let arr1 = state.lyric.split(/\n/);
// 去空行
let arr2 = arr1.filter((item, index) => {
if (item == null || item == "") {
return false
} else {
return true
}
})
// 分隔 内容 时分秒
let arr3 = arr2.map((item, index) => {
let min = parseInt(item.slice(1, 3))
let sec = parseInt(item.slice(4, 6))
let mil = parseInt(item.slice(7, 10))
let time = min * 60 * 1000 + sec * 1000 + mil
let content = item.slice(11, item.length)
return {
content: content,
min: min,
sec: sec,
mil: mil,
time: time,
item: item
}
})
// 加入pre属性,为了判断当前歌词到哪一句了
arr3.forEach((item, i) => {
if (i == 0) {
item.pre = 0;
} else {
item.pre = arr3[i - 1].time;
}
})
// ES6扩展运算符...克隆数组
let arr4 = [...arr3];
// 时间全部往后移动一格
arr4.forEach((item, i) => {
item.pre = item.time
if (i + 1 > arr4.length - 1) {
item.time = arr4[i].time
} else {
item.time = arr4[i + 1].time
}
})
return arr4;
}
歌词处理完毕
引用歌词,并实现滚动
// 歌词处于上一句结束且当前为结束时,返回true
getStateFn(nowTime, preTime) {
return this.currentTime * 1000 < nowTime && this.currentTime * 1000 > preTime;
},
仅当歌词处于上一句结束且当前为结束时,给active
属性
<p
:class="{ active: getStateFn(item.time, item.pre) }"
v-for="(item, index) in $store.getters.listLyric"
:key="index"
>{{ item.content }}</p>
当dom
属性为active
,给高亮展示
p.active {
color: #ff0000;
}
效果图
更多推荐
已为社区贡献2条内容
所有评论(0)