audio实现歌词同步

网上已经可以找到和歌词同步的不少方法，但是刚刚接触H5的小白，也想写上一些自己歌词同步时一些想法。我由于只考虑前端，所以就没有涉及服务器的问题了，浏览器本身请求本地文件比较严格，会出现如下错误

所以你就需要修改浏览器的相关配置，这里奉上链接
http://www.w3dev.cn/article/20141031/file-protocol-config-chrome-support-ajax-request.aspx
首先呢，我先附上自己做的网站，因为自己比较喜欢看霹雳布袋戏，所以我就用霹雳布袋戏的歌曲测试啦（哈哈，扯远啦），附上图

好的，看完了效果图，哈，知道自己做的水水的，不喜勿喷。
那么首先我们就是要先使用标签

<audio id="musicAudio" controls="controls" style="width:800px;" class="audioCss">你的浏览器不兼容.</audio>

好的，使用了标签，那么现在我们就要开始导入歌单啦。
因为我想多复习下ajax，所以处理ajax的数据就比较多啦
首先是自动生成歌单，歌单文件名是music.xml内容如下

然后使用ajax处理数据，并且在网页上面生成歌单，同时给每个li加上点击事件，代码如下

$.ajax({type:"GET",url:"order/music.xml",success: function(order){var li = "";$(order).find("music").each(function(){var title = $(this).find("title").text();var id    = $(this).find("author").text();li=li+"<li id='"+id+"' title='"+title+"' key='no' onclick='ajaxMusic(this)'>"+title+"</li>";});$("#musicOl").append(li);$("#musicOl li").each(function(){$(this).mousemove(function(e){if($(this).attr("key")!='yes')$(this).css("color","black");});$(this).mouseout(function(e){if($(this).attr("key")!='yes')$(this).css("color","white");});});}});

值得一提的是mousemove和mouseout是我为了添加特效，所以才加上去的，不需要可以不用，还有就是我请求的文件是本地文件，编辑工具是sublime Text3。
然后就是获得歌词，这里的歌词文件是xx.lrc，而且要按照歌词文件的一般格式，如

然后我用的是javascript的ajax，代码如下

