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();
}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("暂无歌词");}
}

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/61942.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Android解析lrc里的歌词

解析记歌词的类。这是解析.lrc文件里的歌词。 解析歌词使用的是输入流&#xff0c;然后吧歌词和歌词时间放在JavaBean的列表里。具体代码如下&#xff1a; package com.zzm.android.Handler;import java.io.BufferedReader; import java.io.File; import java.io.FileInputStr…

iPhone上的lrc播放器可以在播放mp3文件时显示歌词

https://apps.apple.com/cn/app/%E6%96%B0lrc%E6%92%AD%E6%94%BE%E5%99%A82/id1535214306 长久以来&#xff0c;在iPhone上播放lrc字幕一直是一个大的问题。因为苹果自带的音乐播放器不支持lrc歌词字幕&#xff0c;而市面上也少有支持lrc歌词字幕的音乐播放器App。 现在&…

音乐歌词同步实现指南

有道友问了我这个问题&#xff0c;所以在这写了下思路首先&#xff0c;我默认你至少已经了解了h5的audio标签的相关属性&#xff0c;直入正题audio使用指南audio标签audio之HTML 事件属性 old歌词 一般的说&#xff0c;lyric文件由时间的tag标签组成&#xff0c;如截图所示 现在…

把乐谱换成c语言程序的软件,有没有什么软件可以把音乐换成简谱?

一、下载&#xff1a; 1。先把WAV或MP3转换成MIDI 下载地址&#xff1a; http://www.skycn.com/soft/10460.html 2。再把MIDI转成五线谱 下载地址&#xff1a; http://soft.pcnow.com.cn/soft/17237.shtml 二、安装&#xff1a; 1。安装MP3转MIDI工具&#xff0c;一直点下一步即…

安卓文字绘制和歌词器的简单实现

文章目录 安卓绘制文本的细节和歌词动画实战绘制简单文本绘制API绘制线设计多条线的原因 中心绘制x轴居中align居中宽度居中 正中心绘制 动画绘制原理过度绘制解决过度绘制 Demo点赞评论找我要哦 安卓绘制文本的细节和歌词动画实战 绘制文本有许多细节&#xff0c;这篇文章从绘…

歌词同步

歌词同步 前面的话歌词同步的需求歌词加载歌词显示歌曲播放时歌词的滚动计算歌词滚动范围如何同步歌词的滚动细节计算 鼠标拖拽时歌词的滚动自由滚动歌词 源码 前面的话 最近发现我们班同学做了一个很酷的Demo&#xff0c;这个Demo实现了一个很不错的歌词同步&#xff0c;着实…

终于等到你!Guitar Pro 8.1版本简谱功能首发

Guitar Pro是一款非常流行的音乐制谱软件它不仅适用于吉他谱还可以用于其他乐器的制谱。历经5年多时间研发Guitar Pro 在2022年正式发布了全新的8系列版本时隔不到1年Guitar Pro又给广大中国用户带来期盼已久的简谱功能下面让我带领大家一起体验吧 软件souurl.cn/BPln7d 图1 G…

人工智能火爆 国内这几家计算机视觉公司值得关注

&#xfeff;&#xfeff; 人工智能自降生以来就仿佛自带光环、备受瞩目。尤其是今年&#xff0c;国务院印发的《新一代人工智能发展规划》中提出&#xff0c;到2030年使中国人工智能理论、技术与应用总体达到世界领先水平&#xff0c;成为世界主要人工智能创新中心&#xff0c…

国内最值得关注的10家人工智能语音识别公司

在谈人工智能的时候&#xff0c;一定不能不谈语音识别&#xff0c;语音识别是人机交互的入口&#xff0c;是指机器/程序接收、解释声音&#xff0c;或理解和执行口头命令的能力。目前国内外都有公司在语音领域有所投入&#xff0c;其中包括才成立几年的初创企业&#xff0c;也包…

运气好到了一品

今天运气好&#xff0c;连续几把都赢了&#xff0c;一口气从布衣五品冲上了智贤一品&#xff0c;纪念一下。

到了智贤一品

朋友今天运气不错&#xff0c;今天连续打几把&#xff0c;都赢了&#xff0c;所以品级从智贤五品一路升级到了智贤一品&#xff0c;他很开心&#x1f601;。

之伏一品纪念

昨天运气不错&#xff0c;玩了几把&#xff0c;结果巴巴赢&#xff0c;从智贤一品升级到了之伏五品&#xff0c;之伏往升级的需要赢的次数就更多了&#xff0c;我感觉自己没啥希望了&#xff0c;有一个已经非常满足了。因为再过两个月会重新排名&#xff0c;重新从零开始升级。…

每周一品 · 永磁联轴器 Magnetic Couplings

永磁联轴器&#xff08;Magnetic Couplings&#xff09;是通过永磁体的磁力将原动机与工作机联接起来的一种新型联轴器&#xff0c;它无需直接的机械联接&#xff0c;而是利用永磁体之间磁耦合&#xff0c;利用磁场可穿透一定的空间距离和物质材料的特性&#xff0c;进行机械能…

生活随记-斗地主直线一品

今天运气很好&#xff0c;进阶到了直线一品&#xff0c;记录下这个历史时刻吧

java毕业设计闲一品交易平台(附源码、数据库)

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat8.5 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; Springboot mybatis Maven Vue 等等组成&#xff0c;B/…

springboot闲一品交易平台系统(文档+源码)

大家好&#xff0c;我是火旺技术&#xff0c;一个混迹在java圈的码农,今天要和大家聊的 是一款基于springboot的闲一品交易平台系统网站,项目源码请联系火旺&#xff0c;目前有各类成品 毕设 javaweb ssh ssm springboot等等项目框架&#xff0c;源码丰富&#xff0c;欢迎咨询。…

每周一品 · 海尔贝克阵列 Halbach Array

海尔贝克阵列&#xff08;Halbach Array、Halbach permanent magnet&#xff09;是一种磁体结构&#xff0c;1979年美国学者Klaus Halbach在做电子加速实验时发现了这种特殊的永磁体结构并逐步完善&#xff0c;最终形成了“Halbach”磁体&#xff0c;它是工程上近似理想的结构&…

Spring系列一品境之指玄境

Spring系列复习&#xff08;二&#xff09; 相关导航 Spring系列一品境之金刚境 Spring指玄境导航 Spring系列复习&#xff08;二&#xff09;前言一、总思维导图二、Mybatis1、起因2、框架3、开发3.1 原始DAO方法3.2 Mapper代理方法3.3 输入输出映射3.4 动态SQL3.5 SpringBoot…

有道云笔记·协作android版,【每天一品】有道云笔记协作

有道协作是有道云笔记刚出的一个产品&#xff0c;作为内测用户&#xff0c;我为什么会使用它当做我团队协作的一个工具&#xff1f;在知乎上有一个问题叫做新人如何去学习产品思维&#xff0c;有位资深产品经理聊到&#xff0c;新人不要去研究已经完美的产品&#xff0c;去研究…