天籁之音：下雪时分

马黑黑 发表于 2022-6-16 20:36

马黑黑 发表于 2022-6-16 20:37

代码分享：
<style>
/* 帖子外层 */
.outer {
left: -214px;
width: 1024px;
height: 600px;
background: linear-gradient(to right top,black,#eee);
overflow: hidden;
position: relative;
}
/* 视频背景 */
.vid {
position: absolute;
top: -50px;
width: 100%;
height: 650px;
object-fit: cover;
}
/* 频谱+进度外层 */
.mama {
position: absolute;
left: 20px;
bottom: 40px;
width: fit-content;
height: fit-content;
cursor: pointer;
border-radius: 0 100%;
background: linear-gradient(transparent,green);
}
/* 频谱外层 */
.wrap {
width: 90px;
height: 60px;
box-reflect: below 0 linear-gradient(rgba(0,0,0,.01),#000);
-webkit-box-reflect: below 0 linear-gradient(rgba(0,0,0,.01),#000);
position: relative;
}
/* 进度显示器 */
.mama meter {
width: 90px;
position: relative;
}
/* 频谱 */
.wrap span {
width: 6px;
height: 60px;
bottom: -8px;
display: inline-block;
position: absolute;
}
/* 频谱伪元素顶帽 */
.wrap span::before {
position: absolute;
content: '';
width: inherit;
height: 3px;
background: #eee;
top: -3px;
animation: up 1s ease-in infinite;
}
/* 歌词同步显示框 */
.lrcbox {
transform: translate(20px, 20px);
font: bold 1.2em / 2em sans-serif;
color: #fff;
text-shadow: 1px 1px 1px #000;
background: black linear-gradient(transparent,tan);
border-radius: 100% 0;
position: absolute;
}
/* 频谱顶帽动画 */
@keyframes up {
from { top: -6px; }
to { top: -16px; }
}
</style>

<div class="outer">
<video class="vid" src="https://img.tukuppt.com/video_show/2421007/00/01/33/5b405cfa38460.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
<div class="mama">
<div class="wrap"></div>
<meter id="meter" value="0" min="0" max="100" low="33" high="66" optimum="70"></meter>
</div>
<div class="lrcbox">Loading ...</div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=3880911.mp3" autoplay="autoplay" loop="loop"></audio>

<script>

let mama = document.querySelector('.mama'),
wrap = document.querySelector('.wrap'),
lrcbox = document.querySelector('.lrcbox'),
aud = document.querySelector('#aud'),
meter = document.querySelector('#meter');
let num = (min, max) => Math.floor(Math.random() * (max-min+1)) + min,
prog = (tt, cc) => 100 * cc / tt;

let lrcAr = [
['0.05','歌名 : Es Ist Ein Schnee Gefallen 落雪时分'],
['0.75','作曲 : Hannes Wader'],
['2.11','演唱 : Adaro'],
['11.42','Es ist ein Schnee gefallen'],
['16.83','und es ist doch nit Zeit'],
['22.00','Man wirft mich mit dem Ballen'],
['27.54','der Weg ist mir verschneit'],
['44.08','Mein Haus hat keinen Giebel'],
['49.35','es ist mir worden alt'],
['53.65','Zerbrochen sind die Riegel'],
['59.13','mein Stübelein ist mir kalt'],
['71.35','Ach Lieb, lass dich erbarmen'],
['76.72','dass ich so elend bin'],
['81.41','Und lass mich in dein Arme'],
['86.50','So fährt der Winter hin'],
['129.28','Ich hatt\' mir erkoren'],
['134.09','ein minnigliches Leut'],
['138.57','an den hab ich verloren'],
['144.05','mein Lieb und auch mein Treu'],
['156.68','Das Liedlein sein gesungen'],
['161.44','von einem Fraeulein fein'],
['166.04','ein ander\' hat mich verdrungen'],
['171.58','dass muss ich gut la\'n sein.']
];

Array.from({length: 10}).forEach((ele,key) => {
ele = document.createElement('span');
ele.className = 'sskey';
ele.style.left = key * 6 + key * 3 + 'px';
ele.style.height = num(10,60) + 'px';
ele.style.backgroundColor = `rgba(${num(0,255)},${num(0,255)},${num(0,255)},.95)`;
wrap.appendChild(ele);
})

let sskey = document.querySelectorAll('.sskey');

mama.onclick = () => aud.paused ? aud.play() : aud.pause();

aud.addEventListener('timeupdate', () => {
Array.from(sskey).forEach((ele) => {
ele.style.height = num(10, 60) + 'px';
})
meter.value = prog(aud.duration, aud.currentTime);
let tt = aud.currentTime;
for(j=0; j<lrcAr.length; j++){
if(tt >= lrcAr){
lrcbox.innerHTML = lrcAr;
}
}
})

</script>

马黑黑 发表于 2022-6-16 20:39

都说德语合适用来骂人，用来唱歌不好听。其实这只是想当然的想象，中古时期这个德语民谣不就是天籁之音吗？

闲言不语 发表于 2022-6-16 20:41

音响坏了，只看见燕山雪花大如席！{:4_199:}

马黑黑 发表于 2022-6-16 20:43

闲言不语发表于 2022-6-16 20:41
音响坏了，只看见燕山雪花大如席！

喝茶暖暖身子{:4_190:}

闲言不语 发表于 2022-6-16 20:45

马黑黑发表于 2022-6-16 20:43
喝茶暖暖身子

正光着榜子吹空调呢，再暖会中暑的

马黑黑 发表于 2022-6-16 20:46

闲言不语发表于 2022-6-16 20:45
正光着榜子吹空调呢，再暖会中暑的
搞反季节了{:4_170:}

加林森 发表于 2022-6-16 20:48

真美的天籁之声，真的很享受。老黑这个制作真漂亮。赞！{:4_199:}

闲言不语 发表于 2022-6-16 20:49

马黑黑发表于 2022-6-16 20:46
搞反季节了

你这是六月飞雪窦娥冤！{:4_189:}

马黑黑 发表于 2022-6-16 20:50

闲言不语发表于 2022-6-16 20:49
你这是六月飞雪窦娥冤！

也是，这是中古时期的

马黑黑 发表于 2022-6-16 20:51

加林森发表于 2022-6-16 20:48
真美的天籁之声，真的很享受。老黑这个制作真漂亮。赞！

制作时简单的，就一个熊猫办公视频

加林森 发表于 2022-6-16 20:53

马黑黑发表于 2022-6-16 20:51
制作时简单的，就一个熊猫办公视频

嗯嗯。谢谢老黑告知。{:4_191:}

闲言不语 发表于 2022-6-16 20:56

马黑黑发表于 2022-6-16 20:50
也是，这是中古时期的

不会偶遇恐龙吧{:4_189:}

马黑黑 发表于 2022-6-16 21:00

闲言不语发表于 2022-6-16 20:56
不会偶遇恐龙吧

不会，还远着呢

小辣椒 发表于 2022-6-16 21:03

黑黑速度太快了，又一个{:4_187:}

小辣椒 发表于 2022-6-16 21:04

这个加了按钮了

马黑黑 发表于 2022-6-16 21:05

小辣椒发表于 2022-6-16 21:04
这个加了按钮了

按钮与歌词分离

小辣椒 发表于 2022-6-16 21:05

黑黑你家里肯定不用做家务，咋这么快的速度又一个呢{:4_170:}

马黑黑 发表于 2022-6-16 21:06

小辣椒发表于 2022-6-16 21:05
黑黑你家里肯定不用做家务，咋这么快的速度又一个呢
哪里的话？我说过我又当爸又当妈的

小辣椒 发表于 2022-6-16 21:07

马黑黑发表于 2022-6-16 21:05
按钮与歌词分离

你特意放开的？

页: [1] 2 3 4

花潮论坛's Archiver

天籁之音：下雪时分