在開發音樂網站或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();
}else if(window.ActiveXObject){
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
var mname=encodeURI(encodeURI(cname));//編碼中文歌詞名
var url="loadLyric.jsp?name="+mname+"&time="+getTime(ctime)+"&type=1";
xmlHttp.open("post", url, true);
xmlHttp.onreadystatechange=function() {
//異步獲取的歌詞加載到歌詞顯示區域
document.getElementById("lyric").innerHTML=xmlHttp.responseText;
}
xmlHttp.send();
接着，再用以下方法，每秒執行一次該函數，異步獲取一次歌詞
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程序，即可實現每秒獲取一次歌詞並顯示至頁面指定位置
要獲取所有的歌詞並顯示就相對比較簡單了，只需在上述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("暫無歌詞");
}
}
