约会阳光 发表于 2024-12-16 21:28

Floorfiller - A*Teens


<style>

#mama { margin: 130px 0 30px calc(50% - 781px); width: 1400px; height: 760px; background:#000; box-shadow: 3px 3px 1px gray; z-index: 1; display: grid; place-items: center; overflow: hidden;position: relative; --run: running; }

#fullscreen { position: absolute; top:3%; left:88%;color:#ffffff; filter:drop-shadow( 1px 1px 1px #000000);font: normal 2.2em华文新魏; opacity: 1; cursor: pointer; z-index: 10}

#dt{ margin: -40px 0 20px calc(50% - 701px); width: 55%; height: 50%; mix-blend-mode: lighten;   z-index: -1; display: grid; place-items: center; position: absolute; }

#dt img{width: 100%; height:100%;}

#msvg { position: absolute; top: calc(50% - 35px); width: 100px; height: 100px; cursor: pointer; pointer-events: auto;animation: rot 8s linear infinite var(--run); }

#vid { position: absolute; width: 110%; height: 120%; object-fit: cover;pointer-events: none;-webkit-mask: radial-gradient(transparent 20%, red);z-index: 2; }

#prog { position: absolute; bottom: 15%; width: 350px; height: 2px; background: #eee; display: grid; place-items: center; cursor: pointer; --prog: 0%; }

#prog::before { position: absolute; content: attr(data-tt); left: -50px; right: -50px; text-align:justify; text-align-last: justify; font-size: 12px; color: white; }

#prog::after { position: absolute; content: ''; left: calc(var(--prog) - 6px); width: 12px; height: 12px; border-radius: 50%; background: red; }

@keyframes rot { to { transform: rotate(360deg); } }

#lrc {

        --state: paused;

        --motion: cover2;

        --tt: 2s;

        --bg: linear-gradient(180deg, #880000, #880000);

        position: absolute;z-index: 4;

        left: 50%;

        transform: translate(-50%);

        top: 89%;

        font:normal 3.0em SimSun;

        color: #0000;

        white-space: pre;

        -webkit-background-clip: text;

        filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);

}

#lrc::before {

        position: absolute;

        content: attr(data-lrc);

        width: 20%;

        height: 100%;

        color: transparent;

        overflow: hidden;

        white-space: pre;

        background: var(--bg);


        -webkit-background-clip: text;

        animation: var(--motion) var(--tt) linear forwards;

        animation-play-state: var(--state);

}

@keyframes cover1 { from { width: 0;transform: perspective(120px) rotateY(-90deg); } to { width: 100%;} }

@keyframes cover2{ from { width: 0; transform: perspective(120px) rotateY(90deg); } to { width: 100%;} }

</style>

<div id="mama">
<span id="fullscreen">全屏观赏</span>

<div id="dt"><img id="Img" src="https://pic.imgdb.cn/item/6562dc6bc458853aefee7156.gif" alt="" /></div>

<div data-lrc="播放器" id="lrc"></div>

        <audio id="aud" src="https://cccimg.com/view.php/87702dfb774f8fc21414ec15de1d0bb6.mp3"></audio>

        <video id="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/3729fcd598e459fe535b9917b1bc1307_preview.mp4" autoplay loop muted></video>

      <video id="vid" src="https://cccimg.com/view.php/932f6dc97649fe30d98d896cc67ef131.mp4" autoplay loop muted></video>

        <svg id="msvg"></svg>

        <div id="prog" data-tt="00:00 00:00"></div>

</div>
<script>
let fs = true;
      fullscreen.onclick = () => {
                fs ? (fullscreen.innerText = '退出全屏',mama.requestFullscreen()) : (fullscreen.innerText = '全屏欣赏', document.exitFullscreen());
                fs = !fs;
      };
</script>

<script type="module">

import draw from 'https://638183.freep.cn/638183/web/mod/svgdr.js';

import { Aud } from 'https://638183.freep.cn/638183/web/mod/audio.js';

var dr = draw.dr('msvg');

var mDatas = { pa: mama, aud: aud, btn: msvg, prog: prog, cssval: '--run' };

var audio = new Aud(mDatas);

audio.play();

var tt = 9, R = 150, r = 140, a = 360 / tt, rad = Math.PI / 180 * a, pstr = 'M150 150';

for(var i = 0; i <= tt; i ++) {

        var x1 = R + r * Math.cos(rad * i), x2 = R + r * Math.cos(rad * (i + 1)),

                y1 = R + r * Math.sin(rad * i), y2 = R + r * Math.sin(rad * (i + 1));

        pstr += `L${x1.toFixed(2)} ${y1.toFixed(2)} Q150 150,${x2.toFixed(2)} ${y2.toFixed(2)} L150 150`;

}

