《安静的你》Kirsty刘瑾睿
本帖最后由 焱鑫磊 于 2023-9-3 21:16 编辑 <br /><br /><style>#papa {
margin: 90px-280px;
display: grid;
place-items: center;
width: 1164px;
height: 620px;
background: url('https://pic2.imgdb.cn/item/64587db10d2dde577767ecda.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%, 40px);-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="http://chuangshicdn.data.mvbox.cn/album/22/06/22/22062210335112503592.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/104664.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 = `《安静的你》Kirsty 刘瑾睿
LRC歌词制作：焱鑫磊
哦安静的你啊
在看什么
哦安静的你啊
总把我手紧握
哦安静的你啊
总是为我掌舵
海域暗潮汹涌
眩晕在你怀中
哦安静的你啊
和我是大不同
把痛苦藏好了
反正你话不多
连我你都想骗过
说什么陪我追梦
难道是同床异梦
你不爱自己怎么爱我
灵魂沿着溪水流被唤醒成功
连鸟儿都结伴南游换谁都怕冻
从紫禁城玩到North Pole
把你笔记做够
写满你的喜厌哀乐
毕竟我明了你也会这样做
你的沉默
我来守候
哦安静的你啊
把平淡变梦幻
把繁琐变简单
把昏暗变阑珊
黄浦江上货船漂泊
运送使命做该做的
怪游客想的太多
赋予这城市特别颜色
灵魂沿着溪水流被唤醒成功
连鸟儿都结伴南游换谁都怕冻
从紫禁城玩到North Pole
把你笔记做够
写满你的喜厌哀乐
毕竟我明了你也会这样做
你的沉默
我来守候
`; 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://i.mp3.wf/view.php/5e289dad2c20875436130b6c83f3b8e7.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_187:} 俺来替小辣椒欣赏{:4_189:} 特效好看！ 小辣椒 发表于 2023-5-8 14:28
这个我要电脑欣赏，手机按钮太边了我点击不了，音乐听不到
手机与电脑有区别呀，我很少用手机看。问好小辣椒！{:4_204:} 小辣椒 发表于 2023-5-8 14:46
我试了手机拉大界面按钮还是点击不了，只能电脑欣赏了
谢谢精彩分享
问候小辣椒好！{:4_187:} 樵歌 发表于 2023-5-8 16:32
俺来替小辣椒欣赏
问候樵歌好！{:4_187:}{:4_204:} 醉美水芙蓉 发表于 2023-5-8 17:04
欣赏朋友佳作！
问好！{:4_187:} 一斛珠 发表于 2023-5-8 17:07
特效好看！
问好！{:4_204:} 很漂亮的制作。那个全屏被弄成了自己的名字，有趣。欣赏焱鑫磊好帖{:4_187:} 红影 发表于 2023-5-8 18:00
很漂亮的制作。那个全屏被弄成了自己的名字，有趣。欣赏焱鑫磊好帖
问候红影好！{:4_187:}{:4_187:}{:4_187:} 焱鑫磊 发表于 2023-5-8 18:11
问候红影好！
问好焱鑫磊，晚上好{:4_187:} 感谢分享，真好听！{:4_187:} 梦缘 发表于 2023-5-9 10:34
感谢分享，真好听！
问候梦缘好！{:4_187:}{:4_204:}
页:
[1]