function ajaxMusic(obj){$("li[id][key$='yes']").css("color","white").attr("key","no");$("#"+obj.id).attr("key","yes").css("color","red");var audio = document.getElementById("musicAudio");audio.pause();var xmlhttp;if(window.XMLHttpRequest){xmlhttp = new XMLHttpRequest();}else{xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");}xmlhttp.onreadystatechange=function(){if(xmlhttp.readyState==4 && xmlhttp.status==0){audio.src = "music/"+obj.title+".mp3";audio.play();if(xmlhttp.responseText==''){document.getElementById("musicText").innerHTML = "<p style='top:300px';font-size:'150%'>没有找到歌词</p><br/>"; musicT.splice(0,musicT.length-1); }else{xmltext = xmlhttp.responseText;musicT = parseLyric(xmlhttp.responseText);parseStart(musicT);musicLrc(musicT);}}}xmlhttp.open("GET","lrc/"+obj.id+".lrc",true);xmlhttp.send();}

好的，我来解释一下其中
("li[id][key("li[id][key=’yes’]”).css(“color”,”white”).attr(“key”,”no”);
$(“#”+obj.id).attr(“key”,”yes”).css(“color”,”red”);
也是为了标注选择的歌曲目标特效罢了，可以不加。
对了，再说明一下，当javascript请求本地文件的时候，如果成功，xmlhttp.status = =0，
还有尽管你没有找到该文件名，浏览器会这样的错误

不过这没有关系啦，对于前端你无法知道服务器的东西，可是值得一提的是，由于没有找到文件，所以xmlhttp.responseText得到的值是”(空格)”,即xmlhttp.responseText==“（空格）”然后我们就可以根据空格来判断是否有歌词。
好的，然后你得到了歌词，那么你就必须对他进行处理，由于我是小白，所以想到的就是存储在二维数组上，代码和方法名如下：

function parseLyric(txt){var lines = txt.split("\n");var resy = new Array();var j = lines.length-1;for(var i=0;i<lines.length;i++){resy[i] = new Array();var line = lines[j].split("]");var Tm   = line[0].substring(1,line[0].length).split(":");resy[i][0] = parseInt(Tm[0],10)*60+parseFloat(Tm[1]);resy[i][1] = line[1];j--;}return resy;}

好的，当然啦，歌曲在没有播放前，总是要有一些歌词先显示出来，所以这里我就先截取前七行歌词，代码如下

function parseStart(resy){var res = "";var left=200,top=300;var i = resy.length-1;for(var j=0;j<7;j++){res = res +"<p style='top:"+top+"px' key='"+i+"'>"+resy[i][1]+"</p><br/>";top=top+40;i--;}document.getElementById("musicText").innerHTML=res;return res;}

其中top指的是离包含DIV的高度，之后就是重头戏,，你得到了处理后歌词数组，然后你就要与播放的歌曲同步，同步的方法就是根据歌次文件前面的时间与播放的当前时间做对比，代码如下

function musicLrc(result){var audioEvent = document.getElementById("musicAudio");var resText=document.getElementById("musicText");var j =result.length-1,n = result.length-1;var top = 300,isback = false;var backtop = 300;audioEvent.ontimeupdate =function(e){if(result.length!=0){console.log("result="+result[j][0]);if(this.currentTime>result[j][0]){currenttime=this.currentTime;var ltop = $("#musicText p").last().css("top").split("px");var Ntop = parseInt(ltop[0])+40;if(j>=7&&j-7>=0){$("#musicText").append("<p style='top:"+Ntop+"px' key='"+(j-7)+"'>"+result[j-7][1]+"</p><br/>");}$("#musicText p").each(function(){var lineTop=$(this).css("top").split("px");$(this).css("top",(lineTop[0]-40)+"px");$(this).css("color","black").css("font-size","200%");if($(this).attr("key")==j){$(this).css("color","red").css("font-size","300%");}});j=j-1;}else {if(this.currentTime<currenttime){if(this.currentTime>1){j++;$("#musicText p").each(function(){var lineTop=$(this).css("top").split("px");$(this).css("top",(parseInt(lineTop[0])+40)+"px");$(this).css("color","black").css("font-size","200%");if($(this).attr("key")==j){$(this).css("color","red").css("font-size","300%");}});}}}}};return ;}

只需要和歌词进行对比，判断是否大于和小于，这样就可以实现快进和快退啦，还有值得一提的是我使用了currenttime这个全局变量来记录当前播发的时间，这样可以判断你是否是快退，快进还是切歌。怎么样是不是很简单呢？

audio实现歌词同步相关推荐

论HTML5 Audio 标签歌词同步的实现
HTML5草案里面其实有原生的字幕标签(<track> Tag)的,但使用的是vtt格式的文件,非常规的字幕(.sub, .srt)或歌词文件(.lrc). 用法如下(代码来自W3Scho ...
html5 audio实现歌词同步
audio标签用于播放音频文件,很不幸,歌词文件并没有相应接口 addTextTrack() 向音频添加新的文本轨道.//各大浏览器都没有支持有两种方法可以实现歌词同步: 1. 使用setInter ...
php中文歌词,详细介绍HTML5使用Audio标签实现歌词同步的效果
HTML5的最强大之处莫过于对媒体文件的处理,如利用一个简单的vedio标签就可以实现视频播放.类似地,在HTML5中也有对应的处理音频文件的标签,那就是audio标签.通过本文给大家介绍HTML5使 ...
HTML5使用Audio标签实现歌词同步的效果
HTML5的最强大之处莫过于对媒体文件的处理,如利用一个简单的vedio标签就可以实现视频播放.类似地,在HTML5中也有对应的处理音频文件的标签,那就是audio标签 HTML5出来这么久了,但是 ...
javascript，H5,jQuery，css“实现音乐歌词解析，歌词同步滚动，进度条拖拽、进度条同步，音量控制，歌词同步高亮的功能齐全的简易音乐播放器
用js和HTML实现一个带歌词同步,以及进度条拖拽,音量控制的简单音乐播放器. 这个音乐播放器,可以实现歌词的滚动,进度条拖拽,音乐播放进度,音量控制等功能.,资源全为网上资源,直接复制代码,便能看到 ...
html简单歌词同步教程,HTML5实现歌词同步(示例代码)
开篇 HTML5的最强大之处莫过于对媒体文件的处理,如利用一个简单的vedio标签就能够实现视频播放.相似地,在HTML5中也有相应的处理音频文件的标签,那就是audio标签 audio标签实现一个 ...
歌词同步滚动，比市面的大多数效果都好，在平滑滚动的前提下加上了鼠标滚轮滚动以及上下拖拽功能
歌词滚动核心原理解析歌词文件,转换成JSON 对象,java 代码放在最下面将歌词时间部分存到数组,字符部分放到 HTML 标签里面,通过Jquery 选中所有歌词 $li ,拿到一个类似于数组的 ...
android 歌词同步换行,HTML5音乐播放器同步显示歌词
歌词文件的格式实现之前,当然得了解一下歌词文件的格式了.常规歌词文件的格式基本是一句一行,每行由两部分组成,前面是中括号括起来的时间轴,后面紧跟歌词,像下面这样:[ti:记兰生襄铃] [ar:HIT ...
html5音乐和歌词同步,HTML5实现歌词同步
开篇 HTML5的最强大之处莫过于对媒体文件的处理,如利用一个简单的vedio标签就可以实现视频播放.类似地,在HTML5中也有对应的处理音频文件的标签,那就是audio标签. audio标签实现一 ...

audio实现歌词同步

audio实现歌词同步相关推荐

最新文章

热门文章