论坛 › 欢乐水吧 › 《今夜为你醉》李英

亚伦影音工作室 发表于 2023-10-23 12:47

《今夜为你醉》李英

本帖最后由 亚伦影音工作室 于 2023-10-23 16:40 编辑 <br /><br /><style>
#papa {margin: 10px -300px;
        width: 1164px;
        height: 640px;
        background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/c6653465e5c7ad2f2c9d6c99929dfd84.jpg)no-repeat center/cover;
        box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #880000;
        position: relative;overflow: hidden;
        z-index: 12345;
}
#mb{ position: absolute; width: 100%; height: 100%; top:0%;   opacity: 0.3;z-index: 2; background:linear-gradient(0deg, #000000 10%,#Ffffff 11%,rgba(2, 2, 2, 0) 2%,rgba(52, 152, 219, 0) 47%,rgba(2, 2, 2, 0) 90%,#Ffffff 90%,black 1%);}
#vid { position: absolute; width: 100%; height: 100%; top:20%; object-fit: cover; pointer-events: none;opacity: 1;z-index: -1; transition: 0.1s all ease;mix-blend-mode: lighten; }


#tmsg {position: absolute;z-index: 91;
      font: normal 15px sans-serif;
      color: #ffffff;
         top:93.5%;
      left:85%;}

#prog {position: absolute;z-index: 91;
      width: 76%;
      height: 0.3%;
      cursor: pointer;
         top:95%;
color: #cccccc;
box-shadow: 0px 0px 0.1px 0.1px #000000;
         left:7%;
border-radius: 2px;}
#mplayer {z-index: 80;position:absolute;top:93%;left:3%;width:30px;height:30px;filter:hue-rotate(60deg)contrast(180%)brightness(300%);}
#papa:hover #fullscreen { display:block ;opacity: 1;}
#fullscreen { position: absolute; top:95%; left:calc(95% - 15px);font: normal 1.5em/0em 楷体;color:#ffffff; opacity: 1; cursor: pointer; z-index: 111}
#wzsd1 { animation: wzsd 0.56s linear infinite ;}
@keyframes wzsd {
from {opacity: 1;filter:hue-rotate(360deg)contrast(180%)brightness(200%);}
50% {opacity: 1;}
to {opacity: 1;filter:hue-rotate(0deg)contrast(140%)brightness(100%);}}
#musickrc{width:80%;line-height:30px;position: absolute;position: absolute;left:10%;top:78%;z-index: 11;filter:drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px0);}
#musickrc span {display:block;text-align:center; }

#bt{ width: 90%; height: 60px;color: #ffffff; position: absolute; left:3%;top:5%;font-size: 20px; font-family:仿宋;z-index: 11; animation: wz 20s linear infinite ; }
.stop #bt{animation-play-state: paused;}
@keyframes wz {
50% {opacity: 1;filter:hue-rotate(0deg)contrast(100%)brightness(100%); left: 80%;}
}
</style>


<div id="papa">
<span id="fullscreen">全屏</span>



<div id="testImg"><div id="bt">《今夜为你醉》李英</div></di>
<video id="vid"src="https://www.kumeiwp.com/sub/filestores/2023/10/15/d2e637885a6d87c3a945900fb175cc5c.mp4" muted autoplay loop></video>
<div id="tmsg">00:00 | 00:00</div>
<divid="prog"></div>
<div ><img id="mplayer" src="https://638183.freep.cn/638183/t23/btn/play2.png" alt="" /></div>
<divid="musickrc" >
<divid="wzsd1"><p id="musickrc01"style="color:#880000; text-align:left;font-weight: ;font-family:华文隶书;font-size: 40px;" ></P></di>
<P id="musickrc02"style="color:#000080;text-align:right;font-weight: ;font-family:华文隶书;font-size: 40px;"></P>
</div>

</div>
<audio id="aud" src="https://www.qqmc.com/mp3/music179348678.mp3" loop autoplay></audio>

<script >
var songkrc =`《今夜为你醉》李英
词/曲：张瑞军
LRC歌词制作：亚伦
今夜我又喝醉
醉了满脸的泪水
你可知道我为何醉
都是你给的伤悲
爱情真的很累
痴情让人心儿碎
说好的今生永相随
为何你要远走高飞
今夜我为你醉
醉了流下伤心的泪
我多想忘掉你的美
才把自己灌醉
今夜我又喝醉
杯杯都是爱情的泪
你说和我永相随
为何让我为你伤悲
爱情真的很累
痴情让人心儿碎
说好的今生永相随
为何你要远走高飞
今夜我为你醉
醉了流下伤心的泪
我多想忘掉你的美
才把自己灌醉
今夜我又喝醉
杯杯都是爱情的泪
你说和我永相随
为何让我为你伤悲
今夜我又喝醉
杯杯都是爱情的泪
你说和我永相随
为何让我为你伤悲
为何让我为你伤悲
谢谢欣赏！
`;

