天籁之音：下雪时分

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

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

Loading ...

马黑黑 · 发表于 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[j][0]){
lrcbox.innerHTML = lrcAr[j][1];
}
}
})
</script>

复制代码

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

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

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

音响坏了，只看见燕山雪花大如席！

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

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

喝茶暖暖身子

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

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

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

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

闲言不语发表于 2022-6-16 20:45
正光着榜子吹空调呢，再暖会中暑的

搞反季节了

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

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

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

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

你这是六月飞雪窦娥冤！

马黑黑 · 发表于 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
制作时简单的，就一个熊猫办公视频

嗯嗯。谢谢老黑告知。

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

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

不会偶遇恐龙吧

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

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

不会，还远着呢

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

黑黑速度太快了，又一个

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

这个加了按钮了

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

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

按钮与歌词分离

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

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

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

小辣椒发表于 2022-6-16 21:05
黑黑你家里肯定不用做家务，咋这么快的速度又一个呢

哪里的话？我说过我又当爸又当妈的

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

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

你特意放开的？

[原创] 天籁之音：下雪时分

请马上登录，朋友们都在花潮里等着你哦：）

评分

评分

浏览过的版块

花潮帅哥

鼠

牛

虎

兔

龙

蛇

马

羊

猴

鸡

狗

猪

多彩人生

星月交辉

奔放热烈

海样胸怀

春风拂面

火热情怀

优雅迷人

神秘浪漫

相遇之美

鹰傲苍穹

花好月圆

紫色情节

飞龙在天

王者至尊

大将风范

音画大师

天籁妙音

共看流星

风雨同行

我心永远

幸福快乐

喜乐安康

侠骨柔肠

心想事成

开朗大方

花潮管理

缤纷心情

草莓情怀

心曲飞扬

星星情怀

指尖上的流年

花潮版主

青草情怀

蝴蝶情怀

七彩绚丽

活泼开朗

女儿情怀

男儿情怀

花潮美女

心香一瓣

中秋征文