dr.marker('m1', 5, 5, 2.5, 2.5);

dr.circle(2.5,2.5,2.5,'red').addTo('m1');

dr.path(pstr, 'rgba(20,20,100,.3)', 'red', 2).sets({'marker-mid': 'url(#m1)', 'stroke-dasharray': '4 8'}).animate('animate', {

        attributeName: 'stroke-dashoffset',

        to: 300,

        dur: '4s',

        repeatCount: 'indefinite'

});

let mState = () => aud.paused ? image.stop():image.play();

aud.addEventListener('play', () => mState());

aud.addEventListener('pause', () => mState());

</script>

<script>

if ('getContext' in document.createElement('canvas')) {

    HTMLImageElement.prototype.play = function() {

      if (this.storeCanvas) {

            // 移除存储的canvas

            this.storeCanvas.parentElement.removeChild(this.storeCanvas);

            this.storeCanvas = null;

            // 透明度还原

            image.style.opacity = '';

      }

      if (this.storeUrl) {

            this.src = this.storeUrl;   

      }

    };

    HTMLImageElement.prototype.stop = function() {

      var canvas = document.createElement('canvas');

      // 尺寸

      var width = this.width, height = this.height;

      if (width && height) {

            // 存储之前的地址

            if (!this.storeUrl) {

                this.storeUrl = this.src;

            }

            // canvas大小

            canvas.width = width;

            canvas.height = height;

            // 绘制图片帧（第一帧）

            canvas.getContext('2d').drawImage(this, 0, 0, width, height);

            // 重置当前图片

            try {

                this.src = canvas.toDataURL("image/gif");

            } catch(e) {

                // 跨域

                this.removeAttribute('src');

                // 载入canvas元素

                canvas.style.position = 'absolute';

                // 前面插入图片

                this.parentElement.insertBefore(canvas, this);

                // 隐藏原图

                this.style.opacity = '0';

                // 存储canvas

                this.storeCanvas = canvas;

            }

      }

    };

}

var image= document.getElementById("Img");

</script>

<script >

