首页 › 音画作品 › 希希 - 诺言 (DJ小蒋版)

亚伦影音工作室 发表于 2023-11-24 16:27

希希 - 诺言 (DJ小蒋版)

本帖最后由 亚伦影音工作室 于 2023-11-24 16:29 编辑 <br /><br /><style>
#papa {margin: 10px -150px;
        width: 1164px;
        height: 640px;
        background:#000000;
        box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #880000;
        position: relative;overflow: hidden;
        z-index: 12345;
}

#vid { position: absolute; width: 100%; height: 100%; top:0%; object-fit: cover; pointer-events: none;opacity: 1;z-index: 1; transition: 0.1s all ease;mix-blend-mode: lighten; }
#vid1 { position: absolute; width: 100%; height: 100%; top:0%; object-fit: cover; pointer-events: none;opacity: 1;z-index: -1; transition: 0s all ease;filter:hue-rotate(10deg)contrast(160%)brightness(100%);}
#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">希希 - 诺言 (DJ小蒋版)</div></di>
<video id="vid"src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/6d5e65d5535209ab6e36dc73596bbb1b_preview.mp4" muted autoplay loop></video>
<video id="vid1"src="https://www.kumeiwp.com/sub/filestores/2023/03/22/87153159ea9da2ef61da7c2216d95587.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:#000000;text-align:right;font-weight: ;font-family:华文隶书;font-size: 40px;"></P>
</div>
</div>
<audio id="aud" src="https://aod.cos.tx.xmcdn.com/storages/042c-audiofreehighqps/DE/C0/GKwRIUEJMngWACAAAAKAkmBS.m4a" loop autoplay></audio>
<script >
var songkrc =`
希希 - 诺言 (DJ小蒋版)
作词：丁晓雯
作曲：刘天健
无奈人在风里
人在雨里
人在爱的岁月里漂流
你我不能重头
不能停留
不能抗拒命运左右
就这样松开紧握的手
熄灭为爱点亮的灯火
让爱走
让爱拥有自己的自由
我不明白这世界为什么
会让我感到那么多伤悲
我不知道相爱的两个人
留不住一个褪色的诺言
我不了解沧海桑田
能将一切相信的事改变
我不相信付出过的真心
要收回就能收回
我不明白人世间的聚散
只因为我们所谓的缘分
我不知道这是你的借口
还是我把爱想得太天真
我不了解天长地久
要用这么多的寂寞来等
是你让我的心痛
一天比一天深
无奈人在风里
人在雨里
人在爱的岁月里漂流
你我不能重头
不能停留
不能抗拒命运左右
想挣脱为爱戴的枷锁
熄灭为爱点亮的灯火
一个破碎的圆
破碎的梦
留它有什么用
喔
无奈人在风里
人在雨里
人在爱的岁月里漂流
你我不能重头
不能停留
不能抗拒命运左右
就这样松开紧握的手
熄灭为爱点亮的灯火
让爱走
让爱拥有自己的自由
我不明白人世间的聚散
只因为我们所谓的缘分
我不知道这是你的借口
还是我把爱想得太天真
我不了解天长地久
要用这么多的寂寞来等
是你让我的心痛
一天比一天深
无奈人在风里
人在雨里
人在爱的岁月里漂流
你我不能重头
不能停留
不能抗拒命运左右
想挣脱为爱戴的枷锁
熄灭为爱点亮的灯火
一个破碎的圆
破碎的梦
留它有什么用
喔
无奈人在风里
人在雨里
人在爱的岁月里漂流
你我不能重头
不能停留
不能抗拒命运左右
就这样松开紧握的手
熄灭为爱点亮的灯火
让爱走
让爱拥有自己的自由
`;
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');
vid1=document.querySelector('#vid1');
mplayer.onclick =function() { aud.paused ?(vid.play(),vid1.play()): (vid.pause(),vid1.pause()) };
/*结束*/


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>

liumang 发表于 2023-11-24 16:31

漂亮{:5_150:}{:5_150:}

liumang 发表于 2023-11-24 16:33

同一首，赞的{:5_150:}

查看完整版本: 希希 - 诺言 (DJ小蒋版)