今夜的雨是谁的眼泪 (DJ默涵版) - 李英【根据马黑黑代码改编】
本帖最后由 亚伦影音工作室 于 2022-6-26 22:15 编辑 <br /><br /><style>.papa { margin: 30px -120px; width: 1024px; height: 600px;box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 15px #880000; background: url(http://chuangshicdn.data.mvbox.cn/album/22/06/22/22062215012080684104.gif)0 0/100%100%; position: relative; }
.papa input { border: none; outline: none; opacity: 1; cursor: pointer; }
.papa p { margin: 0; padding: 0; }
.playbox { position: relative; left: 0px; top: 480px; padding: 10px;text-align: center;font: normal 3em sans-serif; color: #ff0000; font-family:华文隶书; overflow: hidden;filter:drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px0); z-index: 40;}
#btnplay { width: 30px; height: 30px; border-radius: 50%;position: relative; z-index: 30;}
#btnplay:hover { background: #aaa; color: #ff0000;position: relative;z-index: 30; }
.vid { position: absolute; width: 100%; height: 600px; left: 0px;top:0px; object-fit: cover; opacity: .75;z-index: 20;}
</style>
<style type="text/css">.bs{animation: slider0 0.01s linear infinite ;}
@keyframes slider0 {0%,100%{margin: 0px 0px;filter:hue-rotate(360deg)drop-shadow(0px 0px 2px #CD6600) drop-shadow(0px 0px 2px #CD6600)drop-shadow(0px 0px 2px #CD6600)brightness(100%);}50%{margin: 0px 0px;filter:hue-rotate(0deg)drop-shadow(0px 0px 2px #000090)drop-shadow(0px 0px 2px #000090)drop-shadow(0px 0px 2px #000090)brightness(100%);}}
</style>
<div class="papa">
<div class="bs"style="position: relative; left: 0px; top: 0px;z-index: 30;">
<div class="playbox">
<p id="geci">缓冲中 ... </p> </div></div>
<p style="padding: 0;margin: 490px 220px;">
<input id="btnplay" type="button" value="II" />
<input id="slider" type="range" min="0" max="100" value="0"style="width: 440px; height: 4px;padding: 0;margin: 0px 0px;position: relative;z-index: 30;" />
<span id="per" style="width: 130px; height: 6px;padding: 0;margin: 20px 0px;font-size: 20px;color: #ffffff;position: relative;z-index: 30;">0:0 | 0:0</span>
</p>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/scene/e92d85e17d878a2e08e19d3c99077a0c_preview.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
<audio id="aud" src="https://www.qqmc.com/up/kwlink.php?id=206100167.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 = [
['3.00','今夜的雨是谁的眼泪 (DJ默涵版) - 李英'],
['6.00','词：葛正花'],
['10.00','曲：春妹'],
['13.00','编曲：姜凯升 (姜山)'],
['16.00','出品：亚伦'],
['19.00','Op：亚伦影音工作室'],
['23.00','今夜的雨是谁的眼泪'],
['28.00','淅淅沥沥下的人心碎'],
['33.00','窗外的风在呼呼的吹'],
['38.00','伤心的人呀难以入睡'],
['43.00','我的悲伤在为谁沉醉'],
['48.00','有谁会在乎我的狼狈'],
['53.00','看透了世间虚假的美'],
['58.00','原来我是多情的玫瑰'],
['63.00','伤心的泪装满酒杯'],
['68.00','爱只剩下苦涩的滋味'],
['73.00','孤独的夜多想有人陪'],
['78.00','为你醉了一回又一回'],
['83.00','往事如烟物是人非'],
['88.00','是谁曾给我爱情的美'],
['93.00','谁又无情的把爱摧毁'],
['98.00','让思念的泪堆成了堆'],
['124.00','我的悲伤在为谁沉醉'],
['129.00','有谁会在乎我的狼狈'],
['134.00','看透了世间虚假的美'],
['139.00','原来我是多情的玫瑰'],
['144.00','伤心的泪装满酒杯'],
['149.00','爱只剩下苦涩的滋味'],
['154.00','孤独的夜多想有人陪'],
['159.00','为你醉了一回又一回'],
['164.00','往事如烟物是人非'],
['169.00','是谁曾给我爱情的美'],
['174.00','谁又无情的把爱摧毁'],
['179.00','让思念的泪堆成了堆'],
['184.00','让思念的泪堆成了堆']
];
slider.onmousedown = () => aud.pause();
slider.onchange = () => { aud.currentTime = slider.value * aud.duration / 120; aud.play(); }
btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing', () => btnplay.value = 'II');
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-25 17:59
不知哪里有问题？@马黑黑
正常的，亚伦应该已经弄好了 很漂亮的制作，欣赏亚伦老师好作品{:4_187:} 醉美水芙蓉 发表于 2022-6-25 18:00
老师速度好快！
嗯，亚伦熟悉JS 这个构思也不错，主要以视频为主，图片曾作为变色层，效果真挺不错的{:4_199:} 欣赏优秀作品。点赞！ 漂亮！{:5_116:} 画面美，音乐动听，做得漂亮。{:4_199:}
页:
[1]