论坛 › 『天籁之音』 › 烟雨人间

非常开心 发表于 2023-3-19 20:59

烟雨人间

<div class="t_fsz">
<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_1862377">
   <br /><br /><style>
#papa {
        margin: 40px -20px;
        width: 1000px;
        height: 600px;
        box-shadow: 1px 1px 0px #000;
        position: relative;
background:#000080;
        display: grid;
        place-items: center;
        z-index: 1;
}
#canv {
        position: absolute;
        display: block;
       
        position: relative;
        cursor: pointer;
        z-index: 2;
}
#vid { display: none; }

#mypic {
        width: 580px;
        height: 380px;
        position: absolute;
        top: 20px;
        right: 30px;
-webkit-mask-image: radial-gradient(black 25% ,transparent 65%);
        cursor: pointer;
        z-index: 3;
        animation: rot 20s infinite alternate var(--state);
        --state: paused;
}
@keyframes rot { 0%{ transform:scale(0); }}
.wenzi { position: absolute; left: 10px; top: 30px; z-index: 4; color: pink; font: bold 30px/30px 'FangSong',serif;opacity: .8; }
</style>

<div id="papa">
        <canvas id="canv"></canvas>
        <audio id="aud" src="https://www.qqmc.com/mp3/music176729863.mp3" autoplay loop></audio>
        <video id="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/4221da2e515b439f93a40d723be0b381_preview.mp4" autoplay loop muted></video>
        <img id="mypic" src="https://wj1.kumeiwp.com:812/wj/bl/2023/02/02/3295f5c9ebd5f999c6bae779d2fef4c0.jpg?t=1679208327&key=f85e58058c13a7d43d88" alt="" />
      <div class="wenzi">烟雨人间 (DJ沈念版) - 海来阿木</div>

<div data-lrc="亚伦影音工作室" id="lrc">亚伦影音工作室</div>

</div>
<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: 3;
        left: 50%;
        transform: translate(-50%);
        top: 80%;
        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 = `
烟雨人间 (DJ沈念版) - 海来阿木
词：海来阿木
曲：海来阿木
编曲：曲比阿且
录音：曲比阿且
混音：张黎兵
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'),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>

</td></tr></table>


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

一抹微蓝 发表于 2023-3-19 21:08

晚上好开心，介歌好听

蜻蜓 发表于 2023-3-19 21:23

海来阿木的歌，好听

非常开心 发表于 2023-3-20 07:33

一抹微蓝 发表于 2023-3-19 21:08
晚上好开心，介歌好听

谢谢微蓝老师鼓励

非常开心 发表于 2023-3-20 07:34

蜻蜓 发表于 2023-3-19 21:23
海来阿木的歌，好听

谢谢蜻蜓老师鼓励

蜻蜓 发表于 2023-3-20 07:35

非常开心 发表于 2023-3-20 07:34
谢谢蜻蜓老师鼓励

开心老师早！

查看完整版本: 烟雨人间