论坛 › 欢乐水吧 › 半壶纱 (3D环绕版)

醉美水芙蓉 发表于 2023-6-6 21:51

半壶纱 (3D环绕版)

本帖最后由 醉美水芙蓉 于 2023-6-6 21:51 编辑 <br /><br /><style>
#papa {
        margin: 20px -300px;
        width: 1164px;
        height: 640px;
        box-shadow: 1px 1px 0px #000;
background:lightgreenurl('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/live/bea24ded09fc9dfac1a82ec3665308be.mp4.jpg')no-repeat center/cover;
        position: relative;
        display: grid;
        place-items: center;
        z-index: 1;
}
#canv {
        position: absolute;
        display: block;
        position: relative;
        cursor: pointer;
        z-index: 2;
}
#vid { display: none; }

#mypic {top:75%; left:10%;z-index: 4;
position: absolute;
width: 100px;
height: 100px;
cursor: pointer;
animation: spin 10s infinite linearvar(--state);
--state: paused;
}
@keyframes spin {0% { transform: rotate(360deg); }
}

.wenzi { position: absolute; left: 10px; top: 30px; z-index: 4; color: pink; font: bold 30px/30px 'FangSong',serif;opacity: .8; }

#papa:hover #fullscreen { display:block ;}


#fullscreen { position: absolute; top:5%; left:80%;color:#FF0000; filter:drop-shadow( 1px 1px 1px #000000);font: normal 2em华文隶书; opacity: 1; cursor: pointer; z-index: 4}
</style>

<div id="papa">
<span id="fullscreen">全屏观赏</span>
        <canvas id="canv"></canvas>
       
        <video id="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/4f1d7af1405a4fdad454a38104a07445_preview.mp4" autoplay loop muted></video>
        <img id="mypic" src="https://pic.imgdb.cn/item/63e640e64757feff339cac44.png" alt="" />
      <div class="wenzi">刘珂矣 - 半壶纱 (3D环绕版)</div>

<div data-lrc=" " id="lrc"> </div>

</div>

<audio id="aud" src="https://www.qqmc.com/mp3/music150323454.mp3" autoplay loop></audio>
<script>
let ctx = canv.getContext('2d');
let ww = canv.width = papa.offsetWidth, hh = canv.height = papa.offsetHeight;
let loop = () => {
        ctx.drawImage(vid, 0, 0, ww, hh);
        if(!vid.paused) {
                requestAnimationFrame(loop);
                return;
        }
}
let mState = () => aud.paused ? (mypic.style.setProperty('--state', 'paused'), vid.pause()) : (mypic.style.setProperty('--state', 'running'), vid.play());
vid.addEventListener('play', loop, false);
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
mypic.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
</script>

<style type="text/css">#lrc {
        --state: paused;
        --motion: cover2;
        --tt: 2s;
        --bg: linear-gradient(180deg, #880000, #880000);
        position: absolute;z-index: 4;
        left: 50%;
        transform: translate(-50%);
        top: 85%;
        font:normal 3em 华文隶书;
        color: #000078;
        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; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
</style>
<script >
(function() {
/*原始lrc歌词*/
let lrcStr = `
刘珂矣 - 半壶纱 (3D环绕版)
作词：刘珂矣、百慕三石
作曲：刘珂矣、百慕三石
LRC编辑：醉美水芙蓉
编曲：欧中建
墨已入水 渡一池青花
揽五分红霞 采竹回家
悠悠风来 埋一地桑麻
一身袈裟 把相思放下
十里桃花 待嫁的年华
凤冠的珍珠 挽进头发
檀香拂过 玉镯弄轻纱
空留一盏 芽色的清茶
倘若我心中的山水
你眼中都看到
我便一步一莲花祈祷
怎知那浮生一片草
岁月催人老
风月花鸟 一笑尘缘了
十里桃花 待嫁的年华
凤冠的珍珠 挽进头发
檀香拂过 玉镯弄轻纱
空留一盏 芽色的清茶
倘若我心中的山水
你眼中都看到
我便一步一莲花祈祷
怎知那浮生一片草
岁月催人老
风月花鸟一笑尘缘了
倘若我心中的山水
你眼中都看到
我便一步一莲花祈祷
怎知那浮生一片草
岁月催人老
风月花鸟一笑尘缘了
怎知那浮生一片草
岁月催人老
风月花鸟一笑尘缘了
谢谢欣赏！`;

/*变量 ：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); /*获得歌词数组*/
})();


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

马黑黑 发表于 2023-6-6 21:59

{:4_199:}

南无月 发表于 2023-6-6 22:01

水芙蓉有好多漂亮姑娘{:4_187:}

醉美水芙蓉 发表于 2023-6-6 22:07

马黑黑 发表于 2023-6-6 21:59


谢谢黑黑老师光临！

醉美水芙蓉 发表于 2023-6-6 22:08

南无月 发表于 2023-6-6 22:01
水芙蓉有好多漂亮姑娘

月儿晚上好！谢谢光临支持！

马黑黑 发表于 2023-6-6 22:08

醉美水芙蓉 发表于 2023-6-6 22:07
谢谢黑黑老师光临！

{:4_190:}

红影 发表于 2023-6-6 22:15

好漂亮的制作，歌曲真的3D环绕呢，好听。欣赏水芙蓉好帖{:4_187:}

千羽 发表于 2023-6-6 22:29

芙蓉的图都挺美的，巧手儿{:4_187:}

小辣椒 发表于 2023-6-6 22:40

欣赏水芙蓉精彩是制作{:4_171:}

醉美水芙蓉 发表于 2023-6-6 22:58

红影 发表于 2023-6-6 22:15
好漂亮的制作，歌曲真的3D环绕呢，好听。欣赏水芙蓉好帖

谢谢红影美女欣赏点评！

醉美水芙蓉 发表于 2023-6-6 22:59

千羽 发表于 2023-6-6 22:29
芙蓉的图都挺美的，巧手儿

千羽美女晚上好！谢谢欣赏支持！

醉美水芙蓉 发表于 2023-6-6 23:00

小辣椒 发表于 2023-6-6 22:40
欣赏水芙蓉精彩是制作

谢谢小辣椒欣赏支持！

岩新新 发表于 2023-6-6 23:03

欣赏点赞。

醉美水芙蓉 发表于 2023-6-6 23:05

岩新新 发表于 2023-6-6 23:03
欣赏点赞。

岩新老师晚上好！

红影 发表于 2023-6-6 23:23

醉美水芙蓉 发表于 2023-6-6 22:58
谢谢红影美女欣赏点评！

问好水芙蓉，晚上好{:4_187:}

焱鑫磊 发表于 2023-6-7 00:11

{:4_199:}

樵歌 发表于 2023-6-7 07:08

音质一流，小美女可爱。{:4_189:}

梦缘 发表于 2023-6-7 09:20

精美的动画，欣赏点赞！{:4_187:}

醉美水芙蓉 发表于 2023-6-7 11:42

焱鑫磊 发表于 2023-6-7 00:11


问好朋友！

醉美水芙蓉 发表于 2023-6-7 11:43

樵歌 发表于 2023-6-7 07:08
音质一流，小美女可爱。

谢谢樵歌支持！

查看完整版本: 半壶纱 (3D环绕版)