水墨丹青一世情（学习黑黑歌词同步编辑）
<style>.mama { position: relative; left: -340px; width: 1280px; height: 732px;top: 150px;background: #ccc url('https://pic.imgdb.cn/item/62a387230947543129d85cc1.jpg') no-repeat; box-shadow: 2px 2px 2px #444; }
.lrcWrap { position: absolute; right: 80px; top: 180px; padding: 20px; width: fit-content; height: fit-content; text-align: center; background: Azure(20,20,20,.6) linear-gradient(rgba(255,255,255,.25), rgba(255,255,255,.15)); box-shadow: 1px 1px 4px #eee; display: flex; flex-direction: column;align-items: center; }
.meterWrap { position: relative; display: flex; align-items: center; width: fit-content; height: 50px; }
.btn { width: 24px; height: 24px; background: olive; color: #ccc; border: none; font-size: 14px; outline: none; cursor: pointer; }
.btn:hover { color: red; }
.meter { position: relative; width:300px; height: 11px; cursor: pointer; background: linear-gradient(transparent 5px, snow 6px,transparent 0); }
.slider { display: block; position: absolute; width: 4px; height: 100%; background: olive; }
.lrcWrap p { margin: 0 0 12px 0; padding: 0px; color: #ccc; font: normal 1.2em sans-serif; text-shadow: 1px 1px 1px #333; }
.lrcBox { margin: 0; padding: 0; width: 400px; height: 72px;overflow: hidden; user-select: none; position: relative; }
.lrcUl { position: relative; top: 0; margin: 0; padding: 0; }
.lrcUl li { margin: 0; padding: 0; height: 24px; font: normal 18px / 24px sans-serif; color: gray; text-shadow: 2px 2px 2px black; list-style-type: none; }
</style>
<div class="mama">
<div class="lrcWrap">
<p>学习黑黑LRC歌词同步编辑</p>
<div class="lrcBox"><ul class="lrcUl"></ul></div>
<div class="meterWrap">
<input class="btn" type="button" value="||" />
<div class="meter"><span class="slider"></span></div>
</div>
</div>
</div>
<audio class="aud" src="https://s1.ananas.chaoxing.com/sv-w9/audio/67/f7/67/90fac00d501c10e4212fc25e03992f10/audio.mp3" autoplay="autoplay" loop="loop"></audio>
<script>
let aud = document.querySelector('.aud'),
btn = document.querySelector('.btn');
meter = document.querySelector('.meter'),
slider = document.querySelector('.slider'),
lrcUl = document.querySelector('.lrcUl');
let slip = 0.25;
let lrcAr = [
['1.69','水墨丹青一世情 - 臻言'],
['12.75','词：陈柳霞 曲：浅笑'],
['19.14','编曲：烟雨憾'],
['34.54','宣纸盈香 留白情动'],
['41.50','与你有约 水墨相逢'],
['48.11','梅兰竹菊'],
['52.54','清雅只需一个懂'],
['56.19','高山流水思念尽在不言中'],
['64.32','工笔描绘你神韵灵动'],
['71.41','写意挥洒你飘逸音容'],
['77.83','心系兰舟'],
['82.16','雾散清愁小桥东'],
['85.91','笔走丹心烟绕楼榭影朦胧'],
['96.68','妙手浓淡'],
['100.58','飘逸山水中'],
['104.24','印章有意'],
['108.24','私藏你的梦'],
['111.94','不曾赋歌'],
['115.44','繁华早成空'],
['119.22','唯愿丹青素手'],
['123.11','舞动世间情'],
['126.75','人生如梦'],
['130.25','转眼各西东'],
['134.06','前途漫漫'],
['137.93','霜重枫叶红'],
['141.24','往事依旧'],
['145.16','看岁月葱茏'],
['148.72','卷轴慢收一声珍重在画中'],
['157.72','LRC编辑：小辣椒'],
['185.16','宣纸盈香 留白情动'],
['193.15','与你有约 水墨相逢'],
['199.61','梅兰竹菊'],
['203.96','清雅只需一个懂'],
['207.82','高山流水思念尽在不言中'],
['215.23','工笔描绘你神韵灵动'],
['222.67','写意挥洒你飘逸音容'],
['229.55','心系兰舟'],
['233.72','雾散清愁小桥东'],
['237.22','笔走丹心'],
['239.36','烟绕楼榭影朦胧'],
['248.64','妙手浓淡'],
['251.81','飘逸山水中'],
['255.67','印章有意'],
['259.68','私藏你的梦'],
['263.25','不曾赋歌'],
['266.53','繁华早成空'],
['270.67','唯愿丹青素手'],
['274.54','舞动世间情'],
['278.16','人生如梦'],
['281.64','转眼各西东'],
['285.21','前途漫漫'],
['288.93','霜重枫叶红'],
['292.55','往事依旧'],
['296.32','看岁月葱茏'],
['301.12','卷轴慢收一声珍重在画中'],
['307.48','卷轴慢收一声珍重在画中'],
['324.12','谢谢欣赏'],
];
for(j=0; j<lrcAr.length; j++){
lrcUl.innerHTML += '<li style="list-style-type: none" id="li' + lrcAr + '">' + lrcAr + '</li>';
}
aud.addEventListener('timeupdate', () => {
let prog = (meter.clientWidth - slider.clientWidth) * aud.currentTime / aud.duration;
slider.style.transform = 'translate(' + prog + 'px)';
let tt = aud.currentTime;
for(j=0; j<lrcAr.length; j++){
if(tt >= lrcAr - slip){
if(j > 0){
let idxLast = lrcAr;
document.getElementById('li' + idxLast).style.color = 'gray';
lrcUl.style.top = '-' + (j * 24 - 24) + 'px';
}
let idx = lrcAr;
document.getElementById('li' + idx).style.color = 'ghostwhite';
}
}
})
aud.addEventListener('ended', () => {
document.getElementById("li" + lrcAr).style.color = 'gray';
lrcUl.style.top = 0;
});
aud.addEventListener('pause', () => btn.value = '▷');
aud.addEventListener('play',() => btn.value = '||');
meter.onclick = (e) => {
e = e || event;
aud.currentTime = (e.clientX - offset(meter,"left")) * aud.duration / meter.clientWidth;
}
btn.onclick = () => aud.paused ? (aud.play(),btn.value = '||') : (aud.pause(),btn.value = '▷');
function offset(obj,direction){//位移量
let offsetDir = "offset" + direction.toUpperCase()+direction.substring(1);
let realNum = obj;
let positionParent = obj.offsetParent;
while(positionParent != null){
realNum += positionParent;
positionParent = positionParent.offsetParent;
}
return realNum;
}
btn.value = aud.paused ? '▷' : '||';
</script>
<br><br><br><br><br><br><br><br><br><br><br><br> @马黑黑
黑黑这个是昨天的教程，虽然没有很漂亮，作业都完成了{:4_173:} 很漂亮的啊，是个好学生{:4_204:}{:4_189:} 很喜欢这首歌，今天就做上了，图图做太丑，反正大家听到歌曲就好了{:4_173:} 水墨丹青一世情 - 臻言 绿叶清舟 发表于 2022-6-11 17:03
很漂亮的啊，是个好学生
清舟在啊，这个图图真的不咋的，找了现成的图裁剪一下加了几个图层就完来了，没有清舟做图来的精致 场景和人物选取都很漂亮。在山川大河里，一双人影相依相伴，不离不弃，很温馨{:4_187:} 毛玻璃效果在这样的场景下很美的，亲爱的真棒{:4_187:} 好看好听，好制作！真漂亮。{:4_199:} 加林森 发表于 2022-6-11 17:34
好看好听，好制作！真漂亮。
队长这个有没有小点点？我眼睛不好你帮我看看 又出来一个了。{:4_203:} 小辣椒 发表于 2022-6-11 17:38
队长这个有没有小点点？我眼睛不好你帮我看看
有一个的。 加林森 发表于 2022-6-11 17:40
有一个的。
队长再帮我看看，我反正修改了代码，但自己看不见 小辣椒 发表于 2022-6-11 17:46
队长再帮我看看，我反正修改了代码，但自己看不见
现在没有了。 加林森 发表于 2022-6-11 17:49
现在没有了。
好的，谢谢队长{:4_187:} 红影 发表于 2022-6-11 17:30
场景和人物选取都很漂亮。在山川大河里，一双人影相依相伴，不离不弃，很温馨
人物我加上去的，否则界面太灰暗了 加林森 发表于 2022-6-11 17:39
又出来一个了。
队长，这个是黑黑分享的2个教程，不一样的 小辣椒 发表于 2022-6-11 17:54
队长，这个是黑黑分享的2个教程，不一样的
知道的。 小辣椒 发表于 2022-6-11 17:52
好的，谢谢队长
不客气的。 这是用的我测试时的代码，三角形按钮没出来呢。
这个版本的 discuz！在JS里要用Unicode 三角形才能出来
页:
[1]
2