论坛首页 › html音画 › Jordann - Dehors (外面)

醉美水芙蓉 发表于 2023-10-29 20:38:18

Jordann - Dehors (外面)

<style>
#papa {margin: 10px -140px;
        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;
}
#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: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:40px;position: absolute;position: absolute;left:10%;top:58%;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">Jordann - Dehors </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://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/0540a449967dc511122be6c46d14e977_preview.mp4" muted autoplay></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="http://yh.oldkids.cn/yuying/mp3/Jordann - Dehors .mp3" loop autoplay></audio>
<script >
var songkrc =` Jordann - Dehors (外面)
LRC编辑：醉美水芙蓉
La fanfare frémit au carrefour de ta forme
Martellant sa poésie diforme
C'est l'eau de vie dans la sève la conscience qui s'achève
Témoin de ta vision auditeur de ta prison
Et quand tu briseras ta cage
On ira à la foire
On tournera la page et
Tu serreras mon corps
On partira à la nage
On aura la mer à boire
Tu manques pas de courage
Alors viens jouer dehors
Alors viens jouer dehors
Je te gribouillerai des cartes comme un grand explorateur
Pour les moments ou tu t'écartes que ça te fasse moins peur
Ça t'empêche de rire ça t'impose le pire
Témoin de ta vision auditeur de ta prison
Et quand tu briseras ta cage
On ira à la foire
On tournera la page et
Tu serreras mon corps
On partira à la nage
On aura la mer à boire
Tu manques pas de courage
Alors viens jouer dehors
Et quand tu briseras ta cage
On ira à la foire
On tournera la page et
Tu serreras mon corps
On partira à la nage
On aura la mer à boire
Tu manques pas de courage
Alors viens jouer dehors
Alors viens jouer dehors
谢谢欣赏！
`;
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 j= 0; j < lyric.length; j++) { if(this.currentTime > lyric){ document.getElementById("musickrc01").innerHTML = lyric; if(j+1==lyric.length){ document.getElementById("musickrc01").innerHTML = lyric; }else{ document.getElementById("musickrc02").innerHTML = lyric;};};};};

/*暂停 播放按钮*/
(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>
<script>
(function() {
let vid1 = document.querySelector('vid1');
let mState = () => aud.paused ?vid1.pause() :vid1.play();
aud.addEventListener('pause', mState, false);
aud.addEventListener('play', mState, false);});
setInterval( () => { aud.paused ? vid1.pause() : vid1.play(); },100);
var dts = [
"https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/0540a449967dc511122be6c46d14e977_preview.mp4",
"https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/6648b5e3e5a9f07b8fffd9689c73f4a5_preview.mp4",
"https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/736fdc82634c98f0146dc7492f29fa6a_preview.mp4",
"https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/c4c773c5e33f7d0f9ccdc0db0f9f8dbf_preview.mp4",
"https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/8de5242073d6a845db945e81c1971b80_preview.mp4",
"https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/c3e0dfe58d56efa1b3922cfa3de07e1f_preview.mp4",
"https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/ccd7c236ef2fae94462eb93e5a60b79e_preview.mp4",
"https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/9c4a0b27d12cf4e2d42ec76e5161d9cd_preview.mp4",
"https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/3ccf3f47f62f1cba2480e21720fa1f74_preview.mp4"
];
var dt= document.getElementById('vid1');
var dtIdx = 1;
dt.onended = function(){
      dt.src = dts;
      dtIdx++;
      dtIdx %= dts.length;
}
</script>

夏艳妍 发表于 2024-1-5 07:24:19

这个作品漂亮！！！！

夏艳妍 发表于 2024-1-28 14:45:41

这个作品漂亮！！！！

红尘过客 发表于 2024-2-1 01:14:09

这个作品漂亮！！！！

确认过眼神 发表于 2024-2-6 08:16:09

这个作品漂亮！！！！

查看完整版本: Jordann - Dehors (外面)