歌词滚动

此处展示为html的demo

思路

首先歌词单独为div
歌词整体滚动，设置wrap为div
歌词上移使用移动wrap位置，所以需要设置wrap，position为absolute。
歌词高亮使用当前歌词改变类名实现，添加过渡transition，使其有放大缩小的效果。

此处对歌词进行了处理。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.last,.now,.next{height: 40px;border-bottom:1px solid bisque;line-height: 40px;}.wrap{position: relative;}.lyrics{position: absolute;top: 40px;transition:  all .3s;}.lyricdiv{height: 40px;line-height: 40px;}.active-lyric{font-size: 33px;color: chartreuse;}</style>
</head><body><div class="wrap"><div class="last"></div><div class="now"></div><div class="next"></div><div class="lyrics"></div></div></body>
<script>var last=document.getElementsByClassName('last')[0];var now=document.getElementsByClassName('now')[0];var next=document.getElementsByClassName('next')[0];var lyricsdiv=document.getElementsByClassName('lyrics')[0];var duration = 3.44;var data = `lyric: "[00:00.00] ^_^↵ ↵[00:25.52]梅雨后的香樟叶↵[00:29.76]浅浅勾起了思念↵[00:34.23]泛黄的过往诗篇↵[00:36.49]似燕尾轻惹湖面↵[00:38.51]手中的茶慢慢浅去↵[00:40.50]细品一句爱过知味↵[00:44.66]路过小镇惹了谁↵[00:48.04]曲笛声↵[00:49.62]话凄美↵[00:51.71]茉莉花开曲径迂回↵[00:56.73]爱无悔↵[00:58.36]马蹄声声催 暌违↵[01:01.38]道不尽相思味↵[01:04.80]雨纷飞↵[01:06.35]梨花美↵[01:08.76]闲坐树下话予谁对↵[01:13.31]新叶垂↵[01:15.22]听纸吹皱了↵[01:18.61]错与对的是非↵[01:21.16]被微风裁碎↵[01:43.35]梅雨后的香樟叶↵[01:47.40]浅浅勾起了思念↵[01:51.90]泛黄的过往诗篇↵[01:54.06]似燕尾轻惹湖面↵[01:56.30]手中的茶慢慢浅去↵[01:58.40]细品一句爱过知味↵[02:02.26]路过小镇惹了谁↵[02:05.47]曲笛声↵[02:07.45]话凄美↵[02:09.58]茉莉花开曲径迂回↵[02:14.52]爱无悔↵[02:15.64]马蹄声声催 暌违↵[02:18.91]道不尽相思味↵[02:23.37]雨纷飞↵[02:24.63]梨花美↵[02:26.55]闲坐树下话予谁对↵[02:31.39]新叶垂↵[02:32.97]听纸吹皱了↵[02:35.59]错与对的是非↵[02:39.30]曲笛声↵[02:41.12]话凄美↵[02:43.16]茉莉花开曲径迂回↵[02:47.86]爱无悔↵[02:49.46]马蹄声声催 暌违↵[02:52.69]道不尽相思味↵[02:55.84]雨纷飞↵[02:57.97]梨花美↵[03:00.18]闲坐树下话予谁对↵[03:04.98]新叶垂↵[03:06.64]听纸吹皱了↵[03:09.45]错与对的是非↵[03:12.62]被微风裁碎↵[03:44.00]未经许可,不得翻唱或使用"`var lyric = data.slice(8, data.length - 1);var lyrics = lyric.split('↵');var start = lyrics.filter((item, index, arr) => {if (item.indexOf('[') == -1) {return index}})lyrics.splice(start + 1, 1);// 此处lyrics已经是过滤空行的歌词了lyrics.forEach((value, index) => {let key = value.split(']')[0] + ']';let lyvalue = value.split(']')[1];lyrics[index] = { time: key, lyric: lyvalue };let lyricdiv=document.createElement('div');lyricdiv.innerHTML=lyvalue;lyricdiv.className="lyricdiv";lyricsdiv.appendChild(lyricdiv);})// lyrics已经成为对象形式：{lyric: "梅雨后的香樟叶", time: "[00:25.52]"}var handletime=function(time){time=time.slice(1,time.length-1)let minute=time.split(':')[0];let second=time.split(':')[1];let millisecond=(Number(minute)*60+Number(second))*1000;// console.log(millisecond)return millisecond;}// console.log(lyrics)var timeline = 0;var nowindex = 0;let lyricdiv=document.getElementsByClassName('lyricdiv');// 歌词按照时间依次getsetInterval(function () {let lyrictime=handletime(lyrics[nowindex].time);if(lyrictime==timeline){lyricsdiv.style.top=-40*(nowindex-1)+'px';console.log(lyricdiv[nowindex].innerHTML)lyricdiv[nowindex].classList.add('active-lyric');if(nowindex!=0){lyricdiv[nowindex-1].classList.remove('active-lyric')}nowindex=nowindex+1;}timeline+=10;}, 10)
</script></html>

