《风雨中的美丽 》- 黑鸭子 （学习老黑的歌词编辑器）
本帖最后由 加林森 于 2022-6-11 23:48 编辑 <br /><br /><style>.mama { position: relative; left: -202px; width: 1000px; height: 600px; background: #ccc url('https://pic.imgdb.cn/item/62a487090947543129e21464.jpg') no-repeat; box-shadow: 2px 2px 2px #444; }
.lrcWrap { position: absolute; right: 10px; top: 10px; padding: 20px; width: fit-content; height: fit-content; text-align: center; background: rgba(20,20,20,.6) linear-gradient(rgba(255,255,255,.25), rgba(255,255,255,.15)); box-shadow: 2px 2px 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: 1px 1px 1px black; list-style-type: none; }
</style>
<div class="mama">
<div class="lrcWrap">
<p>Audio Player for HTML5</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://music.163.com/song/media/outer/url?id=358697.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 = [
['0.31','风雨中的美丽 '],
['1.51','歌手：黑鸭子'],
['2.05','所属专辑：超越(精装版)'],
['2.64','想你盼你怨你念你'],
['3.45','天天天天在等你'],
['14.45','想你盼你怨你念你'],
['14.54','wu ho da da da'],
['19.97','一次一次告诉自己'],
['35.82','外面的天空也很美丽'],
['39.29','一次一次鼓舞自己'],
['43.62','去感受雨后空气的清新'],
['44.83','虽然冬雨过后有些冷'],
['51.95','虽然大街上还刮寒风'],
['56.59','一次一次提醒自己'],
['57.84','昨夜的雷声已经远去'],
['66.11','一次一次放纵自己'],
['70.43','让自己投入一切地爱你'],
['75.27','虽然前方的路不清楚'],
['78.84','虽然依然还会有人阻'],
['83.97','我还是想你盼你怨你念你'],
['89.08','天天天天在等你'],
['98.04','我还是想你盼你怨你念你'],
['99.73','天天天天在等你'],
['107.52','一次一次告诉自己'],
['109.26','外面的天空也很美丽'],
['124.67','一次一次鼓舞自己'],
['128.20','去感受雨后空气的清新'],
['132.19','虽然冬雨过后有些冷'],
['136.23','虽然大街上还刮寒风'],
['141.39','一次一次提醒自己'],
['146.25','昨夜的雷声已经远去'],
['153.91','一次一次放纵自己'],
['157.17','让自己投入一切地爱你'],
['163.04','虽然前方的路不清楚'],
['168.20','虽然依然还会有人阻'],
['171.61','我还是想你盼你怨你念你'],
['176.99','天天天天在等你'],
['185.73','我还是想你盼你怨你念你'],
['187.68','天天天天在等你'],
['194.18','我还是想你盼你怨你念你']
];
for(j=0; j<lrcAr.length; j++){
lrcUl.innerHTML += '<li 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>
@马黑黑 快来帮忙，哪里出毛病了？ 队长好了{:4_187:} 队长你这个歌词还是没有同步 小辣椒 发表于 2022-6-11 22:07
队长好了
嗯嗯。 小辣椒 发表于 2022-6-11 22:10
队长你这个歌词还是没有同步
先前还同步，后面好像没有同步了。
队长学习的态度值得表扬，虽然这次歌词还是没有同步，感觉你已经很辛苦了，慢慢来，为你学习的态度加精
队长加油！ 以后找熟息的歌做，这样熟练一点，队长现在手动修改试试 现在超过10点了，我得下了。明天见！ 小辣椒 发表于 2022-6-11 22:13
队长学习的态度值得表扬，虽然这次歌词还是没有同步，感觉你已经很辛苦了，慢慢来，为你学习的态度加精
...
谢谢小辣椒了。不好意思了。{:5_148:} 小辣椒 发表于 2022-6-11 22:14
以后找熟息的歌做，这样熟练一点，队长现在手动修改试试
嗯嗯，我等下就继续修改。 加林森 发表于 2022-6-11 22:16
谢谢小辣椒了。不好意思了。
队长加油！
让黑黑给你开开小灶{:4_170:}@马黑黑 小辣椒 发表于 2022-6-11 22:15
现在超过10点了，我得下了。明天见！
好的，晚安，拜拜~~~~~~~~~~~~~~ 加林森 发表于 2022-6-11 22:16
嗯嗯，我等下就继续修改。
不急慢慢来，我下了。
晚安，队长别熬夜了！保重身体{:4_179:} 小辣椒 发表于 2022-6-11 22:17
队长加油！
让黑黑给你开开小灶@马黑黑
就是就是，把我整成方脑壳了。{:4_170:} 小辣椒 发表于 2022-6-11 22:18
不急慢慢来，我下了。
晚安，队长别熬夜了！保重身体
好的好的。明天见！{:5_112:} 小辣椒 发表于 2022-6-11 22:17
队长加油！
让黑黑给你开开小灶@马黑黑
队长用的模板也是我测试是用的，有些小问题的 马黑黑 发表于 2022-6-11 22:31
队长用的模板也是我测试是用的，有些小问题的
啊？这个不行的吗？ 加林森 发表于 2022-6-11 22:35
啊？这个不行的吗？
不是不行，可以用用，就是要点小毛病，毕竟是测试时的代码 马黑黑 发表于 2022-6-11 22:36
不是不行，可以用用，就是要点小毛病，毕竟是测试时的代码
怎么改啊？