论坛 › 欢乐水吧 › 再逢明月照九州

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

再逢明月照九州

<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/64ca21d71ddac507cc44b7d3.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=239566.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 = `
作词 : EDIQ
再逢明月照九州
我将闲愁酿成一壶离别的酒
夜半饮雨飘零在山那头
凡尘旧事如影随形留下词一首
若成仙 为何不愿放手
你住过的屋檐而今朝露湿透
伴随墨色绘入遥远深秋
烛影扰人自嘲身似那浮萍向东流
唤明月 融余辉淡闲愁
仲夏来临后 卷帘 唱弹 啊......
月儿弯弯照九州
几家欢乐几家愁
几家高楼饮美酒
几家流落在呀嘛在街头 在巷口
多年之后绒雪吹白你的眉头
与我擦肩城东落枫古井边
你呢喃着我们熟悉的陈词一首
陌路人 涌泪也别回头
桨声涟漪中 尘世 依旧 啊......
月儿弯弯照九州
几家欢乐几家愁
几家高楼饮美酒
几家流落在呀嘛在街头 在巷口
月儿弯弯照九州
几家欢乐几家愁
几家高楼饮美酒
几家流落在呀嘛在街头 在巷口
月弯弯 去寻仙（未婵娟）
月弯弯 故人远

`;

/*变量 ：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-8-2 19:25

好听的歌儿，漂亮的制作。欣赏东篱大哥好帖{:4_199:}

一斛珠 发表于 2023-8-2 19:27

东篱老师腻害，美美的作品

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

红影 发表于 2023-8-2 19:25
好听的歌儿，漂亮的制作。欣赏东篱大哥好帖

该喝水了。。。{:4_180:}

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

一斛珠 发表于 2023-8-2 19:27
东篱老师腻害，美美的作品

玩呗，不然玩啥？{:5_117:}

马黑黑 发表于 2023-8-2 20:41

刚去看了下地平线上的月亮，太大了

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

马黑黑 发表于 2023-8-2 20:41
刚去看了下地平线上的月亮，太大了

好！

马黑黑 发表于 2023-8-2 20:47

东篱闲人 发表于 2023-8-2 20:46
好！

升空后大小就正常了

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

马黑黑 发表于 2023-8-2 20:47
升空后大小就正常了

在哪里观月？黑黑好惬意。。。{:5_116:}

醉美水芙蓉 发表于 2023-8-2 21:08

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

东篱闲人 发表于 2023-8-2 20:10
该喝水了。。。

哈哈，这个成惯例了{:4_173:}

马黑黑 发表于 2023-8-2 21:15

东篱闲人 发表于 2023-8-2 20:52
在哪里观月？黑黑好惬意。。。

观月需待时择地

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

醉美水芙蓉 发表于 2023-8-2 21:08
欣赏老师佳作！

芙蓉喝水。。。{:4_180:}

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

红影 发表于 2023-8-2 21:09
哈哈，这个成惯例了

{:4_181:}

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

马黑黑 发表于 2023-8-2 21:15
观月需待时择地

心境。

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

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


既然是惯例，你也请{:4_180:}

东篱闲人 发表于 2023-8-2 21:51

红影 发表于 2023-8-2 21:48
既然是惯例，你也请

俺不渴。。。{:4_193:}

红影 发表于 2023-8-2 22:25

东篱闲人 发表于 2023-8-2 21:51
俺不渴。。。

那也得喝，不能破坏规矩{:4_170:}

马黑黑 发表于 2023-8-2 22:56

东篱闲人 发表于 2023-8-2 21:17
心境。

{:4_181:}

东篱闲人 发表于 2023-8-3 09:30

红影 发表于 2023-8-2 22:25
那也得喝，不能破坏规矩

别客气，你喝吧。。。

查看完整版本: 再逢明月照九州