function parseLyric(text) { var lines = text.split(/\r|\n|\r\n/),pattern = /\[\d{1,2}:\d{2}.\d{1,3}\]|\[\d{1,2}:\d{2}\]/g,result = []; while (!pattern.test(lines)) {lines = lines.slice(1); }; lines.length === 0 && lines.pop(); lines.forEach(function(v,i,a) { var time = v.match(pattern), value = v.replace(pattern,''); time.forEach(function(v1,i1,a1){ var t = v1.slice(1, -1).split(/:/); result.push(,10) * 60 + parseFloat(t), value]); }); }); result.sort(function(a, b){ return a - b;}); return result;}
var my_audio =document.getElementById("aud");var lyric = parseLyric(songkrc); my_audio.ontimeupdate = function () { for (var i = 0; i < lyric.length; i++) { if(this.currentTime > lyric){ document.getElementById("musickrc01").innerHTML = lyric; if(i+1==lyric.length){ document.getElementById("musickrc01").innerHTML =lyric; }else{ document.getElementById("musickrc02").innerHTML = lyric;};};};}; my_audio.play();
/*暂停 播放按钮*/
(function() {
var aud = document.getElementById("aud");
var img = document.getElementById("mplayer");
img.onclick = function() {
        if (aud.paused) {
                aud.play();
        } else {
                aud.pause();
        }
}
aud.addEventListener("play", function (e) {
        img.src="https://638183.freep.cn/638183/t23/btn/pause2.png";
}, false);
aud.addEventListener("pause", function (e) {
        img.src="https://638183.freep.cn/638183/t23/btn/play2.png";
}, false);})();

mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());

/*结束*/
let fs = true;
      fullscreen.onclick = () => {
                fs ? (fullscreen.innerText = '退出', papa.requestFullscreen()) : (fullscreen.innerText = '全屏', document.exitFullscreen());
                fs = !fs;
      };
/*进度条 进度时间*/
prog.onclick = (e) => {
                aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
      }
aud.addEventListener('timeupdate', () => {
               aud.addEventListener('timeupdate', () => {prog.style.background= 'linear-gradient(90deg, red, red, red ' + aud.currentTime / aud.duration * 100 + '%, snow 0)';});
                tmsg.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);

      });
let toMin = (val) => {
                if (!val) return '00:00';
                val = Math.floor(val);
                let min = parseInt(val / 60),
                        sec = parseFloat(val % 60);
                if (min < 10) min = '0' + min;
                if (sec < 10) sec = '0' + sec;
                return min + ':' + sec;
      };
/*结束*/

/*控制视频*/
vid=document.querySelector('#vid');
mplayer.onclick =function() { aud.paused ? vid.play(): vid.pause() };
/*结束*/

klok.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => klok.style.animationPlayState = 'running');
aud.addEventListener('pause', () => klok.style.animationPlayState = 'paused');
wzsd1.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => wzsd1.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>wzsd1.style.animationPlayState = 'paused');
</script>

<script>
/*控制动画*/
(function(){
var image = document.getElementById("testImg");
let mState = () => aud.paused ? (image.classList.add('stop')):(image.classList.remove('stop'));
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
})();
/*结束*/
</script>

冬天的雨 发表于 2023-10-23 12:48

看见画面上有个链接、、
https://pic.imgdb.cn/item/652d1713c458853aefa00131.gif

冬天的雨 发表于 2023-10-23 12:49

还出来了，画面这个动画没有出来的

红影 发表于 2023-10-23 14:06

也看到画面上有个图片地址，貌似还有没显示出来的图图吧{:4_173:}

红影 发表于 2023-10-23 14:07

那动态频谱最好能下来点，影响观赏美人呢。{:4_173:}
欣赏亚伦老师好帖{:4_187:}

小辣椒 发表于 2023-10-26 17:31

这个mp4的频谱效果用的非常好，节奏感强，和歌曲相配{:4_187:}

查看完整版本: 《今夜为你醉》李英