当你老了
<style>/* 界面及音乐控制 */
.mama { left: -339.5px; width: 1275px; height: 717px; background: #eee url('https://638183.freep.cn/638183/t22/51/sea.jpg') no-repeat; position: relative; }
.goose { position: absolute; bottom: 30px; width: 200px; cursor: pointer; }
.meter { position: absolute; left: 50%; bottom: 140px; transform: rotate(-15deg); cursor: pointer; }
/* 歌词同步 */
#lrcDiv { left: 50%; top: 50%; width: 340px; height: 60px; overflow: hidden; position: absolute; padding: 8px; }
#lrcDiv ul, lrcli { margin: 0; padding: 0;}
#lrcUl { position: absolute; top: 0; }
#lrcUl li { height: 24px; font: normal 20px / 24px sans-serif; color: #64b4d5; text-shadow: 1px 1px 1px #333; list-style-type: none; }
#myplayer { outline: none; list-style-type: none; }
</style>
<div class="mama">
<div id="lrcDiv"><ul id="lrcUl"></ul></div>
<img class="goose" src="https://638183.freep.cn/638183/t22/51/goose.gif" alt="" />
<meter class="meter" min="0" max="100" low="33" high="66" optimum="80" value="0"></meter>
</div>
<audio class="aud" src="https://music.163.com/song/media/outer/url?id=1894114925.mp3" autoplay="autoplay" loop="loop"></audio>
<script>
//元素句柄
let aud = document.querySelector('.aud'),
meter = document.querySelector('.meter'),
goose = document.querySelector('.goose'),
lrcUl = document.getElementById('lrcUl');
//lrc歌词
let lrcAr=[
['0:01','词 : William Butler Yeats'],
['0: 10','曲 : 趙照'],
['0: 20','石栋颖 & 韩甜甜'],
['0:28','lrc记录 : 韩苦'],
['0:31','当你老了'],
['0:34','头发白了'],
['0:39','睡意昏沉'],
['0:45','当你老了'],
['0:49','走不动了'],
['0:52','炉火旁打盹'],
['0:56','回忆青春'],
['1:00','多少人曾爱你青春欢唱的时辰'],
['1:07','爱慕你的美丽'],
['1:10','假意或真心'],
['1:14','只有一个人还爱你虔诚的灵魂'],
['1:21','爱你苍老的脸上的皱纹'],
['1:58','当你老了'],
['2:01','头发白了'],
['2:05','睡意昏沉'],
['2:12','当你老了'],
['2:15','走不动了'],
['2:18','炉火旁打盹'],
['2:23','回忆青春'],
['2:27','多少人曾爱你青春欢唱的时辰'],
['2:33','爱慕你的美丽'],
['2:37','假意或真心'],
['2:40','只有一个人还爱你虔诚的灵魂'],
['2:47','爱你苍老的脸上的皱纹'],
['2:54','当我老了'],
['2:56','当你老了',''],
['2:58','我真希望'],
['3:00','这首歌是唱给你的']
];
//处理lrc歌词数组：时间转换成秒、歌词放入li标签
for(j=0; j<lrcAr.length; j++){
lrcAr = toSec(lrcAr);
lrcUl.innerHTML += "<li id='li" + lrcAr + "'>" + lrcAr + "</li>";
}
//lrc时间信息转为秒
function toSec(lrcTime) {
let tmpAr = lrcTime.split(':');
lrcTime = tmpAr * 60 + parseInt(tmpAr);
return lrcTime;
}
aud.addEventListener('timeupdate', () => {
let prog = 100 * aud.currentTime / aud.duration;
goose.style.transform = 'translate(' + prog * 11 + 'px)';
meter.value = prog;
//歌词同步
let tt = aud.currentTime;
for(j=0; j<lrcAr.length; j++){
if(tt > lrcAr){
if(j > 0){
let idxLast = lrcAr;
document.getElementById("li" + idxLast).style.color = "#64b4d5";
lrcUl.style.top ="-" + (j * 24 - 24) + "px"; //乘减依据: 行高设定
}
let idx = lrcAr;
document.getElementById("li" + idx).style.color = "#fff";
}
}
});
// 播放结束重置歌词样式
aud.onended = function() {
document.getElementById("li" + lrcAr).style.color = "#64b4d5";
lrcUl.style.top = 0;
this.play();
}
//音乐控制
meter.onclick = goose.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
查看代码请移步：
https://www.huachaowang.com/thread-60189-1-1.html 老黑的这个大白鹅是播放器啊。厉害厉害。{:4_199:} 还是同步的歌曲，真漂亮！{:4_190:} 加林森 发表于 2022-6-5 09:22
老黑的这个大白鹅是播放器啊。厉害厉害。
老白鹅{:4_170:} 加林森 发表于 2022-6-5 09:23
还是同步的歌曲，真漂亮！
歌词同步之前做过的吧
马黑黑 发表于 2022-6-5 09:23
老白鹅
好拽了，慢腾腾的走着，好玩。{:4_189:} 马黑黑 发表于 2022-6-5 09:24
歌词同步之前做过的吧
做过的，准备也去制作一个出来。跟你的教程去做。 加林森 发表于 2022-6-5 09:36
做过的，准备也去制作一个出来。跟你的教程去做。
这个简单的，就是代码显得多而已 加林森 发表于 2022-6-5 09:35
好拽了，慢腾腾的走着，好玩。
老了就是酱紫的 马黑黑 发表于 2022-6-5 09:37
老了就是酱紫的
是的是的 马黑黑 发表于 2022-6-5 09:37
这个简单的，就是代码显得多而已
好的好的，我去制作去了。 画面很美，海南风光。。。{:5_116:} 大鹅受伤啦？{:5_117:} 播放器又有了新的变化，有新意，有新意。
海阔天空、波光粼粼的大海画面一望无际真让人心旷神怡。 梦油 发表于 2022-6-5 10:35
播放器又有了新的变化，有新意，有新意。
海阔天空、波光粼粼的大海画面一望无际真让人心旷神怡。
海滩挺迷人的 东篱闲人 发表于 2022-6-5 09:53
画面很美，海南风光。。。
这地儿你也知道 东篱闲人 发表于 2022-6-5 09:53
大鹅受伤啦？
没有，就是老了 有趣，又是同时控制鹅和进度条，好看又有趣。嗯，一直看到鹅走完全程{:4_173:} 马黑黑 发表于 2022-6-5 10:36
海滩挺迷人的
这样的画面给人十分惬意的感受。
页:
[1]
2