如何实现歌词在页面上使用滚动效果

最新推荐文章于 2023-05-13 13:26:23 发布
最新推荐文章于 2023-05-13 13:26:23 发布
阅读量1.6k 收藏 9
点赞数
分类专栏： vue 文章标签： 前端 html vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_68586224/article/details/125881486
版权

首先我们可以看到大多数从后端请求的数据都是这样的

 这个时候我们需要用正则以及各种循环把歌词进行重新整理为对象数据

 随后就进行页面渲染，然后我们监听歌曲播放的时间，使用添加class的方式对歌词进行高亮操作

 最后我们需要最后一步实现歌词滚动即可，我们先声明一个函数对函数内部的做改变高亮歌词的top值即可

在上面调用函数传过来当前的时间和当前播放到的索引值 

最后我们看一下效果

这样就实现了歌词滚动 

Travis______
关注
  • 0
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
歌词随歌曲同步滚动源码.zip
07-10
歌词随歌曲同步滚动源码实现了歌词与歌曲播放同步，歌词可以无缝滚动并且支持手指上下滑动改变歌曲播放进度。看了一下源码，歌词是直接写在源码里的，本源码只是演示性，二次开发需要自己做一些调整,源码有比较丰富的注释。  
大师课1-2节资料.zip
04-10
大师课1-2节资料.zip
PhotoshopCC 2019 大师课
03-23
第一章：概述 第二章：基础知识 第三章：图层 第四章：绘制 第五章：变换 第六章：选择 第七章：遮罩 第八章：智能对象 第九章：调整层 第十章：修图 第十一章：Bridge和Camera RAW 第十二章：文本 第十三章：保存和导出 第十四章：工作流程 第十五章：总结 第十六章：2019CC版本新功能
移动端音乐WebApp
努力努力再努力
06-03 3519
版本： Node – v10.15.0 Vue – 2.5.2 目录 所有目录src: ├─api ->放置和后端请求相关的代码，包括ajax等 ├─base │ ├─confirm ->删除时候的提示框，是否真正删除 │ ├─listview ->歌...
JavaScript解析lrc歌词并匹配时间显示在页面只显示代码
weixin_42605397的博客
12-22 406
好的，下面是 JavaScript 解析 lrc 歌词并匹配时间显示在页面的代码： 首先，你需要获取歌词文件并将其转换为 JavaScript 可以处理的格式。这里假设你已经将歌词文件读取到了一个字符串中，并且该字符串被存储在变量 lrc 中。 // 按行分割歌词字符串 const lines = lrc.split('\n'); // 将每行歌词转换为对象，并存储在数组中 const lyri...
html页面制作滚动歌词
记录我的学习路线
02-18 8899
在我们制作页面音乐的时候，我们一般利用audio标签，看起来效果挺不错的，可是这样的界面不够美观不是吗？那么我想，如果添加歌词滚动效果，那么界面是不是很棒？当然，我们制作的页面不涉及服务器，不然就不够纯粹了，利用简单的JS和jquery就可以完成了！！分享一下。首先我们创建一个html文件，名字随便取，比如：index.html,这个简单，不用多说。不着急开始写代码，我们在创建一个css文件，不妨...
JS原生---歌词滚动效果案例
llllllllolllllll的博客
03-05 2014
font-size的改变就导致了元素几何信息的变化，几何信息的变化就意味着会导致reflow，会使页面重新布局，影响效率。 而transform 变形，并不是在渲染主线程中执行，不占用主线程，而是在合成线程中执行，最终的实现也是交给cpu，所以不会导致页面重新布局，不影响效率。
JS-歌词滚动效果
qq_53109172的博客
12-14 2083
本文案例为歌词滚动，随着音乐播放的进度同步滚动，本案例的源码在文章首部即可获取，html、css、js均为单独文件，案例的实现详解可根据需要可在本文后续内容查看
前端歌词滚动效果
m0_56698268的博客
01-31 1786
前端歌词滚动效果
vue实现歌词滚动
2303_76218115的博客
03-19 2015
最近看了一篇关于音频可视化的博文，然后偶然联想到歌词滚动这个效果，虽然网上介绍歌词滚动 的文章已经很多了，但是并不是每一个人实现的思路都是一致的，所以在这给大家分享一下我自己的一些想法，和具体是如何实现这个功能的。思路：获取歌曲所匹配的LRC歌词数据，获取音频实时播放时间，匹配LRC歌词所对应时间的文字，通过js控制为当前歌词文本添加动画，以及修改动画执行时间即可实现。
C++开发基于Qt的音乐播放器的设计与实现项目源码+项目使用说明(毕业设计).zip
10-07
- 实现歌词页面**模糊背景**，采用高斯模糊的方式模糊专辑图片 - 点击左上角下拉按钮回到主界面，并且有下拉**动画** 我喜欢的音乐界面 - 界面样式与搜索结果页面一致 - 可以添加歌曲到我喜欢的音乐 右键菜单 !...
react-music-player：React，TS的音乐播放插件，歌词同步功能，适配PC和移动端；一个带有React和Typescript的音乐播放器，可用于手机和PC
02-06
在移动设备上支持播放详细信息页面的弹出窗口。 播放控制 上一首，下一首 暂停 滚动或单击歌曲的进度条以实现音乐的快进和快退。 滚动歌词以定位播放位置，并实现快进和快退功能。 播放，删除播放列表中的音乐，...
Android项目源码带服务端显歌词乐乐音乐3.0.zip
07-10
(4) Ksc歌词【歌词平滑滚动、歌词放大缩小效果、歌词滑动快进、颜色设置、歌词字体大小设置】 (5) 桌面歌词【歌词锁定、歌词移动、歌词解锁、颜色设置、歌词字体大小设置】 (6) 锁屏歌词【歌词平滑滚动、歌词放大...
Android Studio实现的简易本地MusicPlayer
09-14
MusicPlayer小demo。包含本地音乐列表、根据专辑/艺术家/分类列表、自定义收藏列表、最近播放列表，播放页面可显示滚动歌词，仿网易云黑胶片效果
基于Qt和c++开发的多功能高颜值音乐播放器源码+项目详细说明.zip
最新发布
01-06
1.项目代码均经过功能验证ok，确保稳定可靠运行。欢迎下载体验！下载完使用问题请私信沟通。...- 实现歌词页面**模糊背景**，采用高斯模糊的方式模糊专辑图片 - 点击左上角下拉按钮回到主界面，并且有下拉**动画**
渡一大师课笔记（重点：事件循环、浏览器渲染原理）
qq_53461589的博客
05-13 7344
reflow 的本质就是重新计算 layout 树。当进行了会影响布局树的操作后，需要重新计算布局树，会引发 layout。为了避免连续的多次操作导致布局树反复计算，浏览器会合并这些操作，当 JS 代码全部完成后再进行统一计算。所以，改动属性造成的 reflow 是异步完成的。也同样因为如此，当 JS 获取布局属性时，就可能造成无法获取到最新的布局信息。浏览器在反复权衡下，最终决定获取属性立即 reflow。repaint 的本质就是重新根据分层信息计算了绘制指令。
登录失败,您与远程计算机连接。然而，初始用户程序启动时发生错误，所以正将您注销。
martian6125 's blog!
01-26 2442
前两天有个企业的朋友来询问一个远程服务器的问题。 问题描述：windows2008内网服务器，administrator用户可以远程访问，其他新建用户名远程不上，提示如下图： “登录失败,您与远程计算机连接。然而，初始用户程序启动时发生错误，所以正将您注销。请与您的系统管理员联系以取得协助。” 本来以为是开多用户的问题，开了多用户依然不行，然后各种策略检查，各种功能开启依旧提示这个错误，网上也有很...
渡一教育公开课web前端开发JavaScript精英课学习笔记（十七）jQuery、css3 实现3D轮播图
じоνё靁〃N维空间
02-16 733
jQuery、css3 实现3D轮播图 图片素材可在网上找 <!DOCTYPE html> <html> <head> <style> *{ margin:0; padding:0; font-size:0; } .wrapper{ position:relative;...
31_C语言实现.lrc歌词滚动播放_2_【采用双链表，if 判断开头、接近开头、接近尾部、尾部、中间】--其余文件copy文章-28号
HanLongXia的博客
08-07 465
图示 printf_link.c #include"file_link.h" void printf_link(LRC*phead, char **buf); void Free_link(LRC**phead); void xs(LRC *phead,int time_1); int main() { FILE*fp; fp = fopen("/mnt/hgfs/ios2021/01_file/test.lrc","r+"); LRC*phead = NULL;
c语言显示当前时间代码
02-22
现在的时间是：#include <stdio.h> int main() { time_t t; time(&t); printf("当前时间是：%s", ctime(&t)); return 0; }

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值