<details>
<summary>snow</summary>
</details>
<details>
<summary>珠峰</summary>
</details>
<details>
<summary>Shoes</summary>
</details>
本帖最后由 马黑黑 于 2022-6-9 12:03 编辑 <br /><br /><details>
<summary>阵雨天</summary>
</details>
<details>
<summary>月牙泉</summary>
</details>
<div id="jstest"></div>
<script>
document.querySelector('#jstest').innerHTML = '三角形符号:▶ ' +'\u25BA';
</script>
<details>
<summary>在他乡</summary>
</details>
<details>
<summary>Green</summary>
</details>
<details>
<summary>莫妮卡</summary>
</details>
<details>
<summary>天气</summary>
</details>
<details>
<summary>鱼骨妹</summary>
</details>
<details>
<summary>云雾山间</summary>
</details>
<details>
<summary>喜马拉雅</summary>
</details>
<details>
<summary>滴答</summary>
</details>
<details>
<summary>Dive</summary>
</details>
本帖最后由 马黑黑 于 2022-6-18 16:54 编辑 <br /><br /><style>
.outer { margin: auto; width: fit-content; height: fit-content; }
.outer h2 {
margin: 10px;
padding: 0;
font: bold 1.5em sans-serif;
text-align: center;
}
.outer p { margin: 10px; }
.outer input { font: normal 16px sans-serif; }
.menu {
margin: 0 0 -1px 8px;
width: fit-content;
height: fit-content;
display: flex;
position: relative;
}
.item {
width: 60px;
height: 30px;
font: normal 1em / 30px sans-serif;
text-align: center;
background: #fff;
border: 1px solid;
border-bottom: none;
cursor: pointer;
}
.item1 { border: none; border-bottom: 1px solid; background: none; }
#slip { width: 50px; text-align: center; }
#lrcText {
padding: 10px;
width: 736px;
height: 400px;
font: normal 16px / 26px sans-serif;
resize: both;
border: 1px solid;
outline: none;
}
#mUrl { padding: 4px; width: 440px; font-size: 14px; }
#aud { display: none; outline: none; }
#audMsg {
display: inline-block;
margin-left: 12px;
height: 54px;
font: normal 1em / 54px sans-serif;
}
#up, #copy { display: none; }
#check, #invert { width: 100px; }
/* 20220618 */
</style>
<div class="outer">
<h2>花潮LRC在线-框架测试</h2>
<div class="menu">
<div class="item">制作</div>
<div class="item item1">转换</div>
<div class="item item1">测试</div>
</div>
<textarea id="lrcText" rows ="18" cols="60" placeholder="原始歌词"></textarea>
<p>
<input id="begin" type="button" value=" 开始 " />
<input id="up" type="button" value=" ↑↑ " />
<input id="copy" type="button" value=" 复制 " />
<input id="mUrl" type="text" placeholder="音频地址" value="" />
<label>误差值 : </label>
<input id="slip" type="number" placeholder="0" value="0.2" min="0" max="1" step="0.1" />
<input id="check" type="button" value="lrc效果测试" disabled />
<input id="invert" type="button" value="lrc转换" style="display: none" />
</p>
<p style="display:flex">
<audio id="aud" controls="controls"></audio>
<span id="audMsg"></span>
</p>
</div>
<script>
let begin = document.querySelector('#begin'),
copy = document.querySelector('#copy'),
up = document.querySelector('#up'),
check = document.querySelector('#check'),
invert = document.querySelector('#invert'),
lrcText = document.querySelector('#lrcText'),
slip = document.querySelector('#slip'),
audMsg = document.querySelector('#audMsg'),
mUrl = document.querySelector('#mUrl'),
items = document.querySelectorAll('.item');
//lrc歌词数组、数组元素标识、误差值、工作模式
let lrcArr = [], idx = 0, slipNum = 0.2, mode = 'make';
//模式切换
Array.from(items).forEach((ele,key) => {
ele.onclick = () => {
if(key>0) mUrl.value = aud.src;
ele.className = 'item';
if(key == 0) { //制作模式
mode = 'make';
items.className = items.className = 'item item1';
check.disabled = true;
begin.disabled = false;
check.style.display = 'inline-block';
invert.style.display = 'none';
} else if(key == 1){ //转换模式
mode = 'invert';
items.className = items.className = 'item item1';
check.disabled = true;
check.style.display = 'none';
begin.disabled = true;
invert.style.display = 'inline-block';
} else { //检验模式
mode = 'check';
items.className = items.className = 'item item1';
check.disabled = false;
check.style.display = 'inline-block';
begin.disabled = true;
invert.style.display = 'none';
}
}
});
//开始制作
begin.onclick = function() {
if(lrcText.value == '' || mUrl.value == '') return false;
lrcArr.length = 0;//清空数组
lrcArr = lrcText.value.split('\n');
aud.src = mUrl.value;
lrcText.value = 'let lrcAr = [\n';
mUrl.value = lrcArr;
this.style.display = 'none';
up.style.display = 'inline-block';
aud.style.display = 'inline-block';
}
//lrc上屏
up.onclick = function() {
if(idx == lrcArr.length - 1) {//最后一句
lrcText.value += '\t' + mUrl.value.slice(0,-1) + '\n];';
this.style.display = 'none';
copy.style.display = 'inline-block';
mUrl.value = aud.src;
} else {
lrcText.value += '\t' + mUrl.value + '\n';
}
lrcText.scrollTop = lrcText.scrollHeight;
if(idx<lrcArr.length - 1) idx ++;
audMsg.innerHTML +=' [ 完成量: ' + lrcArr.length + ' / ' + idx + ' ]';
mUrl.value = lrcArr;
}
//复制结果到剪贴板
copy.onclick = function() {
lrcText.select();
document.execCommand('copy');
mUrl.value = '已复制到剪切板';
this.style.display = 'none';
begin.style.display = 'inline-block';
}
//lrc效果测试
check.onclick = function() {
if(lrcText.value == '' || mUrl.value == '') return false;
mode = 'check';
lrcArr.length = 0; //清空数组
idx = 0; //重置数组标识
let ar = lrcText.value.split('\n');
for(j=0; j<ar.length-1; j++) {
let tmpar = getLrc(ar);
if(tmpar.length > 1) lrcArr.push(tmpar);
}
aud.style.display = 'block';
aud.src = mUrl.value;
aud.play();
}
//以下是引发问题的模块：循环语句用变量 i 所导致
//“分:秒.毫秒”转换花潮lrc格式（例如 02:07.63 → 127.63)
invert.onclick = function() {
if(lrcText.value == '' || mUrl.value == '') return false;
mode = 'invert';
lrcArr.length = 0; //清空数组
let ar = lrcText.value.split('\n');
for(j=0; j<ar.length-1; j++) {
let tmpar = getLrc(ar);
if(tmpar.length > 1) {
let timeMsg = tmpar.split(':');
tmpar = `\n\t['${parseFloat(timeMsg) * 60 + parseFloat(timeMsg).toFixed(2)}'`;
tmpar = `'${tmpar}']`;
lrcArr.push(tmpar);
}
}
lrcText.value = 'let lrcAr = [' + lrcArr + '\n];';
}
//no problem below
//误差值改变
slip.onchange = function() {
slipNum = slip.value;
if(slipNum > 1) slipNum = 1;
if(slipNum < -1) slipNum = -1;
}
//暂停监听
aud.addEventListener('pause',function(){
if(mode == 'make'){
let time = (aud.currentTime - slipNum).toFixed(2);
mUrl.value = `['${time}','${rep(lrcArr)}'],`;
}
})
//进度监听
aud.addEventListener('timeupdate',function(){
audMsg.innerText = aud.duration + ' | ' + aud.currentTime;
if(mode == 'check'){ //lrc效果检测模式
let tt = aud.currentTime;
for(j=0; j<lrcArr.length; j++){
if(tt >= lrcArr){
mUrl.value = lrcArr;
selectText(lrcArr,lrcText);
if(lrcText.scrollTop < lrcText.scrollHeight) lrcText.scrollTop = j * lrcText.scrollHeight / (lrcArr.length + 2);
}
}
}
});
//播放结束监听
aud.addEventListener('ended',function(){
mUrl.value = aud.src;
});
//no problem
function rep(str) { return str.replace(/\'/g,"\'"); } //处理小角引号
//接收textarea数组变量
function getLrc(str) {
str = str.replace(/\['|'],|']|\["|"],|"]|\t|\s/g,'');
let ar = str.split("','" || '","'||"', '"|| '", "');
if(ar.length > 1) {
return ar;
}else{
return '';
}
}
//效果监测之lrc文本框选中当前句时间
function selectText(txt,ele){
let all = ele.value,
start = all.search(txt),
end = start + txt.length;
ele.setSelectionRange(start,end);
ele.focus();
}
</script>
<details>
<summary>前路</summary>
</details>
本帖最后由 马黑黑 于 2022-6-22 07:55 编辑 <br /><br /><style>
.father {
margin: auto;
width:640px;
height: 400px;
background:black url('/data/attachment/forum/202203/14/204611csns6tv6pzu2tpsa.jpg') no-repeat center/cover;
position: relative;
}
.aero {
position: absolute;
width: 300px;
height: 100px;
left: calc(50% - 150px);
top: calc(50% - 50px);
font: bold 2em / 100px sans-serif;
text-align:center;
overflow: hidden;
box-shadow: 2px 2px 8px rgba(0,0,0,.65);
z-index: 1;
}
.aero::before {
position: absolute;
content: '';
margin: -20px;
left: 0; top: 0; right: 0; bottom: 0;
background: rgba(255,255,255,.45);
filter: blur(2px);
z-index: -1;
}
</style>
<div class="father">
<div class="aero">Aero Test</div>
</div>
占位
<details>
<summary>coral</summary>
</details>