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

亦凉 2022-04-17 04:54 262阅读 0赞

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

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

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

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

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

接着，再用以下方法，每秒执行一次该函数，异步获取一次歌词

window.setInterval("monitor()", 1000);

最后，编写ajax异步获取的歌词的jsp，这个也是实时获取歌词的关键

String name=request.getParameter("name");
    name=URLDecoder.decode(name,"utf-8");
    String time=request.getParameter("time");
    String type=request.getParameter("type");
    if(type.equals("1")){//monitor函数中调用，当前播放歌词
    try{
    	File file=new File("E:/AAAA/lyric/Time_"+name+".txt");
    	if(!file.exists()){//说明是在云服务器上
    	  file=new File("/home/ubuntu/tomcat/webapps/Minimusic/lyric/Time_"+name+".txt");
    	}
    	byte[] s=new byte[2048];
    	FileInputStream fis=new FileInputStream(file);
    	int m=fis.read(s);
    	String ly=new String(s,"utf-8");//所有歌词
    	String l="";//最终为当前播放歌词
    	if(ly.contains(time)){
    		//把文件中与当前时间匹配的时间点前面的歌词截取出来
    		l=ly.substring(0,ly.indexOf(time)+5);
    		String ls[]=l.split("《");
    		l=ls[ls.length-2];//当前播放的歌词
    		if(l.contains(":")){
    			l=l.substring(l.indexOf(":")+3);
    		}
    		//将这句词存入cookie以供下一句歌词出现之前显示
    		Cookie cookie=new Cookie("lyric",URLEncoder.encode(l,"utf-8"));
    		cookie.setMaxAge(1*60);
    		response.addCookie(cookie);
    	}else{//如果歌词文件没有该时间点，则显示利用cookie记住的歌词
    		Cookie[] cs=request.getCookies();
    		for(int i=0;i<cs.length;i++){
    			if(cs[i].getName().toString().equals("lyric")){
    				l=cs[i].getValue().toString();
    				l=URLDecoder.decode(l,"utf-8");
    			}
    		}
    	}
    	out.write(l);
    }catch(Exception e){
    	out.write("暂无歌词");
    }
    }

以下是我存储的歌词文本的样式，结合上方的Java程序，即可实现每秒获取一次歌词并显示至页面指定位置

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NzUwNTQ3_size_16_color_FFFFFF_t_70][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NzUwNTQ3_size_16_color_FFFFFF_t_70 1][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NzUwNTQ3_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NzUwNTQ3_size_16_color_FFFFFF_t_70 3][]

要获取所有的歌词并显示就相对比较简单了，只需在上述jsp中添加如下代码

else{//type=2，play函数中调用，所有歌词
    	try{
    		File file=new File("E:/AAAA/lyric/"+name+".txt");
    		if(!file.exists()){
    		file=new File("/home/ubuntu/tomcat/webapps/Minimusic/lyric/"+name+".txt");
    		}
    		//FileReader fr=new FileReader(file);
    		//char s[]=new char[2048];
    		byte[] s=new byte[2048];
    		FileInputStream fis=new FileInputStream(file);
    		int m=fis.read(s);
    		String ly=new String(s,"utf-8");//所有歌词
    		out.println("<font size='-1' color='white'>"+ly+"</font>");
    	}catch(Exception e){
    		out.write("暂无歌词");
    	}
    }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NzUwNTQ3_size_16_color_FFFFFF_t_70 4][]

今天的博客就写到这里了，如果有什么疑问，可以在评论区里交流。附[哆啦网][Link 1]和[553音乐][553]，欢迎访问

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NzUwNTQ3_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2018111314371440.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NzUwNTQ3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NzUwNTQ3_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20181113143758844.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NzUwNTQ3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NzUwNTQ3_size_16_color_FFFFFF_t_70 2]: /images/20220417/c83d5b1cdae34f148eb95d2d00851b2c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NzUwNTQ3_size_16_color_FFFFFF_t_70 3]: /images/20220417/65e3e54862bd493da19a8cd474c005bc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NzUwNTQ3_size_16_color_FFFFFF_t_70 4]: /images/20220417/ed6b59c355d44019a7fd9fe679c53458.png
[Link 1]: http://www.duola.vip/
[553]: http://m.duola.vip/amaze/songsList.jsp