我想用JS做一个卡拉OK歌词逐字着色的效果,请大家给方法和意见!

mokson 2011-04-02 09:18:28
是逐字着色,不是百度那个整行着色,
这只是第一步的思路:
用js和DOM按指定的时间递加文字到<DIV>,将<DIV>的样式用filter:grow()效果,
不知能否实现,请大家多多献言。多谢。
...全文
700 6 打赏 收藏 转发到动态 举报
写回复
用AI写文章
6 条回复
切换为时间正序
请发表友善的回复…
发表回复
  • 打赏
  • 举报
回复
[Quote=引用 4 楼 mokson 的回复:]
我也是这样想的,计算每个字的时间难度太高。
我只能是在第行歌词里采用平均计算时间的方法了。
这样容易些,不过精度不是很高。
[/Quote]
平均计算时间,是以前的方式。但这样不精确的显示,还不如整行显示。要做就做好,否则不如不做。
  • 打赏
  • 举报
回复
以前讨论过同样问题。酷我音乐盒已经做到这一点了,它有一个专属的歌词文件格式,你分析一下这个格式,加以利用就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
  • 打赏
  • 举报
回复
你要在每个歌词(以字为单位)加上时间属性,时间还要根据这个字的音频长短来决定,很麻烦...
本来在项目,看到酷我音乐盒的歌词显示挺有趣的,模仿一个不完整的。 (只有滚动显示,没有节奏显示)。 原理: (1)定义一个派生自CStatic类的CKaraokeLyricCtrl类(歌词控件),自绘制风格 ; (2)准备一个背景位图(保存在CKaraokeLyricCtrl::m_dcBK中); (3)设置两个计数器(ID分别为1和2),启动自绘制,1用来显示节奏(未实现,只 有框架),2用来滚动歌词; (4)自绘制函数中,将绘制的滚动歌词和背景位图混合,然后输出到屏幕上。滚动 歌词的绘制使用GDI+的Graphics::DrawString函数,歌词文本的大小、位置、字体和 透明度均自动计算和变化,模仿酷我音乐盒的形式。 以上功能均封闭实现在CKaraokeLyricCtrl类中。该类可以直接使用(见下边的使用步骤)。 使用步骤: (1)CKaraokeLyric::InitInstance中启动GDI+; (2)在CKaraokeLyricView::OnInitialUpdate中,创建歌词控件 (CKaraokeLyricCtrl类),其大小和CKaraokeLyricView视图相同,即覆盖了后者; (3)在菜单项响应中,使用CKaraokeLyricCtrl::ReadLyric读取歌词文件,再使用 CKaraokeLyricCtrl::Start即可启动歌词的滚动显示 未实现部分:(歌词的节拍显示) 虽然没有实现,但思路大致是:在后台先用另外一种颜色绘制当前突出显示的歌词(即字体最大的一行歌词),根据歌曲节奏,将还未唱出部分全部涂黑,然后和屏幕上的当前行突出歌词进行混合。

87,992

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