Vue.component("lrc-scroller", {
"template":
"<div class=‘container‘>\
<div class=‘box‘>\
<div class=‘box-outer‘ v-bind:class=‘offsetClass‘>\
<div class=‘box1‘><span>{{ lrc_top }}</span></div>\
<div class=‘box2‘><span>{{ lrc_bt }}</span></div>\
</div>\
<div class=‘switchBtn‘ title=‘switch language‘ v-on:click=‘swl‘></div>\
</div>\
</div>",
"props":["offsetClass", "lrc_top", "lrc_bt", "swl"]
});
var that = {};
var $lrc = lrcHandler("lrc");
var $tlrc = lrcHandler("tlrc");
var nowLine = 0;
var main = new Vue({
"el": "#main",
"data": {
"sim": {
"offset": false,
"transition": true
},
"tlrc": "",
"blrc": "",
"timers": [],
"transition_timer": null,
"displayLrc": window["$lrc"]
},
"methods": {
setLnLrc: function(line, fn){
that["tlrc"] = that.displayLrc["lrc-main"][line]["lyric"];
$lrc["lrc-main"][line+1] && (that["blrc"] = that.displayLrc["lrc-main"][line+1]["lyric"]);
fn && fn();
},
recover_fn: function(){
that.sim["transition-none"] = true;
that.sim["transition"] = false;
that.sim["offset"] = false;
},
scroll_fn: function(){
that.sim["offset"] = true;
that.sim["transition"] = true;
that.sim["transition-none"] = false;
},
switchLang: function(){
that.displayLrc = (that.displayLrc === window["$tlrc"] ? window["$lrc"] : window["$tlrc"]);
}
},
"watch": {
"displayLrc": function(){
that.setLnLrc(nowLine);
}
},
"beforeCreate": function(){
that = this;
},
"created": function(){
for(var j=0, len=$lrc["lrc-main"].length; j<len; j++){
var ti = that.displayLrc["lrc-main"][j]["time"];
var c = 0;
that.timers[j] = setTimeout(function(){
that.scroll_fn();
clearTimeout(that.transition_timer);
that.transition_timer = setTimeout(function(){
$lrc["lrc-main"][c-1] && that.setLnLrc(c-1, function(){
that.recover_fn();
console.log(that.displayLrc["lrc-main"][c-1]["time"], that.displayLrc["lrc-main"][c-1]["lyric"]);
});
clearTimeout(that.transition_timer);
}, 200)
nowLine = c++;
clearTimeout(that.timers[j]);
}, ti);
}
}
});
/**
* @method lrcHandler 返回指定 type 的歌词 json 对象
* @param { String } type lrc（原） 或 tlrc（译）
* @param { Object } lns_obj info&main
*/
function lrcHandler (type) {
var refer = {
"lrc": "lyric",
"tlrc": "translateLyric"
};
var lns_obj = {
"lrc-info": [],
"lrc-main": []
};
var lns = lrc[refer[type]].split("\n");
// lrc 文件字符串的每行所组成的 JSON
for(var i=0, len=lns.length; i<len; i++){
var m = lns[i];
var info = m.replace(/\[(.*)\](.*)/, "$1");
var lys = m.replace(/\[(.*)\](.*)/, "$2");
var mth = info.match(/([0-9]+)\:([0-9]+)\.([0-9]+)/);
var pad_0 = function(num_str){return (num_str + (new Array(4-num_str.length)).join("0"))};
if(mth){
var milis = mth[1]*1*60*1000 + mth[2]*1*1000 + pad_0(mth[3])*1;
var ln = {"time": milis, "lyric": lys};
lns_obj["lrc-main"].push(ln)
}else{
var inf = {};
inf[info.replace(/(.*)\:(.*)/, "$1")] = info.replace(/(.*)\:(.*)/, "$2");
lns_obj["lrc-info"].push(inf);
};
};
return lns_obj;
};
console.log(lrcHandler("tlrc"));
