《秋夜想你》江都子蒋婴 TO：东篱闲人

焱鑫磊 发表于 2023-9-2 16:00

本帖最后由焱鑫磊于 2023-9-2 17:47 编辑 <br /><br /><style>
#papa {
   margin: 100px-300px;
   place-items: center;
   width: 1164px;
   height: 620px;
background:#00f000url(https://pic.imgdb.cn/item/64f2bf2a661c6c8e54aa2a58.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;
}
#pp { position: absolute; top: 75%;width: 100%; left:5px; z-index: 5;}
#ptpt{width: 100%;
   height: 100%;display: grid;
left: 0%; top:0%;
background: radial-gradient(ellipse 100% 100% at 50% 50%, rgba(242, 9, 9, 0) 28%,rgba(255, 2, 2, 0.62) 65%);

position:absolute;
   z-index: 4;
   opacity: 1;
animation: ptpt 3s infinite linear;
}
@keyframes ptpt{0%{filter:hue-rotate(360deg);}100%{filter:hue-rotate(0deg)}}

#ptpu{width: 400px;display: grid;
      height: 260px;mix-blend-mode:normal;
left: 70%; top:10%;border-radius: 0%;
position:absolute;opacity: 1;
   z-index: 6;transform:translate(0%,0%)scale(0.6);
   overflow:hidden;
}
#ptpn{width: 200px;display: grid;
      height: 80px;
left: 5%; top:60%;
position:absolute;transform: rotateY(180deg);
   z-index: 5;
   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: 25px;--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{ 0%{opacity: 1;width: 100%;transform: scale(0.4);filter: hue-rotate(0deg)brightness(100%)}
20%{width: 100%;opacity: 1;transform: scale(1.1);filter: hue-rotate(360deg)brightness(100%)}
100%{width: 100%;opacity: 1;transform:scale(1.1);transform: translate(0%, -160px);}}
@keyframes cover2 {0%{width: 0%;opacity: 1;transform: scale(0.4);filter: hue-rotate(0deg)brightness(100%)}
20%{width: 100%;opacity: 1;transform: scale(1.1);filter: hue-rotate(360deg)brightness(100%)}
100%{width: 100%;opacity: 1;transform:scale(1.1);transform: translate(0%, 0%);}}

#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(#FFFFFF1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);font:normal 2.8em 华文隶书;color:#0000; z-index:100; -webkit-background-clip: text; white-space: pre;transform: translate(-30%, 10px);}
#lrc::before { position: absolute; content: attr(data-lrc); color: transparent; width: 100%; 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"title="焱鑫磊博客欢迎你">

<div id="ptpt"></div>
<canvas id="pp" title="焱鑫磊博客欢迎你" ></canvas>
<div id="ptpn"><img id="pp0"src="https://pic2.imgdb.cn/item/645611730d2dde5777c30c2f.gif" width="100%" height="100%"></div>
<div id="lrc" data-lrc="HCPlayer">HCPlayer</div>
<div id="ptpu">

<img id="pp1"src="https://pic2.imgdb.cn/item/64518dc30d2dde57779cde74.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://i.mp3.wf/view.php/5097c22968c49bd33819633418466d54.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 = `《秋夜想你》江都子蒋婴
词/曲：余晓清
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:75%; left: 50%',
            player_css: '--ww: 120px;top:57%;left: 23%;',
            btn_txt: '✳',
   });

   FS({
            pa: papa,

set: 'backgroun: #333; color: snow; border: 0px solid snow; bottom: 90%; left: 20px;font:normal 2.5em 华文隶书;',
   });
aud.onerror = () => {
            if(aud.error.code === 4) aud.src='https://i.mp3.wf/view.php/5097c22968c49bd33819633418466d54.mp3';
   }
})();

ptpt.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>ptpt.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>ptpt.style.animationPlayState = 'paused');

