本帖最后由 加林森 于 2022-7-30 23:50 编辑 <br /><br />醉美水芙蓉 发表于 2022-6-23 16:56
图片很漂亮！
喜欢就好！{:4_190:}
<style>
.papa { left: -214px;width: 1024px; height: 525px; background: rgba(0,0,0,.4) url('https://pic.imgdb.cn/item/62e551b0f54cd3f937dc175d.jpg'); position: relative; }
.papa input { border: none; outline: none; opacity: .75; cursor: pointer; }
.papa p { margin: 0; padding: 0; }
.playbox { position: relative; left: 10px; top: 10px; padding: 10px; width: fit-content; font: normal 1em sans-serif; color: snow; background: rgba(255,255,255,.25); backdrop-filter: blur(2px); border-radius: 8px; overflow: hidden; box-shadow: 1px 2px 2px #000; }
#btnplay { width: 30px; height: 30px; border-radius: 50%; }
#btnplay:hover { background: #aaa; color: #ff0000; }
</style>
<div class="papa">
<div class="playbox">
<p id="geci">LRC Loading ... </p>
<p style="display: flex; align-items: center; gap: 4px; margin-top: 10px;">
<input id="btnplay" type="button" value=">" />
<input id="slider" type="range" min="0" max="100" value="0" />
<span id="per">0:0 | 0:0</span>
</p>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=31861477.mp3" autoplay="autoplay" loop="loop"></audio>
</div>
<script>
let slider = document.querySelector('#slider'),
aud = document.querySelector('#aud'),
per = document.querySelector('#per'),
btnplay = document.querySelector('#btnplay'),
geci = document.querySelector('#geci');
let slip = 0; //误差值
let lrcAr = [
['0.06','曲名：忙先生'],
['120.51','歌手：Jony J'],
['160.51','所属专辑：杂集'],
['240.00','谢谢欣赏'],
];
slider.onmousedown = () => aud.pause();
slider.onchange = () => { aud.currentTime = slider.value * aud.duration / 100; aud.play(); }
btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing', () => btnplay.value = '||');
aud.addEventListener('pause', () => btnplay.value = '>');
aud.addEventListener('timeupdate', () => {
let prog = 100 * aud.currentTime / aud.duration;
slider.value = prog;
per.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
for(j=0; j<lrcAr.length; j++){
if(aud.currentTime >= lrcAr - slip){
geci.innerHTML = lrcAr;
}
}
});
let toMin = (sec) => {
if(!sec) return '0:00';
sec = parseInt(sec);
return parseInt(sec / 60) + ':' +parseFloat(sec % 60).toString().padStart(2,'0');
}
</script>
加林森 发表于 2022-6-23 16:54
是啊。
这个图选的好。
梦油 发表于 2022-6-23 17:25
这个图选的好。
好的好的。
队长很勤奋，一下子出来3个{:4_178:}
就纯欣赏画面，音乐我暂时不能听，晚上再欣赏
小辣椒 发表于 2022-6-23 18:25
队长很勤奋，一下子出来3个
今天有点累了。
小辣椒 发表于 2022-6-23 18:26
就纯欣赏画面，音乐我暂时不能听，晚上再欣赏
嗯嗯。
哪冒出来的民国女神牙，太内涵了{:4_199:}
樵歌 发表于 2022-6-23 19:28
哪冒出来的民国女神牙，太内涵了
好听吧。
樵歌 发表于 2022-6-23 19:28
哪冒出来的民国女神牙，太内涵了
樵哥哥，你这个回复也是神了{:4_170:}
加林森 发表于 2022-6-23 18:27
今天有点累了。
队长早点休息
小辣椒 发表于 2022-6-23 21:37
队长早点休息
好的。今晚又去养老院，才回来！
加林森 发表于 2022-6-23 21:36
好听吧。
好听，好看，喜欢。{:4_189:}
小辣椒 发表于 2022-6-23 21:36
樵哥哥，你这个回复也是神了
那女子本来就像极民国时江南才女牙{:4_189:}
樵歌 发表于 2022-6-24 10:58
好听，好看，喜欢。
那就好。{:4_190:}
加林森 发表于 2022-6-23 16:35
这个好看吗？
比原来的那个好。
红影 发表于 2022-6-24 13:46
比原来的那个好。
这个也是拉满频了的。
加林森 发表于 2022-6-24 14:16
这个也是拉满频了的。
嗯嗯，还是满屏的比较好，不是满屏的就很需要衔接不为的无痕。
加林森 发表于 2022-6-24 11:00
那就好。
必须好{:4_174:}