那年那月那个你 - 任妙音
本帖最后由 亚伦影音工作室 于 2023-5-4 14:44 编辑 <br /><br /><style>#papa {
margin: 60px-330px;
place-items: center;
width: 1260px;
height: 650px;
background:#000000 url(https://file.moyublog.com/d/file/2020-11-30/d5997cb1feae46f8ea62635bc9868c00.jpg)no-repeat center/cover; border-radius: 0%;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%;
height: 100%;display: grid;
left: 0%; top:0%;
position:absolute;
z-index: 8;
opacity: 1;
}
#ptpu{width: 400px;display: grid;
height: 165px;mix-blend-mode:normal;
left: 65%; top:40%;border-radius: 2%;
position:absolute;opacity: .8;
z-index: 50;transform:translate(0%,0%)scale(1,1);
overflow:hidden;
}
#ptpn{width: 200px;display: grid;
height: 160px;
left: 75%; top:20%;
position:absolute;transform: rotateY(180deg);
z-index: 51;
opacity: 1;
}
#ptpm{width: 500px;display: grid;
height: 620px; mix-blend-mode: difference;
left: 10%; top:0%;-webkit-mask-image: radial-gradient(black 30% ,transparent 80%);
position:absolute;
z-index: 51;
opacity: 1;
}
#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: 0%; top:0%;filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);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://www.kumeiwp.com/sub/filestores/2023/05/04/ddd4cf5876d8884da705726e8f0eba15.gif" width="100%" height="100%"></div>
<div id="ptpm"><img id="pp1"src="https://pic2.imgdb.cn/item/644e2e6c0d2dde5777e7add9.gif" width="100%" height="100%"></div>
<div id="ptpn"><img id="pp0"src="https://pic2.imgdb.cn/item/64309c8c0d2dde577781ae06.gif" width="100%" height="100%"></div>
<div id="lrc" data-lrc="HCPlayer">HCPlayer</div>
<div id="ptpu">
<img id="pp2"src="https://pic2.imgdb.cn/item/6453015c0d2dde57770fcd4b.gif" width="100%" height="100%">
<div id="mplayer"><span id="btnplay"></span><span id="prog"></span><span id="tmsg">00:00 | 00:00</span></div>
</div>
</div>
<audio id="aud" src="https://www.qqmc.com/mp3/music271985975.mp3" loop autoplay></audio>
<script >
(function() {
(function(mkPlayer) {let defaults = {lrcAr: [],lrc_css: 'top: 0px; left: 0%; transform: translateX(-50%);',player_css: 'bottom: 0px; ; 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: 0px 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 = `那年那月那个你 - 任妙音
词：小啊
曲：刘佳
编曲：孙侠
和声：姚斯婷
混音：侯春阳
出品人：亚伦
制作发行：亚伦影音
字幕：亚伦
在这个没有风的夏季
白色花开在月光里
我透过窗户 远远地望去
有些情绪 再次触及
往事的章序被我掀起
那些经过如此熟悉
我保留着你最美的样子
变成心底一个秘密
那年那月那个你
那分那秒撞进我怀里
那天那风那场雨
穿过一切只为和你相遇
那年那月那个你
那人那事已成为回忆
那情那爱那往昔
多年之后居然还没忘记
往事的章序被我掀起
那些经过如此熟悉
我保留着你最美的样子
变成心底一个秘密
那年那月那个你
那分那秒撞进我怀里
那天那风那场雨
穿过一切只为和你相遇
那年那月那个你
那人那事已成为回忆
那情那爱那往昔
多年之后居然还没忘记
那年那月那个你
那分那秒撞进我怀里
那天那风那场雨
穿过一切只为和你相遇
那年那月那个你
那人那事已成为回忆
那情那爱那往昔
多年之后居然还没忘记
那情那爱那往昔
多年之后居然还没忘记`;
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%; left: 40%',
player_css: '--ww: 120px;top:80%;left: 35%;',
btn_txt: '✳',
});
FS({
pa: papa,
set: 'backgroun: #333; color: snow; border: 0px solid snow; bottom: 90%; left: 20px;font:normal 2em 华文行楷;',
});
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';
}
})();
</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 = ''; image0.style.opacity = '';image1.style.opacity = '';image2.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"),
image0 = document.getElementById("pp0"),
image1 = document.getElementById("pp1"),
image2 = document.getElementById("pp2"),
button = document.getElementById("mplayer");
if (image1 &&image0 &&image && button) {
button.onclick = function() {
if (this.value == '') {
image.play(); image0.play(); image1.play(); image2.play();
this.value = '.';
} else {
image.stop(); image0.stop();image1.stop(); image2.stop();
this.value = '';
}
};
}
</script>
沙发欣赏 歌真好听{:4_199:} 美图美音，欣赏点赞！{:4_187:} 亚伦这个音波出来的播放器，有点像频谱，只是没有频谱的波动效果，这个制作感觉很漂亮，把频谱动起来，感觉会更加漂亮 把背景美女图图也是改了动图，这些颜色深的黑背景点点动图感觉还是不要加。画面更加简洁漂亮 欣赏亚伦的精彩制作{:4_199:} 欣赏老师佳作！{:4_187:} 小辣椒 发表于 2023-5-4 20:38
把背景美女图图也是改了动图，这些颜色深的黑背景点点动图感觉还是不要加。画面更加简洁漂亮
原来只是测试不透明的动图效果，效果不太好，以后用动画。 很漂亮，欣赏亚伦老师好帖{:4_187:}
页:
[1]