社区
JavaScript
帖子详情
我想用JS做一个卡拉OK歌词逐字着色的效果,请大家给方法和意见!
mokson
2011-04-02 09:18:28
是逐字着色,不是百度那个整行着色,
这只是第一步的思路:
用js和DOM按指定的时间递加文字到<DIV>,将<DIV>的样式用filter:grow()效果,
不知能否实现,请大家多多献言。多谢。
...全文
700
6
打赏
收藏
我想用JS做一个卡拉OK歌词逐字着色的效果,请大家给方法和意见!
是逐字着色,不是百度那个整行着色, 这只是第一步的思路: 用js和DOM按指定的时间递加文字到,将的样式用filter:grow()效果, 不知能否实现,请大家多多献言。多谢。
复制链接
扫一扫
分享
转发到动态
举报
写回复
配置赞助广告
用AI写文章
6 条
回复
切换为时间正序
请发表友善的回复…
发表回复
打赏红包
碧海情天-赵亮
2011-04-03
打赏
举报
回复
[Quote=引用 4 楼 mokson 的回复:]
我也是这样想的,计算每个字的时间难度太高。
我只能是在第行歌词里采用平均计算时间的方法了。
这样容易些,不过精度不是很高。
[/Quote]
平均计算时间,是以前的方式。但这样不精确的显示,还不如整行显示。要做就做好,否则不如不做。
碧海情天-赵亮
2011-04-03
打赏
举报
回复
以前讨论过同样问题。酷我音乐盒已经做到这一点了,它有一个专属的歌词文件格式,你分析一下这个格式,加以利用就OK了,不用自己编辑了。
mokson
2011-04-03
打赏
举报
回复
我也是这样想的,计算每个字的时间难度太高。
我只能是在第行歌词里采用
平均计算时间
的方法了。
这样容易些,不过精度不是很高。
汉尼拔
2011-04-02
打赏
举报
回复
我本想也做一个,后来发觉太难了,这个主要问题在于那个歌词文件要花太大太大的力气.
如果一个字唱了0.5秒,或者唱了0.6秒,或者唱了0.55秒,区分的话 太难了.
如果有一个软件能够生成这份歌词文件就好了.
在js方面没有一点难度的
汉尼拔
2011-04-02
打赏
举报
回复
[Quote=引用 1 楼 juzi2979 的回复:]
你要在每个歌词(以字为单位)加上时间属性,时间还要根据这个字的音频长短来决定,很麻烦...
[/Quote]
楼上正解.
相当于每一个字就是一行
菊子
2011-04-02
打赏
举报
回复
你要在每个歌词(以字为单位)加上时间属性,时间还要根据这个字的音频长短来决定,很麻烦...
ios-仿酷狗
歌词
逐字
播放
效果
.zip
歌词
逐字
播放
C#
卡拉
OK
歌词
显示
C#
卡拉
OK
歌词
显示.
歌词
文本渐渐
着色
。
android播放器
卡拉
ok
歌词
显示
android音乐播放器 带
歌词
显示
卡拉
ok
模式
仿
卡拉
OK
歌词
滚动
效果
的
js
类 v1.0.rar
让文本仿
歌词
效果
的
js
类自己写的
一个
js
类,实现文本仿
歌词
效果
。 调用形式 var song1 = new song("a1", 200, "yellow,green,blue,Purple,Cyan"); song1.start(); 共有三个参数: 第
一个
文本父标签的ID 第二个是速度 第三个是文本的颜色,可以多填,逗号隔开,若填多个,随机显示
卡拉
OK
歌词
的滚动显示(模仿酷我音乐盒)
本来在
做
项目,看到酷我音乐盒的
歌词
显示挺有趣的,模仿
做
了
一个
不完整的。 (只有滚动显示,没有节奏显示)。 原理: (1)定义
一个
派生自CStatic类的CKara
ok
eLyricCtrl类(
歌词
控件),自绘制风格 ; (2)准备
一个
背景位图(保存在CKara
ok
eLyricCtrl::m_dcBK中); (3)设置两个计数器(ID分别为1和2),启动自绘制,1用来显示节奏(未实现,只 有框架),2用来滚动
歌词
; (4)自绘制函数中,将绘制的滚动
歌词
和背景位图混合,然后输出到屏幕上。滚动
歌词
的绘制使用GDI+的Graphics::DrawString函数,
歌词
文本的大小、位置、字体和 透明度均自动计算和变化,模仿酷我音乐盒的形式。 以上功能均封闭实现在CKara
ok
eLyricCtrl类中。该类可以直接使用(见下边的使用步骤)。 使用步骤: (1)CKara
ok
eLyric::InitInstance中启动GDI+; (2)在CKara
ok
eLyricView::OnInitialUpdate中,创建
歌词
控件 (CKara
ok
eLyricCtrl类),其大小和CKara
ok
eLyricView视图相同,即覆盖了后者; (3)在菜单项响应中,使用CKara
ok
eLyricCtrl::ReadLyric读取
歌词
文件,再使用 CKara
ok
eLyricCtrl::Start即可启动
歌词
的滚动显示 未实现部分:(
歌词
的节拍显示) 虽然没有实现,但思路大致是:在后台先用另外一种颜色绘制当前突出显示的
歌词
(即字体最大的一行
歌词
),根据歌曲节奏,将还未唱出部分全部涂黑,然后和屏幕上的当前行突出
歌词
进行混合。
JavaScript
87,992
社区成员
224,688
社区内容
发帖
与我相关
我的任务
JavaScript
Web 开发 JavaScript
复制链接
扫一扫
分享
社区描述
Web 开发 JavaScript
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章