《Toto and Alfredo》- Ennio Morricone
本帖最后由 加林森 于 2022-6-26 20:05 编辑 <br /><br /><style>.papa { left: -214px; width: 1024px; height: 600px; background: rgba(0,0,0,.4) url('https://pic.imgdb.cn/item/62b838002f25919088231339.jpg') no-repeat center / cover; overflow: hidden; box-shadow: 0 4px 24px #000; position: relative; }
.papa input { border: none; outline: none; opacity: .75; cursor: pointer; }
.papa p { margin: 0; padding: 0; }
.playbox { margin: auto; position: relative; top: 20px; padding: 10px; width: fit-content; font: normal 1em sans-serif; color: snow; background: rgba(255,255,255,.25); backdrop-filter: blur(2px); overflow: hidden; box-shadow: 1px 2px 2px #000; text-shadow: 1px 1px 1px #000; z-index: 100; }
#btnplay { width: 30px; height: 30px; border-radius: 50%; }
#btnplay:hover { background: #aaa; color: #ff0000; }
@keyframes opa { to { opacity: 0; } }
</style>
<div class="papa">
<div class="playbox">
<p id="geci" style="font-size: 1.2em">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>
<img src="https://pic.imgdb.cn/item/62b84b692f259190883c7748.jpg" alt="" style="position: absolute; top:0; left:0; width: 100%; height: 100%; animation: opa 8s infinite alternate;" />
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=5029872.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.00','Toto and Alfredo - 纯音乐'],
['60.58','歌手：Ennio Morricone'],
['100.00','愿音乐是灵魂的伴侣'],
['160.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-26 20:17 编辑
@马黑黑
电影导演与配乐大师的金牌组合
【托纳多雷&埃尼奥·莫里康内】
天堂电影院
海上钢琴师
西西里的美丽传说
【史蒂文·斯皮尔伯格&约翰·威廉姆斯】
辛德勒的名单
战马
拯救大兵瑞恩
人工智能
【宫崎骏&久石让】
天空之城
千与千寻
龙猫
哈尔的移动城堡
风之谷
起风了
【诺兰&汉斯·季默】
盗梦空间
星际穿越
敦刻尔克
蝙蝠侠黑暗骑士三部曲
【赛尔乔·莱翁内&埃尼奥·莫里康内】
美国往事
革命往事
西部往事
镖客三部曲
【北野武&久石让】
菊次郎的夏天
那年夏天，宁静的海
坏孩子的天空
花火
【弗朗西斯·福特·科波拉&尼诺·罗塔】
教父1-3
【徐克&黄霑】
梁祝
倩女幽魂
黄飞鸿
青蛇
【詹姆斯·卡梅隆&詹姆斯·霍纳】
泰坦尼克号
阿凡达
【彼得·杰克逊&霍华德·肖尔】
指环王1-3
霍比特人1-3
【吕克·贝松&艾瑞克·塞拉】
第五元素
碧海蓝天
这个杀手不太冷
【迈克尔·贝&斯蒂夫·贾布隆斯基】
变形金刚系列
【王家卫&陈勋奇】
东邪西毒
重庆森林
堕落天使
【蒂姆·伯顿&丹尼·叶夫曼】
大鱼
剪刀手爱德华
僵尸新娘
爱丽丝梦游仙境
科学怪狗
【雅克·贝汉&布鲁诺·库列斯】
海洋
微观世界
飞鸟的迁徙
喜马拉雅
【克日什托夫·基耶斯洛夫斯基&泽贝纽·普瑞斯纳】
蓝
白
红
两生花
【达伦·阿伦诺夫斯基&克林·曼瑟】
梦之安魂曲
黑天鹅
珍爱泉源
【科恩兄弟&卡特·伯韦尔】
大地惊雷
米勒的十字路
金钱帝国
【新海诚&天门】
秒速5厘米
云之彼端，约定的地方
追逐星星的孩子
【韦斯·安德森&亚历山卓·迪斯普拉特】
布达佩斯大饭店
月升王国
了不起的狐狸爸爸
【大卫·里恩&莫里斯·贾尔】
日瓦格医生
印度之行
阿拉伯的劳伦斯
【阿尔弗雷德·希区柯克&伯纳德·赫尔曼】
西北偏北
惊魂记
迷魂记
【西奥·安哲罗普洛斯&艾莲妮·卡兰德若】
雾中风景
永恒和一天
时间尘埃
养蜂人
【萨姆·门德斯&托马斯·纽曼】
美国丽人
革命之路
毁灭之路
007幽灵党
【王家卫&梅林茂】
花样年华
2046
一代宗师
【今敏&平泽进】
妄想代理人
红辣椒
千年女优
【贝纳尔多·贝托鲁奇&坂本龙一】
末代皇帝
遮蔽的天空
小活佛
这个大师还做了不少曲子呢。恭喜队长，帖子很成功{:4_187:} 红影 发表于 2022-6-26 20:04
这个大师还做了不少曲子呢。恭喜队长，帖子很成功
谢谢红影支持！{:4_204:} 这是拿奖的作品 马黑黑 发表于 2022-6-26 20:09
这是拿奖的作品
是的。 这个音乐选的太好了，我多欣赏一会。 队长这个就纯音乐吧，歌词就省略了，就当播放器了{:4_199:} 小辣椒 发表于 2022-6-26 20:32
队长这个就纯音乐吧，歌词就省略了，就当播放器了
这个是跟到老黑学习的，就是纯音乐播放器的。只是背景图片有点变化了。 梦油 发表于 2022-6-26 20:28
这个音乐选的太好了，我多欣赏一会。
嗯嗯。 加林森 发表于 2022-6-26 20:16
是的。
挺厉害的 马黑黑 发表于 2022-6-26 20:37
挺厉害的
是啊。 队长速度的啊，真棒{:4_199:} 绿叶清舟 发表于 2022-6-26 20:47
队长速度的啊，真棒
谢谢了哦。{:4_176:} 加林森 发表于 2022-6-26 20:52
谢谢了哦。
不客气了{:4_176:} 绿叶清舟 发表于 2022-6-26 20:55
不客气了
{:4_176:}干杯！ 加林森 发表于 2022-6-26 20:59
干杯！
来干了{:4_176:} 绿叶清舟 发表于 2022-6-26 21:01
来干了
好的。干杯！{:4_176:} 加林森 发表于 2022-6-26 20:07
谢谢红影支持！
问好队长，晚上好{:4_204:} 红影 发表于 2022-6-26 22:23
问好队长，晚上好
红影晚上好！我又有点早晕了，准备睡觉了。
页:
[1]
2