论坛 › 欢乐水吧 › 片片相思赋予谁 - 晓依

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

片片相思赋予谁 - 晓依

本帖最后由 醉美水芙蓉 于 2023-6-25 22:22 编辑 <br /><br /><style>
#papa {
        margin: 20px-300px;
        width: 1164px;
        height: 640px;
        box-shadow: 1px 1px 0px #000;
background:lightgreenurl('https://pic.imgdb.cn/item/64984d611ddac507ccbbaefc.png')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="http://chuangshicdn.data.mvbox.cn/music/sp/21/09/07/21090721042522262397.mp4" autoplay loop muted></video>
        <img id="mypic" src="https://pic.imgdb.cn/item/63e640e64757feff339cac44.png" alt="" />
      <div class="wenzi">片片相思赋予谁 - 晓依</div>

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

</div>

<audio id="aud" src="https://pan.111t.net/view.php/ef8ece8fe37e1b4a352cf86e9aebdd3d.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 = `
片片相思赋予谁 - 晓依
词：冰吻
曲：晓依
演唱：晓依
后期：吴喜浩
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-25 22:24

活灵活现的美人儿，画儿一样{:4_199:}

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

南无月 发表于 2023-6-25 22:24
活灵活现的美人儿，画儿一样

一个朋友博客里看到的，我把她下载下来保存的！

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

水芙蓉美女这个帖子好，暂停能让视频真的跟着暂停，能看到帖中美女的各种姿态呢。很赞{:4_199:}

樵歌 发表于 2023-6-26 07:51

我想你朋友那视频绝对没有你再加工过后的美！

岩新新 发表于 2023-6-26 11:10

分享精彩制作！

醉美水芙蓉 发表于 2023-6-26 11:46

红影 发表于 2023-6-25 23:23
水芙蓉美女这个帖子好，暂停能让视频真的跟着暂停，能看到帖中美女的各种姿态呢。很赞

谢谢红影点评！

醉美水芙蓉 发表于 2023-6-26 11:47

樵歌 发表于 2023-6-26 07:51
我想你朋友那视频绝对没有你再加工过后的美！

谢谢樵歌欣赏点评！

醉美水芙蓉 发表于 2023-6-26 11:47

岩新新 发表于 2023-6-26 11:10
分享精彩制作！

谢谢岩新老师欣赏支持！

南无月 发表于 2023-6-26 20:21

醉美水芙蓉 发表于 2023-6-25 22:26
一个朋友博客里看到的，我把她下载下来保存的！

太棒了，看来你玩博客的哦

醉美水芙蓉 发表于 2023-6-26 20:42

南无月 发表于 2023-6-26 20:21
太棒了，看来你玩博客的哦

我玩得少，感觉月儿以前肯定在哪儿玩过？

南无月 发表于 2023-6-26 20:44

醉美水芙蓉 发表于 2023-6-26 20:42
我玩得少，感觉月儿以前肯定在哪儿玩过？

博客没玩过呀，只在论坛混过一阵子

醉美水芙蓉 发表于 2023-6-26 20:45

南无月 发表于 2023-6-26 20:44
博客没玩过呀，只在论坛混过一阵子

你在哪个论坛玩的呀？

南无月 发表于 2023-6-26 20:47

醉美水芙蓉 发表于 2023-6-26 20:45
你在哪个论坛玩的呀？

啊，之前的都关了啊，有个叫漫步人生的。现在在这里玩。{:4_173:}

梦缘 发表于 2023-6-26 20:48

问好老师，欣赏精彩佳作，谢谢分享！{:4_187:}

红影 发表于 2023-6-26 21:09

醉美水芙蓉 发表于 2023-6-26 11:46
谢谢红影点评！

这个好像全屏欣赏的时候，视频没有放大呢。{:4_204:}

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

红影 发表于 2023-6-26 21:09
这个好像全屏欣赏的时候，视频没有放大呢。

是的！没有针对视频放大！没有学会呢？

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

梦缘 发表于 2023-6-26 20:48
问好老师，欣赏精彩佳作，谢谢分享！

谢谢老师支持！

红影 发表于 2023-6-26 21:45

醉美水芙蓉 发表于 2023-6-26 21:28
是的！没有针对视频放大！没有学会呢？

好像水芙蓉做过连视频一起放大的啊{:4_204:}

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

红影 发表于 2023-6-26 21:45
好像水芙蓉做过连视频一起放大的啊

我是基础不好，一会儿会是巧合吧？没有真正体会代码怎么使用呢？

查看完整版本: 片片相思赋予谁 - 晓依