(function() {

/*原始lrc歌词*/

let lrcStr = `

Floorfiller - A*Teens

   

Written by:Tommy Tysper/Gustav Jonsson/Markus Sepehrmanesh

   

Hey Mr DJ in case you forgot

嘿,DJ先生,怕你忘记

I came to get down So you better make it hot

我来这儿是找乐的,所以你最好使气氛热烈

Cause I can't jump around when I hear groove killers

因为我无法跳舞,当我听见唱片杀手

When I'm out sitting down it's a clear time stealer

当我坐在舞池之外,我是个十足的时间浪费者

Give me a track with a phat kind of beat

给我一首酷毙的乐曲

A groove so unique that it kicks me off my seat

一首独一无二的能使我从椅子上跳起来的曲子

Cause I won't find a mood with a new spine chiller

因为听一个凉飕飕的曲子，我无法找到感觉

When the crowd hits the room it's a true crowd thiller

当人群在舞场涌动,你是个真正的舞迷战栗者

Freeze better make it hot

最好让气氛变热

Music please blow the spot

音乐要适应场合

Play that funky music

放些粗犷的爵士乐

That is how we want it Floorfiller

我们就是想要那样的，注满舞池

That is how we need it Floorfiller

我们就是需要那样的，注满舞池

Something's outta order people in the corners

事情失去了秩序,呆在场边的人们

Don't you see it

你们看不到吗

Can't you feel it

你们感觉不到吗

Floorfiller

注满舞池

Crank up a bass that can raise up the roof

加快低音速度，我会抬高天花板

A bomb diggy drum comin' at me with a poof

来吧，用舞步打败我

Gotta boom shake the room cause we're all heat seekers

要撼动舞场，因为我们都是热力追求者

With a jam that can slam down the walls mindfreaker

我们拥挤得可以推倒墙，思想怪异者

Freeze better make it hot

最好让气氛变热

Music please blow the spot

音乐要适应场合

Play that funky music

放些粗犷的爵士乐

That is how we want it

我们就是想要那样的

Floorfiller

注满舞池

That is how we need it

我们就是需要那样的

Floorfiller

注满舞池

Something's outta order people in the corners

事情失去了秩序,呆在场边的人们

Don't you see it

你们看不到吗

Can't you feel it

你们感觉不到吗

You know by the sounds when the crowd is getting wild

通过疯狂舞迷们的吵闹，你可以知道

Hands swinging high like a chopper in the sky

挥舞的手，像飞翔的残肢断臂

But a slow bump or flow ain't the way floorfreezer

而慢速度的摇摆或舞动不合节奏，注满舞池

See the name of the game is to play crowd pleaser

这个游戏的就是要放取悦舞迷的曲子

Freeze better make it hot

最好让气氛变热

Music please blow the spot

音乐要适应场合

Play that funky music

放些粗犷的爵士乐

That is how we want it

我们就是想要那样的

Floorfiller

注满舞池

That is how we need it

我们就是需要那样的

Floorfiller

注满舞池

Something's outta order people in the corners

事情失去了秩序,呆在场边的人们

Don't you see it

你们看不到吗

Can't you feel it

你们感觉不到吗

That is how we want it

我们就是想要那样的

Floorfiller

注满舞池

That is how we need it

我们就是需要那样的

Floorfiller

注满舞池

Something's outta order people in the corners

事情失去了秩序,呆在场边的人们

Don't you see it

你们看不到吗

Can't you feel it

你们感觉不到吗



`;

/*变量 ：mKey - 当前歌词索引；mFlag ：调用关键帧动画索引；averAdd ：平均值补偿*/

let mKey = 0, mFlag = true, averAdd = 0.3;

/*函数 ：获取每句歌词用时，歌词用时若超过平均值则取平均值，最后一句歌词则取平均值*/

let lrcTime = (ar) => {

        let tmpAr = [];

        for(j = 0; j <ar.length - 1; j ++) {

                if(j !== ar.length - 1) tmpAr = parseFloat((ar - ar).toFixed(1));

        }

        let aver = parseInt(tmpAr.reduce((a,b) => a + b) / (tmpAr.length - 1)) + averAdd;

        tmpAr.push(aver);

        tmpAr.forEach((item,key) => {

                ar = item > aver ? aver : item;

        });

        return ar;

};

/*函数 ：从原始lrc歌词获取信息并存入 n*3 数组*/

let getLrcAr = (text) => {

        let lrcAr = [];

        let calcRule = ;

        for(x of text.split('\n')) {

                let ar = [];

                let re = /\d+[\.:]\d+([\.:]\d+)?/g;

                let geci = x.replace(re,'');

                if(geci) {

                        geci = geci.replace(/[\[\]\'\"\t,]s?/g,'');

                        let time = x.match(re);

                        if(time != null) {

                                for(y of time) {

                                        let tmp = y.match(/\d+/g);

                                        let sec = 0;

                                        for(z in tmp) sec += tmp * calcRule;

                                        ar = ;

                                        lrcAr.push(ar);

                                }

                        }

                }

        }

        lrcAr.sort((a,b)=> a - b);

        return(lrcTime(lrcAr));

};

/*函数 ：模拟显示同步歌词*/

let showLrc = (time) => {

        let name = mFlag ? 'cover1' : 'cover2';

        lrc.innerHTML = lrcAr;

        lrc.dataset.lrc = lrcAr;

        lrc.style.setProperty('--motion', name);

        lrc.style.setProperty('--tt', time + 's');

        lrc.style.setProperty('--state', 'running');

        mKey += 1;

        mFlag = !mFlag;

};

/*函数 ：处理当前歌词索引 mKey*/

let calcKey = () => {

        for (j = 0; j < lrcAr.length; j++) {

                if (aud.currentTime <= lrcAr) {

                        mKey = j - 1;

                        break;

                }

        }

        if (mKey < 0) mKey = 0;

        if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;

        let time = lrcAr - (aud.currentTime - lrcAr);

        showLrc(time);

};

/*格式化时间信息*/

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;

}

/*函数 ：关键帧动画状态切换*/

let mState = () => aud.paused ? (lrc.style.setProperty('--state','paused'),mplayer.style.animationPlayState = 'paused') : (lrc.style.setProperty('--state','running'),mplayer.style.animationPlayState = 'running');



/*监听播放进度*/

aud.addEventListener('timeupdate', () => {

        for (j = 0; j < lrcAr.length; j++) {

                if (aud.currentTime >= lrcAr) {

                        cKey = j;

                        if (mKey === j) showLrc(lrcAr);

                        else continue;

                }

        }

});

aud.addEventListener('pause', () => mState());/*监听暂停事件*/

aud.addEventListener('play', () => mState());/*监听播放事件*/

aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/

let lrcAr = getLrcAr(lrcStr); /*获得歌词数组*/

})();

</script >

容轩听雨 发表于 2024-12-16 22:30

嵌入的视频合场景，画面灵动，音乐优美，赞，问好老师！

约会阳光 发表于 2024-12-16 22:56

容轩听雨 发表于 2024-12-16 22:30
嵌入的视频合场景，画面灵动，音乐优美，赞，问好老师！

谢谢容轩听雨版主支持与鼓励，祝开心天天
页: [1]
查看完整版本: Floorfiller - A*Teens