前端实战复习——歌词滚动相关推荐

17张思维导图，2021年作为一名前端开发者需要掌握这些，前端面试复习资料参考大纲
本文首发于17张思维导图,2021年作为一名前端开发者需要掌握这些,前端面试复习资料参考大纲,转载请联系作者前言 2020年最后一个月了,熬夜多天整理出17张思维导图,对前端面试复习知识点进行了最全 ...
40个web前端实战项目，练完即可就业，从入门到进阶，基础到框架，html_css【附视频+源码】
当下前端开发可以说是一个比较火的职业,所以学习的人比较多,不管是培训还是自学都是希望通过前端可以找到一份好的工作,但是很多自学的朋友在自学过程中有些盲目,不仅大大降低了学习的效率,而且也会打击自己的学 ...
原生js实现歌词滚动以及卡拉OK效果
干货转自网易实践者社区,感谢作者[严跃杰] [歌词滚动效果] 滚动歌词比较常见的一种歌词显示方式,今天我们来讨论如何通过原生js来完成一个简单的滚动歌词实现. 一般来说,滚动歌词有如下几项需求: 1. ...
歌词数据解析、歌词滚动、歌词进度控制功能的实现(基于js-base64、lyric-parser、better-scroll)，以vue项目为例...
歌词数据解析.歌词滚动.歌词进度控制功能的实现(基于js-base64.lyric-parser.better-scroll) 1.需求分析后台歌词接口返回的数据如下(base64字符串): W3R ...
SDCC 2015前端专场札记：Facebook、百度、腾讯、美团、饿了么等互联网公司的前端实战
SDCC 2015前端专场札记:Facebook.百度.腾讯.美团.饿了么等互联网公司的前端实战发表于2015-11-27 14:14| 682次阅读| 来源AdMaster| 1 条评论| 作者刘 ...
歌词数据解析、歌词滚动、歌词进度控制功能的实现(基于js-base64、lyric-parser、better-scroll)，以vue项目为例
歌词数据解析.歌词滚动.歌词进度控制功能的实现(基于js-base64.lyric-parser.better-scroll) 1.需求分析: 后台歌词接口返回的数据如下(base64字符串): W3 ...
前端实战：仿写小米官网第一天
前端实战的第一天小米官网目前效果: 实现功能: 导航栏,首页切换,无淡入淡出效果的轮播图,搜索功能,产品展示栏下滑代码(便于记录,将js.css和html糅合在了一起): <!DOCTYP ...
C#/音乐播放器/带进度条/歌词滚动、颜色变化/桌面应用程序设计
用基本C#知识实现制作一个音乐播放器前言写这个博客并不是说我的作品多么高级或完美,只是希望能在一些功能方面给你们一些启发,能帮助到你们做出真正好的程序,这就足够了话不多说,让我们开始吧~~~ 截 ...
VUE获取网易云音乐接口，并实现歌词滚动效果
VUE获取网易云音乐接口,并实现歌词滚动效果最近在捣腾个人博客,加了个播放音乐的模块,所以在这里记录一下歌曲播放歌词实时滚动效果的实现,顺便总结加深一下对各个知识点的理解. GitHub地址演示地 ...

前端实战复习——歌词滚动

歌词滚动

思路

前端实战复习——歌词滚动相关推荐

最新文章

热门文章