javascript-lyrics-show

这是一个简单的在网页中使用MediaPlayer(仅支持IE)播放音乐,并且同步显示歌词的小实验。

因为看到公司同事在做一个菜谱的widget,有个类似于同步显示歌词的功能,所以一时手痒痒,也想自己实现一个,今天花了一天的时间,差不多搞定了,现在只是显示当前这句的歌词,即卡拉OK效果。

现在看来能改进的地方是,加上全文歌词的预览和滚动的特效,当然在这个基础之上做不难,主要是细节的处理。

效果截图(点击下图可进入测试页面,有兴趣的自行查看网页源码,思路清楚了其实比较简单)

http://www.haojii.com/webdev/jslyrics/

实现思路:

1. 页面加载完成之后,ajax请求加载对应的歌词文件

2. 播放事件触发之后,开始定时播放歌词

3. 暂停事件触发之后,暂停播放歌词的定时器

技术细节:

1.歌词文件加载成自定义的类,这个在类在自定义的lyrics.js文件中,可被重用

2. MediaPlayer的PlayStateChange事件处理

MediaPlayer的相关参考:

http://www.w3schools.com/media/media_playerref.asp

http://num7.javaeye.com/blog/293579

http://www.csharps.cn/blog/post/39/

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

*

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>