《爱是一场及时雨》云菲菲
本帖最后由 焱鑫磊 于 2023-5-24 09:36 编辑 <br /><br /><style>#papa {
margin: 100px-280px;
display: grid;
place-items: center;
width: 1164px;
height: 640px;
background: url('https://img.fy6b.com/2023/05/24/996aa254fcc07.jpg') no-repeat center/cover;
box-shadow: 0 0px 4px 0px hsla(0,0%,0%,.65);
user-select: none;
position: relative;
z-index: 1;
overflow:hidden;
}
#ptpt{width: 100%;display: grid;
mix-blend-mode: lighten;
height: 100%;
mix-blend-mode: darken;
user-select: none;
position:absolute;
z-index: 2;
opacity: .4;filter:brightness(550%);
}
#mplayer {position: absolute;grid-template-columns: auto auto auto;gap: 8px;display: grid;place-items: center;color: var(--color);font: normal 12px sans-serif;z-index: 999;--ww: 500px;--color: #ffffff;--btn_size: 30px;--track: #ffffff;--prog: #FF0000;}
#btnplay {--state: paused;margin-right: -5px;font: bold var(--btn_size) / var(--btn_size) serif;cursor: pointer;animation: rot 4s infinite linear;animation-play-state: var(--state);}
@keyframes rot { to { transform: rotate(1turn); } }
#prog {--xx: 0px;width: var(--ww);height: 2px;border-radius: 8px;background: var(--track
);position: relative;cursor: pointer;}
#prog::before {position: absolute;content: '';width: var(--xx);height: 100%;border-radius: 8px;background: var(--prog);}
@keyframes cover1{ from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
#lrc { --motion: cover2; --tt: 2s;--state: paused;--bg: linear-gradient(180deg, hsla(240, 50%, 50%, .25), hsla(240, 30%, 50%, .75));position: absolute;left: 40%; top:87%;filter: drop-shadow( 0px 0px 1px #ffffff)drop-shadow( 0px 0px 1px #ffffff)drop-shadow( 0px 0px 1px #ffffff);font:normal 3em 华文行楷;color:#000078; z-index: 100; transform: translate(-30%, 10px);-webkit-background-clip: text;white-space: pre;}
#lrc::before { position: absolute; content: attr(data-lrc); color: transparent; width: 30%; height: 100%;white-space: pre; background:#880000;-webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }
</style>
<div id="papa"><div id="ptpt"><img id="pp"src="https://img.fy6b.com/2023/05/24/1e25a4cfce468.gif" width="100%" height="100%"></div>
<div id="lrc" data-lrc="HCPlayer">HCPlayer</div><div id="mplayer"><span id="btnplay"></span><span id="prog"></span><span id="tmsg">00:00 | 00:00</span></div></div>
<audio id="aud" src="https://www.joy127.com/url/105154.mp3" loop autoplay></audio>
<script >
(function() {
(function(mkPlayer) {let defaults = {lrcAr: [],lrc_css: 'top: 10px; left: 50%; transform: translateX(-50%);',player_css: 'bottom: 20px; left: 50%; transform: translateX(-50%);',btn_txt: '❃',playerCode: ``,};let playCode = (user_config) => {let data = Object.assign({}, defaults, user_config);papa.innerHTML += data.playerCode;mplayer.style.cssText += data.player_css;lrc.style.cssText += data.lrc_css;btnplay.innerHTML = data.btn_txt;let mKey = 0, mFlag = true;btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;aud.addEventListener('timeupdate', () => {let prg = aud.currentTime * prog.offsetWidth / aud.duration < 6 ? 6 : aud.currentTime * prog.offsetWidth / aud.duration;tmsg.innerText = `${toMin(aud.currentTime)} | ${toMin(aud.duration)}`;prog.style.setProperty('--xx', prg + 'px');for (j = 0; j < data.lrcAr.length; j++) {if (aud.currentTime >= data.lrcAr) {cKey = j;if (mKey === j) showLrc(data.lrcAr);else continue;}}});aud.addEventListener('pause', () => mState());aud.addEventListener('play', () => mState());aud.addEventListener('seeked', () => calcKey());let mState = () => aud.paused ? (lrc.style.setProperty('--state','paused'),btnplay.style.setProperty('--state', 'paused')) : (lrc.style.setProperty('--state','running'),btnplay.style.setProperty('--state', 'running'));let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = data.lrcAr;lrc.dataset.lrc = data.lrcAr.replace(/<br>/, '\n');lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');lrc.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};let calcKey = () => {for (j = 0; j < data.lrcAr.length; j++) {if (aud.currentTime <= data.lrcAr) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > data.lrcAr.length - 1) mKey = data.lrcAr.length - 1;let time = data.lrcAr - (aud.currentTime - data.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;}};mkPlayer.HCPlayer = playCode;})(this);
(function(mkFS) {let setFullScreen = (user_set) => {let pa = user_set.pa;if(typeof(pa) !== 'object') return false;if(!user_set.set) user_set.set = 'color: snow; background: black; border: 2px solid snow; left: 40px; bottom: 40px;';btnMsg = document.createElement('span');btnMsg.style.cssText = `position: absolute; border-radius: 8px; padding: 4px; cursor: pointer; z-index:998; ${user_set.set}`;btnMsg.innerText = '全屏观赏';btnMsg.style.display = 'none';pa.appendChild(btnMsg);let timerId, fs = false;btnMsg.onclick = () => fs ? document.exitFullscreen() : pa.requestFullscreen();pa.addEventListener('mousemove', (e) => {clearTimeout(timerId);btnMsg.style.display = 'block';timerId = setTimeout('btnMsg.style.display = "none"', 3000);});document.addEventListener('fullscreenchange', () => {if (document.fullscreenElement !== null) {fs = true;btnMsg.innerText = '退出全屏';} else {fs = false;btnMsg.innerText = '全屏观赏';}});};mkFS.FS = setFullScreen;})(this);
let averAdd = 0, offset = 0;
let geci = `《爱是一场及时雨》云菲菲
词：马双云 曲：陈伟
LRC歌词制作：焱鑫磊
曾幻想与一人相遇
在我情窦初开的年纪
把那人的话当做金句
字字入心 句句美丽
曾幻想与一人相许
给我渴望已久的甜蜜
而那人还不知在哪里
茫茫人海 哪里有你
爱正是一场及时雨
在芳华里 恰逢时宜
你及时而来 落我心底
给我欲罢不能的欢喜
爱正是一场及时雨
在细雨里 另有天地
一点一滴 都是爱的你
让我今生今世难忘记
曾幻想与一人相许
给我渴望已久的甜蜜
而那人还不知在哪里
茫茫人海 哪里有你
爱正是一场及时雨
在芳华里 恰逢时宜
你及时而来 落我心底
给我欲罢不能的欢喜
爱正是一场及时雨
在细雨里 另有天地
一点一滴 都是爱的你
让我今生今世难忘记
爱正是一场及时雨
在芳华里 恰逢时宜
你及时而来 落我心底
给我欲罢不能的欢喜
爱正是一场及时雨
在细雨里 另有天地
一点一滴 都是爱的你
让我今生今世难忘记
让我今生今世难忘记
`; 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;};
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));}
HCPlayer({
lrcAr: getLrcAr(geci),
lrc_css: ' --bg: linear-gradient(hsla(90,80%,50%,.35),hsla(100,70%,45%,.6)); top:80%; ',
player_css: '--ww: 900px;bottom: 10px;',
btn_txt: '❄',
});
FS({
pa: papa,
set: 'backgroun: #333; color: snow; border: 2px solid snow; bottom: 90%; left: 20px;',
});
aud.onerror = () => {
if(aud.error.code === 4) aud.src='https://www.joy127.com/url/105154.mp3';
}
})();
</script>
<script>
if ('getContext' in document.createElement('canvas')) {
HTMLImageElement.prototype.play = function() {
if (this.storeCanvas) {
// 移除存储的canvas
this.storeCanvas.parentElement.removeChild(this.storeCanvas);
this.storeCanvas = null;
// 透明度还原
image.style.opacity = '';
}
if (this.storeUrl) {
this.src = this.storeUrl;
}
};
HTMLImageElement.prototype.stop = function() {
var canvas = document.createElement('canvas');
// 尺寸
var width = this.width, height = this.height;
if (width && height) {
// 存储之前的地址
if (!this.storeUrl) {
this.storeUrl = this.src;
}
// canvas大小
canvas.width = width;
canvas.height = height;
// 绘制图片帧（第一帧）
canvas.getContext('2d').drawImage(this, 0, 0, width, height);
// 重置当前图片
try {
this.src = canvas.toDataURL("image/gif");
} catch(e) {
// 跨域
this.removeAttribute('src');
// 载入canvas元素
canvas.style.position = 'absolute';
// 前面插入图片
this.parentElement.insertBefore(canvas, this);
// 隐藏原图
this.style.opacity = '0';
// 存储canvas
this.storeCanvas = canvas;
}
}
};
}
var image = document.getElementById("pp"),
button = document.getElementById("mplayer");
if (image && button) {
button.onclick = function() {
if (this.value == '') {
image.play();
this.value = '.';
} else {
image.stop();
this.value = '';
}
};
}
</script>
好听的歌儿，背景制作很漂亮。给焱鑫磊点赞{:4_199:} 这个有意思，播放器进度条和图片下面的横线重合，开始竟没看出来。这样也挺不错，和图片结合紧密{:4_187:} 精美制作，欣赏点赞！{:4_187:} 红影 发表于 2023-5-24 10:18
好听的歌儿，背景制作很漂亮。给焱鑫磊点赞
问好红影！{:4_187:} 红影 发表于 2023-5-24 10:19
这个有意思，播放器进度条和图片下面的横线重合，开始竟没看出来。这样也挺不错，和图片结合紧密
调整为一体，感觉不错。红影观察力不错哟。{:4_170:} 梦缘 发表于 2023-5-24 11:10
精美制作，欣赏点赞！
问好梦缘！{:4_187:} 漂亮哇，醉赏 一斛珠 发表于 2023-5-24 17:58
漂亮哇，醉赏
问好一斛珠{:4_187:} 焱鑫磊 发表于 2023-5-24 12:19
调整为一体，感觉不错。红影观察力不错哟。
是啊，调整为一体也有别样的美呢。很赞{:4_199:} 焱鑫磊 发表于 2023-5-24 12:16
问好红影！
问好焱鑫磊美女，晚上好{:4_185:}
页:
[1]