《Don't Make Me Wait for Love》- Kenny G / Lenny Williams
本帖最后由 加林森 于 2022-7-7 18:37 编辑 <br /><br /><style>#papa { left: -214px; width: 1024px; height: 800px; background: #ccc url('https://pic.imgdb.cn/item/62c683f5f54cd3f937652f22.jpg') no-repeat center/cover; box-shadow: 4px 4px 30px #000; position: relative; }
.imgs { position: absolute; left: 10px; bottom: 10px; width: 160px; background: #eee; box-shadow: 2px 2px 20px rgba(0,0,0,.15); transition: .8s linear; }
#papa input { border: none; outline: none; opacity: .75; cursor: pointer; }
#papa p { margin: 0; padding: 0; }
#playbox { position: absolute; left: 10px; top: 10px; padding: 10px; font: normal 1em sans-serif; color: tomato; text-shadow: 1px 1px 1px #000; background: transparent; border-radius: 8px; overflow: hidden; box-shadow: 1px 1px 2px rgba(0,0,0,.15); z-index: 100; }
#playbox::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; }
#btnplay { width: 30px; height: 30px; border-radius: 50%; }
#btnplay:hover { background: #aaa; color: #ff0000; }
.imgs:hover { box-shadow: 2px 2px20px #eee; cursor: pointer; }
</style>
<div id="papa">
<div id="playbox">
<p id="geci" style="font-size: 1.2em">Don't Make Me Wait for Love </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%</span>
</p>
</div>
<audio id="aud" src="https://www.joy127.com/url/91052.mp3" autoplay="autoplay" loop="loop"></audio>
</div>
<script>
let lrcAr = [
['7500.00','Dont Make Me Wait for Love '],
['12000.00','歌手：Kenny G / Lenny Williams'],
['17280.00','所属专辑：Duotones'],
['97260.00','Sitting here just staring at your picture'],
['123600.00','Waiting for your call'],
['150300.00','So unclear Im hanging on a notion'],
['178260.00','We could have it all'],
['195780.00','Time and time again you tell me to be patient'],
['214920.00','But we cant let love slip away'],
['233040.00','Baby dont make me wait for love this time'],
['261960.00','oh darlin a love like this is hard to find'],
['271200.00','Dont make me wait for love'],
['283800.00','Hmm I close the blinds and try to hide the darkness'],
['343380.00','Fall asleep alone'],
['353820.00','Give me a sign a man aint supposed to face life'],
['372480.00','Standing on his own'],
['380340.00','When youre near me I cant help but see forever'],
['405420.00','Come and rescue me tonight'],
['418740.00','Baby dont make me wait for love this time oh'],
['437280.00','Oh oh darlin a love like this is hard to find'],
['451020.00','Dont make me wait for love'],
['464280.00','dont make me wait for love this time oh'],
['477480.00','a love like this is hard to find']
];
let imgAr = [
'https://pic.imgdb.cn/item/62c6a1fcf54cd3f9379043f7.jpg',
'https://pic.imgdb.cn/item/62c6a175f54cd3f9378f9255.jpg',
'https://pic.imgdb.cn/item/62c6a0e5f54cd3f9378e9e55.jpg',
'https://pic.imgdb.cn/item/62c6a06df54cd3f9378dcb0e.jpg',
];
let flag, slip = 0;
imgAr.forEach((item,key) => {
let img = document.createElement('img');
img.className = 'imgs';
img.src= item;
img.style.left = key*20 +10 + 'px';
img.style.bottom = key*20 + 10 + 'px';
img.style.zIndex = key + 1;
papa.appendChild(img);
});
let imgs = document.querySelectorAll('.imgs');
imgs.forEach((item,key) => {
item.onclick = () => {
if(flag != undefined) imgs.style.transform = 'translate(0,0) scale(1)';
let x = 540 - key * 20;
let y = 270 - key * 20;
item.style.transform = 'translate(' + x + 'px, -' + y + 'px) scale(3)';
flag = key;
}
});
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-7-7 18:16
歌词没能成功转换。你这歌词加了中文后也特别长，不合适这个版本的播放器。
哦，难怪了。谢谢你！{:4_191:} 马黑黑 发表于 2022-7-7 18:16
歌词没能成功转换。你这歌词加了中文后也特别长，不合适这个版本的播放器。
我这个算成功了吗？ 加林森 发表于 2022-7-7 18:19
我这个算成功了吗？
不成功。这类复杂的、偏长的歌词，你要整理一下，不要中文 歌词可以重新找，或干脆自己制作 马黑黑 发表于 2022-7-7 18:22
不成功。这类复杂的、偏长的歌词，你要整理一下，不要中文
好的好的。我学到经验了就行。谢谢！ 还挺，队长的这个背景很漂亮{:4_187:} 红影 发表于 2022-7-7 18:25
还挺，队长的这个背景很漂亮
谢谢红影支持！ 马黑黑 发表于 2022-7-7 18:23
歌词可以重新找，或干脆自己制作
我把中文删了，但是现在英文没有出来呢？ 加林森 发表于 2022-7-7 18:39
我把中文删了，但是现在英文没有出来呢？
你转换的歌词你看看，时间根本不对 马黑黑 发表于 2022-7-7 18:53
你转换的歌词你看看，时间根本不对
我重新去制作。 加林森 发表于 2022-7-7 20:54
我重新去制作。
转换器对歌词的适应能力是有的，但不靠谱的lrc也许也有 马黑黑 发表于 2022-7-7 21:11
转换器对歌词的适应能力是有的，但不靠谱的lrc也许也有
谢谢老黑啊。 加林森 发表于 2022-7-7 21:15
谢谢老黑啊。
你这首歌我也看了一下，有几个版本的歌词 马黑黑 发表于 2022-7-7 21:16
你这首歌我也看了一下，有几个版本的歌词
嗯嗯，是的。我就看见有三个版本的。 加林森 发表于 2022-7-7 21:23
嗯嗯，是的。我就看见有三个版本的。
你要选正确的版本 马黑黑 发表于 2022-7-7 21:24
你要选正确的版本
是的。我选的是网易的啊。
页:
[1]
2