189 lines
6.3 KiB
HTML
189 lines
6.3 KiB
HTML
|
<!DOCTYPE HTML>
|
|||
|
|
<html lang=zh-cn>
|
|||
|
|
<head>
|
|||
|
|
<meta charset=utf-8>
|
|||
|
|
<title>krc demo</title>
|
|||
|
|
<style>
|
|||
|
|
*{margin:0px;padding:0px;}
|
|||
|
|
body{width:100%;height:100%;background: rgba(27, 46, 129, 0);}
|
|||
|
|
.box{display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-align:center;margin:5px;padding:5px;-webkit-user-select:none;}
|
|||
|
|
.box:hover{background-color:rgba(0,0,0,0.4);-webkit-box-shadow:0 0 5px #646464;cursor:pointer;}
|
|||
|
|
.box:hover .ctrl{display:block;}
|
|||
|
|
.text{position:relative;top:8px;display:-webkit-box;-webkit-box-orient:horizontal;-webkit-box-align:center;font:normal normal bold 60px 微软雅黑,sans-serif;-webkit-filter:brightness(2);}
|
|||
|
|
.text p{
|
|||
|
|
background:-webkit-linear-gradient(top, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%), -webkit-linear-gradient(left, #f00 0%, #00f 0%);
|
|||
|
|
-webkit-background-clip:text;
|
|||
|
|
-webkit-text-fill-color:transparent;
|
|||
|
|
/*-webkit-text-stroke:1px #f00;*/
|
|||
|
|
-webkit-filter:drop-shadow(0px 0px 1px #f00);
|
|||
|
|
}
|
|||
|
|
.ctrl{position:relative;top:25px;height:20px;background:#0aa;display:-webkit-box;-webkit-box-shadow:0 0 5px #646464;display:none;border-radius:4px;}
|
|||
|
|
.ctrl span{padding:0 10px;}
|
|||
|
|
.ctrl span:hover{background:#088;cursor:pointer;}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<section>
|
|||
|
|
<div class="box" id="box">
|
|||
|
|
<div class="text" id="text">
|
|||
|
|
</div>
|
|||
|
|
<div class="ctrl"><span id="bigger">放大</span><span id="smaller">缩小</span><span id="lock">锁定</span><span id="close">关闭</span></div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
<script language="javascript">
|
|||
|
|
(function(){
|
|||
|
|
|
|||
|
|
/*
|
|||
|
|
krc歌词解析目标格式要求
|
|||
|
|
var lines = [{'ws':[{'w':word, 'o':offset, 'd':duration},{'w':word, 'o':offset, 'd':duration},...], 'o':offset, 'd':duration},
|
|||
|
|
{'ws':[{'w':word, 'o':offset, 'd':duration},{'w':word, 'o':offset, 'd':duration},...], 'o':offset, 'd':duration},
|
|||
|
|
...]
|
|||
|
|
*/
|
|||
|
|
//一下是模拟krc解析后的歌词数据
|
|||
|
|
var lines = [];
|
|||
|
|
var offset = 0;
|
|||
|
|
var duration = 0;
|
|||
|
|
for (var i = 0; i < 1000; i++) {
|
|||
|
|
duration = 7400;
|
|||
|
|
lines.push({'ws':[{'w':"这", 'o':0, 'd':300},{'w':"是", 'o':300, 'd':400},{'w':"歌", 'o':700, 'd':200},{'w':"词", 'o':900, 'd':500},{'w':"测", 'o':1900, 'd':100},{'w':"试", 'o':2000, 'd':400},{'w':"，", 'o':2400, 'd':800},{'w':"请", 'o':3200, 'd':1200},{'w':"关", 'o':4400, 'd':1000},{'w':"注", 'o':5400, 'd':200},{'w':"效", 'o':5600, 'd':1600},{'w':"果", 'o':7200, 'd':200}], 'o':offset, 'd':duration});
|
|||
|
|
offset += 7400;
|
|||
|
|
duration = 7300;
|
|||
|
|
lines.push({'ws':[{'w':"经", 'o':0, 'd':200},{'w':"测", 'o':200, 'd':500},{'w':"试", 'o':700, 'd':200},{'w':"，", 'o':900, 'd':1000},{'w':"网", 'o':1900, 'd':200},{'w':"页", 'o':2100, 'd':500},{'w':"的", 'o':2600, 'd':200},{'w':"效", 'o':2800, 'd':300},{'w':"果", 'o':3900, 'd':300},{'w':"也", 'o':4200, 'd':100},{'w':"还", 'o':4300, 'd':300},{'w':"不", 'o':5700, 'd':600},{'w':"错", 'o':6300, 'd':1000}], 'o':offset, 'd':duration});
|
|||
|
|
offset += 7300;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/*
|
|||
|
|
将解析后的一行歌词添加到dom中
|
|||
|
|
*/
|
|||
|
|
var _etext = document.getElementById("text");
|
|||
|
|
var wstoes = function(words) {
|
|||
|
|
var ps = "";
|
|||
|
|
for (var i = 0; i < words.length; i++) {
|
|||
|
|
ps += "<p>" + words[i]['w'] + "</p>";
|
|||
|
|
}
|
|||
|
|
_etext.innerHTML = ps;
|
|||
|
|
|
|||
|
|
var _eps = _etext.getElementsByTagName("p");
|
|||
|
|
for (var i = 0; i < words.length; i++) {
|
|||
|
|
_eps[i].offset = words[i]['o'];
|
|||
|
|
_eps[i].duration = words[i]['d'];
|
|||
|
|
}
|
|||
|
|
return _eps;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
var step = 30; // 默认刷新时长30ms，刷新时长配置对桌面歌词性能影响较大
|
|||
|
|
var timer; // 启动单个字推进的定时器
|
|||
|
|
/*
|
|||
|
|
处理单个显示元素
|
|||
|
|
_eps: dom节点列表，表示歌词中单个显示元素
|
|||
|
|
_index: 当前变化元素的索引
|
|||
|
|
_ps: process step，每次timeout推进的步长
|
|||
|
|
_process: 当前变化元素的进度（0-100）
|
|||
|
|
pos: 对该元素进行处理时间点，在哪个timeout点处理
|
|||
|
|
count: timeout的次数
|
|||
|
|
*/
|
|||
|
|
var _processw = function(_eps, _index, _ps, _process, pos, count){
|
|||
|
|
_ep = _eps[_index];
|
|||
|
|
if (count >= pos) {
|
|||
|
|
_process += _ps;
|
|||
|
|
_ep.style.backgroundImage = "-webkit-linear-gradient(top, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%), -webkit-linear-gradient(left, #f00 " + _process + "%, #00f 0%)";
|
|||
|
|
|
|||
|
|
if (_process >= 99) {
|
|||
|
|
if ((_index+1) >= _eps.length) { //该句结束退出
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
_index++;
|
|||
|
|
var ts = Math.round(_eps[_index].duration/step)==0?1:Math.round(_eps[_index].duration/step);
|
|||
|
|
_ps = 100/ts;
|
|||
|
|
_process = 0;
|
|||
|
|
pos = Math.round(_eps[_index].offset/step);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
count++;
|
|||
|
|
timer = setTimeout(_processw.bind(this, _eps, _index, _ps, _process, pos, count), step);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/*
|
|||
|
|
处理单行
|
|||
|
|
*/
|
|||
|
|
var _processL = function(words) {
|
|||
|
|
var _eps = wstoes(words);
|
|||
|
|
clearTimeout(timer); //清除上一行因为页面渲染延迟没有处理完的定时器
|
|||
|
|
_processw(_eps, 0, 100/Math.round(_eps[0].duration/step), 0, Math.round(_eps[0].offset/step), 0);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/*
|
|||
|
|
处理全部krc歌词
|
|||
|
|
*/
|
|||
|
|
var timers = [];
|
|||
|
|
var _processK = function() {
|
|||
|
|
for (var i = 0; i < lines.length; i++) {
|
|||
|
|
var timer = setTimeout(_processL.bind(this, lines[i]['ws']), lines[i]['o']);
|
|||
|
|
timers.push(timer);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//启动处理
|
|||
|
|
_processK();
|
|||
|
|
|
|||
|
|
|
|||
|
|
///////////////////////////////////////////////////////
|
|||
|
|
// 下面是一些用户操作响应
|
|||
|
|
document.getElementById("text").addEventListener("mousedown", winmove, false);
|
|||
|
|
document.getElementById("bigger").addEventListener("click", bigger, false);
|
|||
|
|
document.getElementById("smaller").addEventListener("click", smaller, false);
|
|||
|
|
document.getElementById("lock").addEventListener("click", lock, false);
|
|||
|
|
document.getElementById("close").addEventListener("click", close, false);
|
|||
|
|
function winmove(_Event){
|
|||
|
|
channel.Call('winctrl.dragWindow');
|
|||
|
|
}
|
|||
|
|
/*
|
|||
|
|
字体变大
|
|||
|
|
*/
|
|||
|
|
var fontsize = 60;
|
|||
|
|
function bigger(_Event){
|
|||
|
|
if (fontsize < 80){
|
|||
|
|
fontsize += 2;
|
|||
|
|
var font = "normal normal bold " + fontsize + "px 微软雅黑,sans-serif"
|
|||
|
|
_etext.style.font = font;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
/*
|
|||
|
|
字体变小
|
|||
|
|
*/
|
|||
|
|
function smaller(_Event){
|
|||
|
|
if (fontsize > 16){
|
|||
|
|
fontsize -= 2;
|
|||
|
|
var font = "normal normal bold " + fontsize + "px 微软雅黑,sans-serif"
|
|||
|
|
_etext.style.font = font;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
/*
|
|||
|
|
窗口锁定，在PC混合应用容器中有效
|
|||
|
|
*/
|
|||
|
|
function lock(_Event){
|
|||
|
|
if(typeof(channel) == "undefined") {
|
|||
|
|
alert("窗口锁定功能只在pc混合应用容器中有效");
|
|||
|
|
} else {
|
|||
|
|
channel.Call('winctrl.lockwindow');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
/*
|
|||
|
|
窗口关闭，在PC混合应用容器中有效
|
|||
|
|
*/
|
|||
|
|
function close(_Event){
|
|||
|
|
if(typeof(channel) == "undefined") {
|
|||
|
|
alert("窗口关闭功能只在pc混合应用容器中有效");
|
|||
|
|
} else {
|
|||
|
|
channel.Call('winctrl.sendMessage', [{"src":"lrc", "action":"close"}]);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
})();
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|
|||
|
|
|