《家乡的小河》
本帖最后由 翁奕童苑 于 2022-6-20 20:33 编辑 <br /><br /><p></p><div class="t_fsz">
<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_1614643">
<style>
/* 帖子外层 */
.outer { left: -180px; width: 960px; height: 600px; background: #ccc url('https://img-baofun.zhhainiao.com/fs/7d2509ab465a738161b4013c7c12571c.jpg') no-repeat center / cover; overflow: hidden;border-radius:10%; position: relative; }
/* 视频 */
.vid { position: absolute; top: -10px; width:960px; height: 600px; object-fit: cover; opacity: .25; }
/* 频谱+进度外层 */
.mama { left: 20px; bottom: 40px; width: fit-content; height: fit-content; position: absolute; 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(320px, 500px); font: bold 2.2em / 2.6em sans-serif; color: #f00; text-shadow: 1px 1px 1px #fff; position: absolute; }
/* 频谱顶帽动画 */
@keyframes up { from { top: -6px; } to { top: -16px; } }
</style>
<div class="outer">
<video class="vid" src="https://video.699pic.com/videos/59/82/45/a_y7Pp34b1rZzN1558598246.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=562431089.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.00','《家乡的小河》'],
['12.36','词/阿古拉泰 曲/斯琴朝克图'],
['23.45','演唱/查森娜'],
['34.42','你常常从我的梦中流过'],
['43.88','那哗啦啦的流水 唱着甜甜的歌谣'],
['53.53','那慢悠悠的小船是我童年的摇车'],
['63.09','在你的怀里我就像鱼儿一样快乐'],
['72.27','啊 啊 家乡的小河'],
['82.31','心中的小河 清清的小河'],
['92.10','你奔腾的脚步就是我深情地诉说'],
['106.38','深情地诉说'],
['112.38','LRC字幕制作/翁奕童苑'],
['140.14','你永远在我的心中流着'],
['149.52','那春天里的蛙鸣 是否已经停歇'],
['159.21','那夕阳中的欢笑 如今在哪里停泊'],
['168.74','岸边的垂柳为什么像妈妈那样沉默'],
['177.58','啊 啊 家乡的小河'],
['187.85','心中的小河 清清的小河'],
['197.52','你奔腾的脚步就是我深情地诉说'],
['211.95','深情地诉说'],
['216.20','啊 啊 家乡的小河'],
['226.28','心中的小河 清清的小河'],
['235.89','你奔腾的脚步就是我深情地诉说'],
['250.43','深情地诉说'],
['257.58','家乡的小河'],
['275.58','谢谢欣赏']
];
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>
</td></tr></table>
<p> </p> 王东雨的歌唱的有气势 马黑黑 发表于 2022-6-19 13:08
王东雨的歌唱的有气势
谢谢鼓励！ 翁奕童苑 发表于 2022-6-19 13:10
谢谢鼓励！
{:5_108:} 醉美水芙蓉 发表于 2022-6-19 14:06
欣赏老师佳作！
谢谢鼓励！ 不错不错。歌曲好听。 这条小河的视频很美，水流很急。歌词同步和动画唱片的制作都很美。欣赏翁奕童苑好帖{:4_199:} 加林森 发表于 2022-6-19 14:56
不错不错。歌曲好听。
谢谢鼓励！ 红影 发表于 2022-6-19 17:17
这条小河的视频很美，水流很急。歌词同步和动画唱片的制作都很美。欣赏翁奕童苑好帖
谢谢鼓励！ 翁奕童苑 发表于 2022-6-19 18:06
谢谢鼓励！
不客气。 翁奕童苑 发表于 2022-6-19 18:06
谢谢鼓励！
问好翁奕童苑，新周快乐{:4_187:}
页:
[1]