《假如爱有天意》贺三
本帖最后由 焱鑫磊 于 2023-5-9 16:57 编辑 <br /><br /><style>#papa {
margin: 100px-280px;
display: grid;
place-items: center;
width: 1164px;
height: 620px;
background: url('https://pic2.imgdb.cn/item/645a08390d2dde577718cb0d.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="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/104720.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 = `《假如爱有天意》贺三
《最食人间烟火色》电视剧插曲
词：李健 曲：Yoo Young Seok
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/104559.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_187:} 红影 发表于 2023-5-9 17:45
这个底图是剧照吧，好看。欣赏焱鑫磊好帖
剧照。谢谢红影欣赏！{:4_187:} 红影 发表于 2023-5-9 17:45
这个唱得也挺好听，不过还是更喜欢听李健自己唱的，觉得特别好听
电视剧里是贺三演唱的。 欣赏佳作！
起个网名好难 发表于 2023-5-9 19:56
欣赏佳作！
问候朋友好！{:4_187:} 醉美水芙蓉 发表于 2023-5-9 20:21
欣赏佳作！
朋友晚上好！{:4_187:} 焱鑫磊 发表于 2023-5-9 17:52
剧照。谢谢红影欣赏！
这个剧照好看，很勾起对影片的回忆{:4_187:} 焱鑫磊 发表于 2023-5-9 17:56
电视剧里是贺三演唱的。
这个人唱的还是第一次听到呢。 都很腻害的 一斛珠 发表于 2023-5-9 21:48
都很腻害的
问候一斛珠晚上好！{:4_187:} 谢谢精彩制作，这个我要以后电脑欣赏 小辣椒 发表于 2023-5-9 22:39
谢谢精彩制作，这个我要以后电脑欣赏
小辣椒晚上好！{:4_187:} 很好看的图，歌也好听，欣赏点赞！ 梦缘 发表于 2023-5-10 20:47
很好看的图，歌也好听，欣赏点赞！
问候朋友好！{:4_204:}{:4_204:}{:4_204:} 焱鑫磊 发表于 2023-5-9 22:42
小辣椒晚上好！
这个按钮我手机点击不到，今天电脑显示完整了，非常的漂亮{:4_199:}
页:
[1]