论坛 › 欢乐水吧 › 心被填满又掏空-魏佳艺【根据黑老师代码改编】

亚伦影音工作室 发表于 2023-5-29 15:58

心被填满又掏空-魏佳艺【根据黑老师代码改编】

本帖最后由 亚伦影音工作室 于 2023-5-29 16:22 编辑 <br /><br /><style>
#papa {
        margin: 10px -300px;
        width: 1164px;
        height: 640px;
        background: url('https://file.moyublog.com/d/file/2021-10-08/ovxh0muvfla.jpg') no-repeat center/cover;
        box-shadow: 0 0 0px #000;
        position: relative;
        z-index: 1;overflow:hidden;
        --state: paused;
}
css-doodle { position: absolute; }
#fg{width: 100%;height: 100%;top:0px; left:0px;position: absolute; z-index: 2;animation: slider 3s linear infinite ;opacity: 1;}
@keyframes slider {0% { background: radial-gradient(ellipse 100% 100% at 51% 54%, rgba(0, 153, 247, 0.07) 19%,rgba(241, 23, 18, 0.91) 86%); } 50% {background: url(https://www.kumeiwp.com/sub/filestores/2022/11/21/8cc174354eb646c775ac6beaa058a5b3.png) 0 0/100% 100%;100%} { background: radial-gradient(ellipse 100% 100% at 51% 54%, rgba(0, 153, 247, 0.07) 19%,rgba(18, 181, 441, 0.91) 86%);} }

#lrc {
        --state: paused;
        --motion: cover2;
        --tt: 2s;
        --bg: linear-gradient(180deg, #880000, #ff0000, #80ef03);
        position: absolute;z-index: 8;
        left: 50%;
        transform: translate(-50%);
        top: 85%;
        font:normal 3em 华文行楷;
        color: #055306;
        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%; } }
#papa:hover #fullscreen { display:block ;}
#fullscreen { position: absolute; top:2%; left:5%;color:#FFffff; font: normal 2.2em华文行楷; opacity: 1; cursor: pointer; z-index: 9}
</style>

<div id="papa">
<span id="fullscreen">全屏观赏</span>
      <div id="lrc" data-lrc="花潮lrc在线">花潮lrc在线</div>
<div id="fg"></div>
<css-doodle grid="1" id="mplayer">
        :doodle {
                @size: 100% 100%;
                position: absolute;z-index: 7;
                --state: paused;
        }
        @size: 120px 120px;
        position: absolute;z-index: 7;
background: url('https://www.yiyuen.com/e/file/view/588958') no-repeat center/cover;
        animation: move 20s infinite linear var(--state);
        cursor: pointer;
        @keyframes move { 0% { left: 0%;top:280px;transform:rotate(0deg)scale(1)} 30%{left: 80%;top:100px;transform:rotate(360deg)scale(1);}60%{left:60%;top:200px;transform:rotate(0deg)rotateY(0deg)scale(1)}100%{left: 0%;top:300px;transform:rotate(180deg)rotateY(0deg)scale(1)}}
</css-doodle>

</div>
<audio id="aud" src="https://www.qqmc.com/mp3/music276894935.mp3" autoplay="autoplay" loop="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 = () => mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');
        aud.addEventListener('play', mState, false);
        aud.addEventListener('pause', mState, false);
        mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
fg.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>fg.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>fg.style.animationPlayState = 'paused');

</script>

<script >
(function() {
/*原始lrc歌词*/
let lrcStr = `
心被填满又掏空-魏佳艺
作词：余云飞
作曲：余云飞
编曲：关剑
出品：亚伦
已有很久没再抱拥
唯有梦里才有触碰
曾经在风里 抢着去挡风
此刻心事你却不懂
自从我失去你的宠
时常都把眼眶哭红
昨夜在雨后 你消失无踪
带走所有你给的感动
心被你填满 又被你掏空
转身之前说了句保重
丢我在南北 你去了西东
除了梦里无法再相逢
心被你填满 又被你掏空
爱过之后留下了裂缝
当回忆冷风 吹醒我的梦
想哭只能抬头望天空
自从我失去你的宠
时常都把眼眶哭红
昨夜在雨后 你消失无踪
带走所有你给的感动
心被你填满 又被你掏空
转身之前说了句保重
丢我在南北 你去了西东
除了梦里无法再相逢
心被你填满 又被你掏空
爱过之后留下了裂缝
当回忆冷风 吹醒我的梦
想哭只能抬头望天空
心被你填满 又被你掏空
转身之前说了句保重
丢我在南北 你去了西东
除了梦里无法再相逢
心被你填满 又被你掏空
爱过之后留下了裂缝
当回忆冷风 吹醒我的梦
想哭只能抬头望天空
`;

/*变量 ：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-5-29 16:02

欣赏亚伦老师佳作~~{:4_187:}

梦缘 发表于 2023-5-29 16:19

好美的播放器，老师好棒啊！{:4_171:}

醉美水芙蓉 发表于 2023-5-29 16:58

樵歌 发表于 2023-5-29 17:57

追着红伞跑。做得真有趣！

红影 发表于 2023-5-29 21:34

画面漂亮。欣赏亚伦老师好帖{:4_187:}

小辣椒 发表于 2023-5-30 21:45

也是变色效果，漂亮{:4_199:}

小辣椒 发表于 2023-5-30 21:46

欣赏亚伦的精彩制作{:4_199:}

查看完整版本: 心被填满又掏空-魏佳艺【根据黑老师代码改编】