JavaWeb音乐网站开发:Ajax异步获取歌词文件并显示,以及实现音频与歌词对应同步的方法

        在开发音乐网站或APP的时候,都必须要面对这一个问题:如何让正在播放的歌曲的歌词与音频对应?也就是歌曲正在唱哪一句对应显示这一句的歌词?这便是今天这篇博客主要谈论的主题,先抛开爬虫爬取这一说,今天讲的这个方法需要把歌词录入TXT文件中,然后用Java的各种技术来实现歌词与歌曲对应的效果。直接显示所有歌词就比较简单了,直接用IO流得到歌词并输出至网页即可;稍微复杂的就是只在播放那一句歌时显示那一句对应的歌词

        我的设计思路是这样的,首先在歌词文本文件中将歌词出现的时刻录入文件(当然如果能找到带有时间点的歌词更好不用再录了),然后在项目中新建一个jsp,这个jsp负责根据时刻查找到文件中的对应时刻的歌词,同时将这句歌词存入cookie中以便下一句歌词出来之前照常显示,然后在js中通过ajax异步获取并显示,这个js函数每秒执行一次,如果文件中没有该秒,就取出cookie中的歌词并显示,这样保证每一秒都会有歌词显示。。。

        感觉叙述的有些啰嗦,可能还没说清楚,下面就用代码来详细实现吧。

        首先在页面中定义一个歌词显示的地方,并为其设置一个id

<span id="lyric"></span>

然后在js的monitor函数中添加ajax部分,其中url中传入要获取歌词的歌曲名及当前时刻以及获取类型(包括获取全部歌词和获取当前播放的一句歌词)

var xmlHttp=false;
if(window.XMLHttpRequest){
	xmlHttp=new XMLHttpRequest();
}el
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值