html5 audio实现歌词同步

audio标签用于播放音频文件，很不幸，歌词文件并没有相应接口
addTextTrack() 向音频添加新的文本轨道。//各大浏览器都没有支持
有两种方法可以实现歌词同步：
1. 使用setInterval();
2. 监听timeupdate
两种方法，个人觉得都不是很完美，暂时找不到更好的方法

function media(dom,src){this.dom = dom;this.src = src;this.audio = this.dom.getElementsByTagName('audio')[0];this.control = $(this.dom).find(".control")[0];this.lyrbox = $(this.dom).find(".lyrics")[0];this.timer = this.dom.getElementsByTagName('span')[0];this.timepoint = $(this.dom).find(".time-point")[0];this.timebardiv = $(this.dom).find('.time-bar div')[0];this.formatlyr = [];this.intval = null;this.init();formattime = function(t){var min = parseInt(t/60);var ss = parseInt(t)%60 ;ss = ss>9?ss:"0"+ss;return min+":"+ss;}
}
media.prototype.init = function() {var self = this;self.dom.style["background"] = "url("+self.src.img+") no-repeat";self.dom.style["background-size"] = "100% 100%";self.audio.src = self.src.mp3;self.audio.autoplay = true;self.lyr();self.audio.addEventListener("canplay",function(){self.timer.innerHTML = formattime(0)+ "/"+ formattime(self.audio.duration) ;self.control.style.display="block";// self.control.style["transition"]="all 4s;"// self.audio.autoplay = true;self.audio.play();if(self.intval) self.intval = null;self.intval = setInterval(function(){var len = self.formatlyr.length;var _c = self.audio.currentTime;var p =$(self.lyrbox).find('p')for(var i=0;i<p.length;i++){if(p[i].style['color'] != ''){p[i].style['color'] = '';break;}}for(var i=0;i<len;i++){var _t = i?self.formatlyr[i-1][0]:0;var _t1 =i<len-1? self.formatlyr[i+1][0] :9999;if(_c >= _t && _c < _t1){self.lyrbox.getElementsByTagName('p')[i].style['color'] = "#1D94E1";$(self.lyrbox).css("transform","translateY(-"+(i?i-1:0)*32+"px)").css("transition-duration","0.5s");break;}}var a=_c/self.audio.duration * (self.timebardiv.clientWidth - self.timepoint.clientWidth) ;$(self.timepoint).css("transform","translateX("+parseInt(a) +"px)");self.timer.innerHTML = formattime(self.audio.currentTime)+ "/"+ formattime(self.audio.duration) ;},1000) ;});self.ctrltime();self.togglepause();self.audio.canplay = function(){alert('canplay');}};media.prototype.togglepause = function() {var self = this;$(".ctrl-pause ").on('click',function(){$this = $(this).find('a');if($this.hasClass("play")){$this.addClass("pause");$this.removeClass("play");self.audio.pause();}else if($this.hasClass("pause")){$this.removeClass("pause");$this.addClass("play");self.audio.play();}else{}});
};media.prototype.lyr = function() {var self = this;function parselyr(d){var lines = d.split("\n"),pattern=/\[\d{2}:\d{2}.\d{2}\]/g,_l=[];var fg = document.createDocumentFragment();lines.forEach(function(i){if(i.match(pattern)){_l.push(i);}});_l.forEach(function(i,index){var s1 = i.split(']'),s2 = s1[0].slice(1),s3 = s2.split(':');var second  = parseInt(s3[0])*60 + parseFloat(s3[1]);var p = document.createElement('p');p.innerHTML = s1[1];fg.appendChild(p);self.formatlyr.push([second,s1[1]]);});self.lyrbox.appendChild(fg);}$.get(this.src.lyrics,function(data){parselyr(data);});
};media.prototype.ctrltime = function() {// body...var self =this;self.timebardiv.addEventListener('click',function(e){var dx = e.pageX - this.offsetLeft;var ct= parseInt(self.audio.duration*dx/this.clientWidth);self.audio.currentTime = ct;},false);};$(document).ready(function(){var m = new media(document.getElementById('playerbox'),sources[0]);
});

只在firefox chorme&& android测试
注意理解canplay事件，这个事件可能会多次触发。例如当你设置currentTime的时候，
也会触发canplay事件，这个不好解释：（
第二种方法也差不多。

html5 audio实现歌词同步相关推荐

论HTML5 Audio 标签歌词同步的实现
HTML5草案里面其实有原生的字幕标签(<track> Tag)的,但使用的是vtt格式的文件,非常规的字幕(.sub, .srt)或歌词文件(.lrc). 用法如下(代码来自W3Scho ...
html5音乐和歌词同步,HTML5实现歌词同步
开篇 HTML5的最强大之处莫过于对媒体文件的处理,如利用一个简单的vedio标签就可以实现视频播放.类似地,在HTML5中也有对应的处理音频文件的标签,那就是audio标签. audio标签实现一 ...
HTML5实践之歌词同步播放器
歌曲播放我们会发现他的兼容性不是很好,譬如IE上能播放的flash播放器,再firfox或者chrome上就不是很好的应用了,因为有插件的阻碍!HTML5的出现让这一切成为了可能,但是播放器虽然播放了 ...
php 歌词同步,HTML5实践之歌词同步播放器的示例代码分享
歌曲播放我们会发现他的兼容性不是很好,譬如IE上能播放的flash播放器,再firfox或者chrome上就不是很好的应用了,因为有插件的阻碍!HTML5的出现让这一切成为了可能,但是播放器虽然播放了 ...
audio实现歌词同步
网上已经可以找到和歌词同步的不少方法,但是刚刚接触H5的小白,也想写上一些自己歌词同步时一些想法.我由于只考虑前端,所以就没有涉及服务器的问题了,浏览器本身请求本地文件比较严格,会出现如下错误所以你 ...
php中文歌词,详细介绍HTML5使用Audio标签实现歌词同步的效果
HTML5的最强大之处莫过于对媒体文件的处理,如利用一个简单的vedio标签就可以实现视频播放.类似地,在HTML5中也有对应的处理音频文件的标签,那就是audio标签.通过本文给大家介绍HTML5使 ...
HTML5使用Audio标签实现歌词同步的效果
HTML5的最强大之处莫过于对媒体文件的处理,如利用一个简单的vedio标签就可以实现视频播放.类似地,在HTML5中也有对应的处理音频文件的标签,那就是audio标签 HTML5出来这么久了,但是 ...
html简单歌词同步教程,HTML5实现歌词同步(示例代码)
开篇 HTML5的最强大之处莫过于对媒体文件的处理,如利用一个简单的vedio标签就能够实现视频播放.相似地,在HTML5中也有相应的处理音频文件的标签,那就是audio标签 audio标签实现一个 ...
android 歌词同步换行,HTML5音乐播放器同步显示歌词
歌词文件的格式实现之前,当然得了解一下歌词文件的格式了.常规歌词文件的格式基本是一句一行,每行由两部分组成,前面是中括号括起来的时间轴,后面紧跟歌词,像下面这样:[ti:记兰生襄铃] [ar:HIT ...

html5 audio实现歌词同步

html5 audio实现歌词同步相关推荐

最新文章

热门文章