论坛 › 欢乐水吧 › 人间惊鸿客

东篱闲人 发表于 2023-7-29 20:07

人间惊鸿客

本帖最后由 东篱闲人 于 2023-7-29 21:33 编辑 <br /><br /><table cellspacing="0" cellpadding="0"><tbody><tr><td class="t_f" id="postmessage_1936981"><br><br><style>
#papa { margin: 190px-300px; width: 1164px; height: 640px; background: url('https://pic.imgdb.cn/item/64c4fceb1ddac507ccadabea.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; z-index: 1; display: grid; place-items: center;overflow: hidden;}
#prog { position: absolute; bottom: 20px; width: 280px; height: 12px; background: linear-gradient(to right, #ffffff var(--prg), #000000 0) repeat-x 0 50% / 100% 1px; color: #ffffff; display: grid; place-items: center; --prg: 0%; --state: paused; }
#prog::before, #prog::after { position: absolute; top: -30px; }
#prog::before { content: attr(data-cu); left: 0; }
#prog::after { right: 0; content: attr(data-du); }
#slider { position: absolute; font: normal 1.5em/-1em serif;color:#ffffff;cursor: pointer;   left: var(--prg); }
#btnplay { position: absolute; top: -20px;font: normal 3.5em/0em serif;color:#ffffff;cursor: pointer; animation: rot 6s infinite linear var(--state); }
@keyframes rot { to { transform: rotate(1turn); } }
#lrc {
        --state: paused;
        --motion: cover2;
        --tt: 2s;
        --bg: linear-gradient(180deg, #880000, #880000);
        position: absolute;
        left: 50%;z-index: 20;
        transform: translate(-50%);
        top: 80%;
        font:normal 2.0em 华文隶书;
        color: #0000;
        white-space: pre;
        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{ 0% { width: 0%;letter-spacing: 15px; color:#000090; transform:perspective(300px) ;}100% { width: 350%; letter-spacing: 0px;color:#ff0000; }   }
@keyframes cover2 {0% { width: 0%;letter-spacing: 0px; color:#00ff00;}100% { width: 350%; letter-spacing:15px;color:#ff0000;transform:perspective(300px) }}
</style>

<div id="papa">
<div id="lrc" data-lrc="烟雨草堂">烟雨草堂</div>
    <div id="prog" data-cu="00:00" data-du="00:00" title="调节进度">
      <span id="btnplay" title="播放/暂停">❊</span>
      <span id="slider">➽</span>
    </div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1950323284.mp3" autoplay="" loop=""></audio>

<script>
(function() {
let toMin = (val) => { if (!val) return '00:00'; let min = parseInt(val / 60), sec = parseFloat(Math.floor(val) % 60); if(sec < 10) sec = '0' + sec; return min + ':' + sec; }
let mState = () => prog.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('pause', mState, false);
aud.addEventListener('play', mState, false);
aud.addEventListener('timeupdate', () => { prog.style.setProperty('--prg', aud.currentTime / aud.duration * 100 + '%'); prog.dataset.cu = toMin(aud.currentTime); prog.dataset.du = toMin(aud.duration); });
btnplay.addEventListener('click', () => { aud.paused ?aud.play() : aud.pause(); });
prog.onclick = (e) => aud.currentTime = e.offsetX * aud.duration / prog.offsetWidth;
})();
(function() {
/*原始lrc歌词*/
let lrcStr = `
烟雨草堂出品
代码：亚伦影音工作室
编辑：东篱闲人
配图：东篱闲人
歌手：詹雯婷

又一年春过 风吹云舒卷
微风白帆 浮光浅浅
偷得半日闲 行舟碧水间
惬意舞剑 纸上绘梦卷

我愿浪迹于三界外
不问今昔何年
也曾眷恋惊鸿一面
飞舞的画中神仙

叹人间 一去风流唯少年
将白驹轻踏 寻山海作诗篇
醉花间 几回梦中忆风月
长停洛川畔 观水中幻影翩跹

昨夜 镜花水月伴入眠
偏偏惊鸿现 泛起我心漪涟
愿岁月 如洛水徜徉心间
朝霞织星汉 叹不尽绮梦因缘

我愿浪迹于三界外
不问今昔何年
也曾眷恋惊鸿一面
飞舞的画中神仙

叹人间 一去风流唯少年
将白驹轻踏 寻山海作诗篇
醉花间 几回梦中忆风月
长停洛川畔 观水中幻影翩跹

今夜 似水流年终相见
翩翩惊鸿现 荡起我心漪涟
愿岁月 如洛水徜徉心间
朝霞织星汉 一瞬间……

翩若惊鸿 婉若游龙
荣曜秋菊 华茂春松
髣髴兮若轻云之蔽月
飘飖兮若流风之回雪

昨夜 镜花水月伴入眠
偏偏惊鸿现 泛起我心漪涟
愿岁月 如洛水徜徉心间
朝霞织星汉 叹不尽绮梦因缘

今夜 似水流年终相见
翩翩惊鸿现 荡起我心漪涟
愿岁月 如洛水徜徉心间
朝霞织星汉 一瞬间化作永远

你在我眼前 这瞬间便是永远

配唱制作人：詹雯婷
配唱制作统筹：林佩薇
歌唱指导：吴小明
Vocal录音师/编辑处理：陈志翔
Vocal录音室：BB Road Studio
Vocal制作助理：杨君颖
和声：邢琛
古筝：丁雪儿
琵琶：孟霄
器乐录音师：路大伟
器乐录音室：Risingtong Studio
混音/母带：王路遥@2496 Top Studio
企划/监制：吴德烽
宣发推广：郭耀星/王雯/袁征宇/唐浩铭
商务统筹：微梦传媒
封面摄影：吴东峻
封面修图：林佳禾/吴东峻
封面设计：Feon烽/阿梗/风轮子
音乐营销：奔奔娱乐
OP：猛犸文化
【谢谢观赏】
`;

/*变量 ：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'),btnplay.style.animationPlayState = 'paused') : (lrc.style.setProperty('--state','running'),btnplay.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>
</td></tr></tbody></table>



<div id="comment_1936981" class="cm">
</div>

<h3 class="psth xs1"><span class="icon_ring vm"></span><br></h3>
<dl id="ratelog_1936981" class="rate">
<dd style="margin:0">
<div id="post_rate_1936981"></div>
<table class="ratl">
<tbody><tr></tr></tbody></table></dd></dl>

醉美水芙蓉 发表于 2023-7-29 20:52

红影 发表于 2023-7-29 21:14

画面淡烟清新，歌词同步和播放器制作也很棒。很漂亮的制作，欣赏东篱大哥好帖{:4_199:}

东篱闲人 发表于 2023-7-29 21:20

醉美水芙蓉 发表于 2023-7-29 20:52
欣赏东篱老师精彩单图！

嗯嗯，喝水。。。{:4_190:}

东篱闲人 发表于 2023-7-29 21:21

红影 发表于 2023-7-29 21:14
画面淡烟清新，歌词同步和播放器制作也很棒。很漂亮的制作，欣赏东篱大哥好帖

这次没乱码。。。{:5_117:}

红影 发表于 2023-7-29 22:37

东篱闲人 发表于 2023-7-29 21:21
这次没乱码。。。

是啊，非常完美。{:4_205:}

东篱闲人 发表于 2023-7-30 08:01

红影 发表于 2023-7-29 22:37
是啊，非常完美。

成功盗取。。。{:5_112:}

红影 发表于 2023-7-30 09:29

东篱闲人 发表于 2023-7-30 08:01
成功盗取。。。

其实有些小零碎还是不需要的，不过这样也行，只要能正常就是成功{:4_187:}

东篱闲人 发表于 2023-7-30 12:43

本帖最后由 东篱闲人 于 2023-8-1 09:05 编辑

红影 发表于 2023-7-30 09:29
其实有些小零碎还是不需要的，不过这样也行，只要能正常就是成功
嗯，那俺就看不懂了，俺们只看表象。。。。

红影 发表于 2023-7-30 22:19

东篱闲人 发表于 2023-7-30 12:43
嗯，那俺就看不懂了，暧昧只看表象。。。。

咋还有暧昧的事啊{:4_170:}

千羽 发表于 2023-7-31 21:58

歌词的表现形式i很美，小小花朵播放器也很漂亮，发现东篱老师很会选美女，{:4_203:}

东篱闲人 发表于 2023-8-1 09:06

红影 发表于 2023-7-30 22:19
咋还有暧昧的事啊

俺们！这啥破输入法。。。{:5_115:}

东篱闲人 发表于 2023-8-1 09:06

千羽 发表于 2023-7-31 21:58
歌词的表现形式i很美，小小花朵播放器也很漂亮，发现东篱老师很会选美女，

瞎选。。。{:5_117:}

红影 发表于 2023-8-1 15:54

东篱闲人 发表于 2023-8-1 09:06
俺们！这啥破输入法。。。

还是觉得能让它们正常显示就好，别的也没什么大不了呢{:4_204:}

东篱闲人 发表于 2023-8-2 09:57

红影 发表于 2023-8-1 15:54
还是觉得能让它们正常显示就好，别的也没什么大不了呢

暧昧都整出来了。。。{:4_189:}

红影 发表于 2023-8-2 13:46

东篱闲人 发表于 2023-8-2 09:57
暧昧都整出来了。。。

别怕，只是真心话大吐露而已。来。喝杯酒压压惊{:4_191:}

东篱闲人 发表于 2023-8-2 17:31

红影 发表于 2023-8-2 13:46
别怕，只是真心话大吐露而已。来。喝杯酒压压惊

别瞎说。。。{:4_186:}{:4_189:}

红影 发表于 2023-8-2 20:21

东篱闲人 发表于 2023-8-2 17:31
别瞎说。。。

你都无意识打出暧昧两字了，难道不是真心话么{:4_170:}

东篱闲人 发表于 2023-8-2 20:25

红影 发表于 2023-8-2 20:21
你都无意识打出暧昧两字了，难道不是真心话么

无意还压啥惊？{:5_158:}

红影 发表于 2023-8-2 21:20

东篱闲人 发表于 2023-8-2 20:25
无意还压啥惊？

因为不小心说出真心话而惊恐啊{:4_173:}

查看完整版本: 人间惊鸿客