论坛 › 欢乐水吧 › 回望人生路

醉美水芙蓉 发表于 2023-5-15 22:02

回望人生路

本帖最后由 醉美水芙蓉 于 2023-5-16 21:08 编辑 <br /><br /><style>
#papa {
        margin: 100px -300px;
        width: 1164px;
        height: 640px;
        box-shadow: 1px 1px 0px #000;
background:lightgreenurl('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/live/8964347fee30a6b77120e1773c014631.mp4.jpg')no-repeat center/cover;
        position: relative;
        display: grid;
        place-items: center;
        z-index: 1;
}
css-doodle { position: absolute; }
#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; }
.wenzi { position: absolute; left: 76%; top: 10.5%; z-index: 4; color:#cccccc; font: bold 20px/20px 'FangSong',serif;opacity: 1; }
#papa:hover #fullscreen { display:block ;}
#fullscreen { position: absolute; top:4%; left:3%;color:#FFffff; filter:drop-shadow( 1px 1px 1px #000000);font: normal 2emFangSong; opacity: 1; cursor: pointer; z-index: 4}
</style>

<div id="papa">
<span id="fullscreen">全屏观赏</span>
        <canvas id="canv"></canvas>
        <css-doodle grid="6" id="mypic">
          :doodle { top:2%; left:70%;
                @grid: 2 / 300px 60px;
                position: absolute;z-index: 10;
                color: var(--color);
            transform: scale(1);
                --prog: 0%; --size: 40px; --ttmsg1: '00:00'; --ttmsg2: '00:00'; --color:#ffffff; --state: paused;
      }
      /* 时间信息 : 左 */
      @nth(1) {
                @place: 10% 125%;
                :after { content: var(--ttmsg1); }
      }
      /* 控制器 */
      @nth(2) {
                @size: var(--size);
                @shape: windmill; position: absolute;z-index: 10;
                @place: 50% 35%;
                background: var(--color);
                animation: rot 6s infinite linear var(--state);
      }
      /* 时间信息 : 右 */
      @nth(3) {
                @place: 90% 125%;
                :after { content: var(--ttmsg2); }
      }
      /* 进度条 */
      @nth(4) { position: absolute;z-index: 11;
                @place: 50% 80%;
                @size: 60% 2px;
                background: #aaaaaa;
               display: grid;
                place-items: center start;
                :before {
                        content: '';
                        width: var(--prog);
                        height: 100%;
                        background: var(--color);
                }
      }
      @keyframes rot { to { transform: rotate(1turn); } }

        </css-doodle>
        <video id="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/12c7db56a08606e345bd12fed1e53635_preview.mp4" autoplay loop muted></video>
           <div class="wenzi">回望人生路</div>
   <div data-lrc="" id="lrc"></div>
</div>
<audio id="aud" src="https://www.qqmc.com/mp3/music272772245.mp3" autoplay loop></audio>
<script>
(function(){
        let script = document.createElement('script');
        script.src = 'https://unpkg.com/css-doodle@0.34.9/css-doodle.min.js';
        document.head.appendChild(script);
let mState = () => aud.paused ? ( papa.style.setProperty('--state', 'paused')) : ( papa.style.setProperty('--state', 'running'));
aud.addEventListener('play', mState, false);
        aud.addEventListener('pause', mState, false);
       aud.addEventListener('seeked', () => calcKey());
       
})();

(function() {
      let clickIdx = 0, progChg = 0, cursors = ['default','pointer','pointer'];
      let script = document.createElement('script');
      script.src = 'https://638183.freep.cn/638183/web/api/css-doodle.js';
      document.head.appendChild(script);
      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 = () => mypic.style.setProperty('--state', aud.paused ? 'paused' : 'running');
      aud.addEventListener('play', mState, false);
      aud.addEventListener('pause', mState, false);
      aud.addEventListener('timeupdate', () => {
               mypic.style.setProperty('--ttmsg1', `'${toMin(aud.currentTime)}'`);
                mypic.style.setProperty('--ttmsg2', `'${toMin(aud.duration)}'`);
               mypic.style.setProperty('--prog',`${100 * aud.currentTime / aud.duration}%`)
      });

      mypic.onclick = () => {
                if(clickIdx === 1) aud.paused ? aud.play() : aud.pause();
                if(clickIdx === 2) aud.currentTime = progChg;
      }
      mypic.onmousemove = (e) => {
                let size = parseInt(window.getComputedStyle(mplayer).getPropertyValue('--size')), ww = mypic.offsetWidth, hh =mypic.offsetHeight;
                clickIdx = e.offsetY > hh/1.5 ? 2 : (e.offsetX > (ww - size)/2 && e.offsetX < (ww + size)/2 && e.offsetY < hh/1.5 ? 1 : 0);
                mypic.style.cursor = cursors;
                if(clickIdx > 1) progChg = aud.duration * e.offsetX / ww;
      }
})();
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());
let fs = true;
        fullscreen.onclick = () => {
                fs ? (fullscreen.innerText = '退出全屏',papa.requestFullscreen()) : (fullscreen.innerText = '全屏观赏', document.exitFullscreen());
                fs = !fs;
        };
