邓丽君：雪中莲（测试lrc歌词转换）
本帖最后由 马黑黑 于 2022-6-17 21:31 编辑 <br /><br /><style>.mybox {
margin: auto;
position: relative;
width: 720px;
height: 460px;
overflow: hidden;
background: linear-gradient(180deg, black,silver, transparent, olive);
}
.snow {
position: absolute;
top: 0; left: 0;
width: 15px;
height: 15px;
border-radius: 50%;
background-image:
linear-gradient(0, rgba(255,255,255,0) 40%, #fff 40%, #fff 60%, rgba(255,255,255,0) 60%),
linear-gradient(45deg, rgba(255,255,255,0) 43%, #fff 43%, #fff 57%, rgba(255,255,255,0) 57%),
linear-gradient(90deg, rgba(255,255,255,0) 40%, #fff 40%, #fff 60%, rgba(255,255,255,0) 60%),
linear-gradient(135deg, rgba(255,255,255,0) 43%, #fff 43%, #fff 57%, rgba(255,255,255,0) 57%);
opacity: 0.6;
animation: fly 10s linear infinite, xie 10s ease-in infinite;
}
.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: 0 100%;
position: absolute;
}
@keyframes up {
from { top: -6px; }
to { top: -16px; }
}
@keyframes fly {
100% { top: 100%; }
}
@keyframes xie {
100% { transform: translateX(100px)rotate(360deg); }
}
</style>
<div id="mybox" class="mybox">
<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="http://chuangshicdn.data.mvbox.cn/music/yc/18/12/29/18122918524811166704.mp3" autoplay="autoplay" loop="loop"></audio>
<script language="javascript">
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.11','雪花飘'],
['4.92','演唱：邓丽君'],
['8.74','红松故乡qq:360981552'],
['12.42','LRC歌词编辑：红松故乡'],
['12.42','LRC歌词转换：花潮LRC在线'],
['16.23','雪花飘'],
['20.19','飘起了多少爱恋'],
['27.20','雪花飞'],
['30.90','飞起了多少情缘'],
['36.04','莲花开在雪中间'],
['40.51','多少的希望'],
['43.15','多少的心愿'],
['47.92','默默等待有情人'],
['53.15','但愿情意永不变'],
['58.53','雪花片片飞'],
['64.58','飞满天'],
['70.21','雪花飘'],
['74.92','演唱：邓丽君'],
['78.74','红松故乡qq:360981552'],
['79.12','LRC歌词编辑：红松故乡'],
['82.42','LRC歌词编辑：红松故乡'],
['85.91','雪花飘'],
['89.93','飘起了多少爱恋'],
['96.78','雪花飞'],
['100.69','飞起了多少情缘'],
['105.36','往事如梦似云烟'],
['110.09','多少的甜蜜'],
['112.68','多少的怀念'],
['117.30','纵然相隔那么远'],
['122.53','真情永驻在心田'],
['127.97','雪花片片飞']
];
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);
})
addsnow();
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;
}
}
})
function addsnow() {
let o = document.getElementById('mybox');
for(i=0; i<666; i++) {
var snow = document.createElement('div');
var hw = Rnd(5,20);
snow.className = "snow";
snow.style.top = Rnd(-600,-20) + "px";
snow.style.animationDelay = Rnd(0,15) + "s";
snow.style.animation.duration = Rnd( 5,12) + "s";
snow.style.width = hw + "px";
snow.style.height = hw + "px";
snow.style.left = Rnd(-100,710) + "px";
o.appendChild(snow);
}
}
function Rnd(min, max){ return Math.floor(Math.random() * (max - min + 1) + min); }
</script>
效果真好！{:4_199:} 加林森 发表于 2022-6-17 21:20
效果真好！
主要是测试一下歌词转换的效果 马黑黑 发表于 2022-6-17 21:21
主要是测试一下歌词转换的效果
嗯嗯。我会跟着学习的。 歌词不完整，应该是误删了。再转换一次 加林森 发表于 2022-6-17 21:24
嗯嗯。我会跟着学习的。
{:4_190:} 醉美水芙蓉 发表于 2022-6-17 21:30
有这个太好了！不用那么辛苦制作了！黑黑老师真厉害！
现在还在测试中 马黑黑 发表于 2022-6-17 21:28
谢茶！ 第一次听到黑黑发这么柔情的歌曲，随着雪花飘飘，让人想入非非{:4_170:} 小辣椒 发表于 2022-6-17 21:43
第一次听到黑黑发这么柔情的歌曲，随着雪花飘飘，让人想入非非
这歌，这场景，本来就发过一次的。本次测试用 花潮lrc在线 的转换程序将常规lrc转成花潮格式 马黑黑 发表于 2022-6-17 21:54
这歌，这场景，本来就发过一次的。本次测试用 花潮lrc在线 的转换程序将常规lrc转成花潮格式
这个不是最后版本吧 小辣椒 发表于 2022-6-17 21:56
这个不是最后版本吧
使用我还在测试的程序做的 花潮lrc在线 ，这个名字好。又见纯代码的雪花，真美啊{:4_187:} 红影 发表于 2022-6-17 22:21
花潮lrc在线 ，这个名字好。又见纯代码的雪花，真美啊
测试用的，懒得做新帖 马黑黑 发表于 2022-6-17 22:22
测试用的，懒得做新帖
其实歌词背景不一定做成树叶呢，方框的应该也挺好看的吧{:4_173:} 红影 发表于 2022-6-18 08:26
其实歌词背景不一定做成树叶呢，方框的应该也挺好看的吧
嗯，只是玩玩 马黑黑 发表于 2022-6-18 09:10
嗯，只是玩玩
看到这个雪花，想起黑黑还做过纯代码的雨丝加涟漪呢{:4_187:} 红影 发表于 2022-6-18 09:16
看到这个雪花，想起黑黑还做过纯代码的雨丝加涟漪呢
那是以前的事儿了。好汉不提当年勇 马黑黑 发表于 2022-6-18 09:17
那是以前的事儿了。好汉不提当年勇
反正黑黑用纯代码模拟了好多东西，都很棒的{:4_187:}
页:
[1]
2