三月的阳光 发表于 2023-5-21 11:08:47

《生日快乐》to筱曦

<div class="t_fsz">
<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_1892885">
<br /><br /><style>
#papa {
        margin: 70px -250px;
        width: 1164px;
        height: 640px;
        box-shadow: 1px 1px 0px #000;
background:lightgreenurl('https://img-baofun.zhhainiao.com/fs/scene/preview_img_raw/663bf23e7639740c41045affdbb1ea27_preview_raw.jpg')no-repeat center/cover;
        position: relative;
        display: grid;
        place-items: center;
        z-index: 1;
}
#canv {filter:hue-rotate(0deg)contrast(140%)brightness(80%);
        position: absolute;
        display: block;
        height: 100%;
        position: relative;
        cursor: pointer;
        z-index: 2;
}
#vid { display: none; }


#mypic {top:80%; left:72%;z-index: 30;
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: 50px; top: 20px; z-index: 4; color:#FF0000; font: bold 30px/20px 'FangSong',serif;opacity: .8; }

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


#fullscreen { position: absolute; top:2%; left:85%;color:#FF0000; font: normal 2.0em华文隶书; 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.tukuppt.com/video_show/2475824/00/02/15/5b5567a109822.mp4" autoplay loop muted></video>
        <img id="mypic" src="https://pic.imgdb.cn/item/639c602fb1fccdcd36980aad.png" alt="" />
      <div class="wenzi">筱曦生日快乐</div>

<div data-lrc="三月的阳光" id="lrc">三月的阳光</div>

</div>

<audio id="aud" src="http://music.163.com/song/media/outer/url?id=497918887.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: 40;
        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 = `
生日祝福歌

祝筱曦生日快乐


祝你生日快乐
祝你生日快乐
祝你生日快乐
祝你生日快乐
今天你生日
送上我祝福
特别的日子有灿烂的笑容
我们来相聚
带着满满的关爱
祝福你好运常伴
点燃了蜡烛
许下你心愿
未来的日子每个梦想都实现
唱首祝福歌
我们相亲又相爱
祝福你健康平安
对所有的烦恼说 bye bye
对所有的快乐说 hi hi
亲爱的亲爱的生日快乐
每一天都精彩
看幸福的花儿为你盛开
听美妙的音乐为你喝彩
亲爱的亲爱的生日快乐
祝你幸福永远
幸福永远
点燃了蜡烛
许下你心愿
未来的日子每个梦想都实现
唱首祝福歌
我们相亲又相爱
祝福你健康平安
对所有的烦恼说 bye bye
对所有的快乐说 hi hi
亲爱的亲爱的生日快乐
每一天都精彩
看幸福的花儿为你盛开
听美妙的音乐为你喝彩
亲爱的亲爱的生日快乐
祝你幸福永远
幸福永远
生日快乐
生日快乐
生日快乐
对所有的烦恼说 bye bye
对所有的快乐说 hi hi
亲爱的亲爱的生日快乐
每一天都精彩
看幸福的花儿为你盛开
听美妙的音乐为你喝彩
亲爱的亲爱的生日快乐
祝你幸福永远
幸福永远
`;

/*变量 ：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>
</td></tr></table>

三月的阳光 发表于 2023-5-21 11:16:12

@筱曦筱曦妹妹 生日快乐~~{:1_90:}{:1_89:}

幽兰雪 发表于 2023-5-21 16:10:12

筱曦妹妹生日快乐！{:2_111:}{:2_193:}

三月的阳光 发表于 2023-5-21 18:53:55

{:1_92:} {:1_92:} {:1_90:} {:1_90:} {:1_89:} {:1_89:}

大雅 发表于 2023-5-21 20:18:22

问好三月老师。曦宝生日快乐{:2_196:}歌曲联唱

三月的阳光 发表于 2023-5-21 22:07:04

大雅 发表于 2023-5-21 20:18
问好三月老师。曦宝生日快乐歌曲联唱

哈哈，大雅好久不见，问好并祝周末快乐~~{:1_90:}{:1_90:}

非常开心 发表于 2023-5-22 08:51:15

祝筱曦老师生日快乐！
页: [1]
查看完整版本: 《生日快乐》to筱曦