</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 = `
00:00.00]孙艺琪 - 回望人生路
作词：力子
作曲：刘亦敏
编曲：孙培喜
和声：凌菲
混音：阿ken
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); /*获得歌词数组*/
})();
</script>

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

还以为还是雨夜那样多的两个播放器呢，原来是另外加的动图。这个制作真漂亮，欣赏水芙蓉好帖{:4_199:}

亦是金 发表于 2023-5-15 22:31

问好醉美水芙蓉！{:4_187:}制作漂亮，欣赏学习了！打算模仿套用一个玩玩！{:5_106:}

南无月 发表于 2023-5-15 22:43

太美了，很是喜欢{:4_187:}

罗浮梦 发表于 2023-5-15 22:59

太棒了，赞一个

焱鑫磊 发表于 2023-5-15 23:07

欣赏！{:4_204:}

醉美水芙蓉 发表于 2023-5-15 23:13

红影 发表于 2023-5-15 22:22
还以为还是雨夜那样多的两个播放器呢，原来是另外加的动图。这个制作真漂亮，欣赏水芙蓉好帖

谢谢红影美女支持！

醉美水芙蓉 发表于 2023-5-15 23:14

亦是金 发表于 2023-5-15 22:31
问好醉美水芙蓉！制作漂亮，欣赏学习了！打算模仿套用一个玩玩！

谢谢老师支持！

醉美水芙蓉 发表于 2023-5-15 23:14

南无月 发表于 2023-5-15 22:43
太美了，很是喜欢

谢谢朋友支持！

醉美水芙蓉 发表于 2023-5-15 23:15

罗浮梦 发表于 2023-5-15 22:59
太棒了，赞一个

谢谢朋友支持！

醉美水芙蓉 发表于 2023-5-15 23:15

焱鑫磊 发表于 2023-5-15 23:07
欣赏！

谢谢朋友支持！

梦油 发表于 2023-5-16 09:56

欣赏佳作，问候芙蓉。

梦缘 发表于 2023-5-16 10:15

制作精美，欣赏问好！{:4_204:}

醉美水芙蓉 发表于 2023-5-16 11:43

梦油 发表于 2023-5-16 09:56
欣赏佳作，问候芙蓉。

谢谢老师支持！

醉美水芙蓉 发表于 2023-5-16 11:44

梦缘 发表于 2023-5-16 10:15
制作精美，欣赏问好！

谢谢老师支持！

雨中悄然 发表于 2023-5-16 12:38

动画做得好漂亮，恰到好处的小烟花，美{:4_187:}

梦油 发表于 2023-5-16 16:37

醉美水芙蓉 发表于 2023-5-16 11:43
谢谢老师支持！

芙蓉朋友别客气。

醉美水芙蓉 发表于 2023-5-16 17:01

雨中悄然 发表于 2023-5-16 12:38
动画做得好漂亮，恰到好处的小烟花，美

美女好久不见！

南无月 发表于 2023-5-16 17:46

醉美水芙蓉 发表于 2023-5-15 23:14
谢谢朋友支持！

{:4_173:}不客气 的

红影 发表于 2023-5-16 21:18

醉美水芙蓉 发表于 2023-5-15 23:13
谢谢红影美女支持！

水芙蓉美女好棒，这个帖子太漂亮了{:4_199:}

查看完整版本: 回望人生路