人间烟火 (DJ版) （套用代码效果）
<div class="t_fsz"><table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_1885993">
<br /><br /><style>
#papa {
margin: 20px-300px;
place-items: center;
width: 1164px;
height: 620px;
background: url('https://img.yexx.cn/sh/2020/06/20200612165645-5986c.jpg') no-repeat center/cover; border-radius: 12px;display: grid;
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:difference;
height: 30%;top:28%;
position:absolute;
z-index: 2;
opacity: 1;
}
.mybox {
margin: 0px auto;
width: 1000px;
height: 460px;
display: grid;
place-items: center;
position:absolute;z-index: 2;
filter: contrast(20);
}
#zt {
font: bold 40px / 50px sans-serif;
color: #ff0000;
animation: move 6s infinite alternate;
}
@keyframes move {
20% { letter-spacing: -60px; filter: blur(10px); }
30% { letter-spacing: -20px; filter: blur(2px); }
60% { letter-spacing: 60px; filter: blur(0px); }
}
#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 { 0% { transform: rotateY(180deg); }50% { transform: rotateY(0deg); }100% { transform: rotateY(-180deg); } }
#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://wimg.588ku.com/gif/21/06/23/ee6d1483294948c3060e7d10e3f6aaa2.gif" width="100%" height="65%"></div>
<div class="mybox">
<div id="zt"></div>
</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="http://music.163.com/song/media/outer/url?id=1929357375.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 = `人间烟火 (DJ版) - 程响
作曲 : 宁缺
三月的阳光
江南花已凋落 怎堪再斟酌
可怜良辰无多 竟似无人说
一人后来过江南 烟雨锁惆怅
听得乌篷轻摇浆 竟不知所想
画船萧鼓声声唱 几曲断人肠
谁家墙头有梅 自芬芳
人间一场烟火 你曾盛开过
刻几人在心窝 从此孤独活
江南花已凋落 怎堪再斟酌
可怜良辰无多 竟似无人说
你撑纸伞回头望 千年乌衣巷
问君青丝有几丈 能把风月量
谁言杯酒醉他乡 红尘皆可忘
凭栏数尽孤帆 泪两行
人间一场烟火 你曾盛开过
刻几人在心窝 从此孤独活
江南花已凋落 怎堪再斟酌
可怜良辰无多 竟似无人说
人间一场烟火 你曾盛开过
刻几人在心窝 从此孤独活
江南花已凋落 怎堪再斟酌
可怜良辰无多 竟似无人说
编辑：三月的阳光`;
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='http://antiserver.kuwo.cn/anti.s?rid=MUSIC_263613736&response=res&format=mp3|aac&type=convert_url&br=128kmp3&agent=iPhone&callback=getlink&jpcallback=getlink.mp3';
}
})();
zt.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>zt.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>zt.style.animationPlayState = 'paused');
</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>
<audio id="audio" src=".mp3"></audio>
<script>
document.addEventListener("click", function() {
document.getElementById("audio").play();
});
</script></td></tr></table> 哈哈，看看我是套用了谁的代码效果{:4_205:}{:4_205:} 这个带视频效果的播放器制作真漂亮。欣赏阳光哥哥好帖{:4_187:} 红影 发表于 2023-5-7 20:19
这个带视频效果的播放器制作真漂亮。欣赏阳光哥哥好帖
哈哈，偷用了亚伦代码修改~~{:4_173:} 红影 发表于 2023-5-7 20:19
这个带视频效果的播放器制作真漂亮。欣赏阳光哥哥好帖
影子妹妹的作品才是叫真的漂亮~~{:4_185:} 三月的阳光 发表于 2023-5-7 20:21
哈哈，偷用了亚伦代码修改~~
很不错的。阳光哥哥好久不见了，问好{:4_187:} 红影 发表于 2023-5-7 20:22
很不错的。阳光哥哥好久不见了，问好
影子妹妹，好久不见，问好并祝周末快乐~~{:4_187:} 三月的阳光 发表于 2023-5-7 20:22
影子妹妹的作品才是叫真的漂亮~~
我都好久没做帖子了，不知道做什么好{:4_173:} 三月的阳光 发表于 2023-5-7 20:24
影子妹妹，好久不见，问好并祝周末快乐~~
阳光哥哥也愉快，这周周末就休息一天，明天又要上班了呢。 红影 发表于 2023-5-7 20:25
我都好久没做帖子了，不知道做什么好
我可是一直在偷偷看着你们的进展的~~{:4_173:} 红影 发表于 2023-5-7 20:25
阳光哥哥也愉快，这周周末就休息一天，明天又要上班了呢。
我现在工作调动了比较轻松了，但是还是觉得时间不够用，这个周末过得还是很匆忙，私事太多了~~{:4_173:} 三月的阳光 发表于 2023-5-7 20:28
我可是一直在偷偷看着你们的进展的~~
咋不上来玩玩啊，这里应该是你熟悉的地方啊{:4_187:} 这曲子特好听 画面漂亮！ 三月的阳光 发表于 2023-5-7 20:30
我现在工作调动了比较轻松了，但是还是觉得时间不够用，这个周末过得还是很匆忙，私事太多了~~
这个周末少，就一天，等下个周末就正常了。 红影 发表于 2023-5-7 20:36
咋不上来玩玩啊，这里应该是你熟悉的地方啊
因为是最熟悉的地方所以一直不离不弃，由于时间紧张只能抽空这个点上来一下~~{:4_173:} 红影 发表于 2023-5-7 20:36
这个周末少，就一天，等下个周末就正常了。
我每个周末时间还是很多的，只是都被其他事情占了~~{:4_173:} 罗浮梦 发表于 2023-5-7 20:36
这曲子特好听
感谢罗浮梦友友欣赏~~{:4_190:}{:4_171:} 罗浮梦 发表于 2023-5-7 20:36
画面漂亮！
谢谢赞誉和支持鼓励~~{:4_187:} 三月的阳光 发表于 2023-5-7 20:44
因为是最熟悉的地方所以一直不离不弃，由于时间紧张只能抽空这个点上来一下~~
嗯嗯，来了就好。等着阳光哥哥忙好了一起来玩{:4_204:}
页:
[1]
2