(function() { ypData = ;
let total = 120,idx = 0;
   let ctx =pp.getContext('2d');
   let w =pp.width =1164, h = pp.height = 120;
   let slice = w / total, vmax = Math.max.apply(null, ypData);
   aud.loop = false;
   ctx.strokeStyle = '#FFcccc';
   ctx.fillStyle = '#cccccc';
   ctx.font = '14px sans-serif';
   ctx.shadowOffsetX = ctx.shadowOffsetY = 1;
   ctx.shadowBlur = 1;
   ctx.shadowColor = '#000';
   ctx.fillText('play', 100, 50);

   aud.addEventListener('ended', () => { idx = 0; aud.play(); });
   aud.addEventListener('timeupdate', () => {
            draw();
            idx ++;
            if(idx > ypData.length - 1) idx = 0;
   });

   let draw = () => {
            let ar = Array(total).fill('0').map( (v,k) => Math.random() * (ypData * h / vmax));
            ctx.clearRect(0,0,w,h);
            ctx.beginPath();
            Array.from({length: total}).forEach((v,k) => ctx.lineTo(slice*k, h - ar));
            ctx.stroke();
            ctx.fillText(toMin(aud.currentTime) + ' / ' + toMin(aud.duration), 950, 30);
   }
   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;};
})();

</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;
         // 透明度还原
         image0.style.opacity = '';image1.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
image0 = document.getElementById("pp0"),
image1= document.getElementById("pp1"),
button = document.getElementById("mplayer");
button.onclick = function() {
   if (this.value == '') {
         image0.play(); image1.play();
         this.value = '.';
   } else {
         image0.stop(); image1.stop();
         this.value = '';
   }
};

</script>

红影发表于 2023-9-2 18:46

真漂亮，暂停能让所有的动态都停止呢。只是很不容易找到按钮。开始以为是那朵花，后来以为是磁带，结果都不是，而是磁带下的那个小小的标志，其实这几个也可以做成可点击呢{:4_187:}

小辣椒 发表于 2023-9-2 19:33

播放器加在磁带里面了，欣赏精彩制作{:4_199:}

红影发表于 2023-9-2 19:49

变色背景很美，制作也漂亮。东篱大哥收礼开心@东篱闲人{:4_187:}

东篱闲人 发表于 2023-9-2 20:13

红影发表于 2023-9-2 19:49
变色背景很美，制作也漂亮。东篱大哥收礼开心@东篱闲人

{:4_187:}

东篱闲人 发表于 2023-9-2 20:14

好美好美，谢谢小焱。。。。。{:4_204:}

东篱闲人 发表于 2023-9-2 20:14

歌也好听。。。。{:4_174:}

焱鑫磊 发表于 2023-9-2 21:08

红影发表于 2023-9-2 18:46
真漂亮，暂停能让所有的动态都停止呢。只是很不容易找到按钮。开始以为是那朵花，后来以为是磁带，结果都不 ...

好难找吧，慢慢碰。{:4_204:}

焱鑫磊 发表于 2023-9-2 21:08

小辣椒发表于 2023-9-2 19:33
播放器加在磁带里面了，欣赏精彩制作

小辣椒晚上好！{:4_187:}

焱鑫磊 发表于 2023-9-2 21:10

东篱闲人发表于 2023-9-2 20:13

官不打送礼的，礼轻人意重！{:4_204:}

焱鑫磊 发表于 2023-9-2 21:11

东篱闲人发表于 2023-9-2 20:14
好美好美，谢谢小焱。。。。。

把美女和歌曲一起送大哥了。{:4_172:}

焱鑫磊 发表于 2023-9-2 21:12

东篱闲人发表于 2023-9-2 20:14
歌也好听。。。。

没事时听听歌曲很美的。{:4_176:}

东篱闲人 发表于 2023-9-2 21:49

焱鑫磊发表于 2023-9-2 21:11
把美女和歌曲一起送大哥了。

美女不要了，不好卖。。。{:5_117:}

焱鑫磊 发表于 2023-9-2 22:23

东篱闲人发表于 2023-9-2 21:49
美女不要了，不好卖。。。

确实不好卖。自己留着费用太高。{:4_172:}

红影发表于 2023-9-2 22:36

焱鑫磊发表于 2023-9-2 21:08
好难找吧，慢慢碰。

是啊，真的跑到里面点了半天{:4_173:}

东篱闲人 发表于 2023-9-3 09:09

焱鑫磊发表于 2023-9-2 22:23
确实不好卖。自己留着费用太高。

嗯嗯嗯。。。。{:4_172:}

页: [1]

花潮论坛's Archiver

《秋夜想你》江都子 蒋婴 TO：东篱闲人

《秋夜想你》江都子蒋婴 TO：东篱闲人