这是一个简单的在网页中使用MediaPlayer(仅支持IE)播放音乐,并且同步显示歌词的小实验。
因为看到公司同事在做一个菜谱的widget,有个类似于同步显示歌词的功能,所以一时手痒痒,也想自己实现一个,今天花了一天的时间,差不多搞定了,现在只是显示当前这句的歌词,即卡拉OK效果。
现在看来能改进的地方是,加上全文歌词的预览和滚动的特效,当然在这个基础之上做不难,主要是细节的处理。
效果截图(点击下图可进入测试页面,有兴趣的自行查看网页源码,思路清楚了其实比较简单)
实现思路:
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/
