生活随笔
收集整理的這篇文章主要介紹了
html5 audio实现歌词同步
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
audio標簽用于播放音頻文件，很不幸，歌詞文件并沒有相應接口
addTextTrack() 向音頻添加新的文本軌道。//各大瀏覽器都沒有支持
有兩種方法可以實現(xiàn)歌詞同步：
1. 使用setInterval();
2. 監(jiān)聽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.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() {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事件，這個事件可能會多次觸發(fā)。例如當你設置currentTime的時候，
也會觸發(fā)canplay事件，這個不好解釋 ：（
第二種方法也差不多。
總結(jié)
以上是生活随笔為你收集整理的html5 audio实现歌词同步的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。
