拥有的回忆

亚伦影音工作室 发表于 2025-1-2 20:29

本帖最后由亚伦影音工作室于 2025-1-2 20:38 编辑 <br /><br /> <style>
#papa { margin: 10px 0 20px calc(50% - 721px); background:#800 url(https://pic1.imgdb.cn/item/6775f82dd0e0a243d4ed9e1d.jpg)no-repeat center/cover;width: 1286px; height: 720px; box-shadow: 3px 3px 6px gray; overflow: hidden; z-index: 1; position: relative; }
#ppm{position: absolute; width: 100%; height: 100%; opacity:1; z-index: 1;
background:url(https://pic1.imgdb.cn/item/67564aedd0e0a243d4e015f5.gif)no-repeat center/100% 100%; border-radius: 0px;mix-blend-mode: lighten;bottom: 0; left:0px;
}
#ppcm{ position: absolute;width: 100%; height: 100%; opacity:0;z-index: 1;bottom: 0;background:url(https://pic1.imgdb.cn/item/67564af4d0e0a243d4e015f6.png)no-repeat center/100% 100%;mix-blend-mode: difference;
}
#but{left: 5%;top: 4%;position:absolute; z-index: 40;border: 3px solid #ff3300; width:50px;overflow: hidden;
   height: 50px;
         border-radius: 0%;cursor: pointer;}

#pic{position:absolute;top:25px; left:28px;background:#ff3300;
transform: translate(-50%, -50%);
clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 0, 50% 0, 50% 100%, 75% 100%, 75% 0);
   width:30px;
   height: 30px;}
#picc{opacity:0;position:absolute;top:25px; left:30px;background:#ff3300; transform: translate(-50%, -50%);
clip-path: polygon(75% 50%, 0 0, 0 100%);
   width:30px;
   height: 30px;}

#fullscreen { opacity:1;position: absolute; width: 55px; height: 55px;top:4%; cursor: pointer;left:12%;z-index: 40;}
#papa:hover #fullscreen { opacity:1;}
#全屏{ width: 55px; height: 55px; position: absolute;background:url(https://pic1.imgdb.cn/item/6774e0f7d0e0a243d4ed5004.png)no-repeat center/cover;
}
#退出{ width: 55px; height: 55px; position: absolute;opacity:0;background:url(https://pic1.imgdb.cn/item/6774e0f2d0e0a243d4ed5001.png)no-repeat center/cover;
</style>
<style>
#lrc {--state: paused;--motion: cover2;--tt: 2s;--bg: linear-gradient(0deg, #880000, #880000, #880000);
position: absolute;z-index: 16;left: 50%; top: 86%;transform: translate(-50%);font:400 3.5em/1em 华文隶书;font-style:italic; color: #000080;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: 100%; height: 100%;color: transparent;overflow: hidden;white-space: pre;background: var(--bg);clip-path: inset(0 100% 0 0);-webkit-background-clip: text;animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);}
@keyframes cover1{ to { clip-path: inset(0 0 0 0); } }@keyframes cover2 { to { clip-path: inset(0 0 0 0); } }
</style>
<div id="papa">
<div id="ppm"></div>
<div id="ppcm" ></div>
<span id="fullscreen" >
<div id="全屏"></div>
<div id="退出" ></div>
</span>
<div id="but" >
<div id="pic"></div>
<div id="picc"></div>
</div>
<div data-lrc="" id="lrc"></div>
</div>
<audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w7/audio/1f/f8/f0/a7556f2bbe70d0966baa1c2f4662136e/audio.mp3" autoplay loop></audio>
<script >
but.onclick = () => aud.paused ? (aud.play(),picc.style.opacity= '0',pic.style.opacity = '1',ppcm.style.opacity= '0',ppm.style.opacity = '1'): (aud.pause(),picc.style.opacity = '1',pic.style.opacity = '0',ppcm.style.opacity= '1',ppm.style.opacity = '0');
aud.addEventListener('timeupdate', () => {
            tmsg.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);});
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 fs= true;
fullscreen.onclick = () => {
   fs ? (papa.requestFullscreen(),全屏.style.opacity= '0',退出.style.opacity = '1') : ( document.exitFullscreen(),全屏.style.opacity = '1',退出.style.opacity = '0');
   fs = !fs;
}

</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')) : (lrc.style.setProperty('--state','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>

亚伦影音工作室 发表于 2025-1-2 20:29

attach://46459.rar

红影发表于 2025-1-2 20:53

这个把全屏符号变了颜色和线条粗细，感觉更漂亮了。
欣赏亚伦老师好帖{:4_199:}

秋思梦景 发表于 2025-1-3 07:54

问候老师好！精美音画佳作，精心制作分享。向您学习！祝您幸福安康！:handshake

页: [1]

花潮论坛's Archiver

拥有的回忆