赵鹏 -外婆的澎湖湾
本帖最后由 岩新新 于 2023-6-13 08:52 编辑 <br /><br /><meta charset="UTF-8"><style>
#papa {
margin: 10px -300px;
place-items: center;
width: 1400px;
height: 740px;
background:#000000 ; border-radius: 20px;display: grid;
box-shadow: 0 0px 84px 0px hsla(0,0%,0%,.65);
user-select: none;
position: relative;
z-index: 1;
overflow:hidden;
}
#tup{ display: grid;
width: 100%;
height:100%;
background:url('https://mp3.wf/uploap/file/20230608132513.gif')center/cover no-repeat;
left: 100%; top:-100%;
transform: rotateY(180deg);
position:absolute;
z-index: 1;
}
#tup1{width: 100%;display: grid;
mix-blend-mode:lighten;
height: 100%;
left: 0%; top:0%;
position:absolute;
z-index: 2;
opacity: 1;
}
#tup2{width: 12px;display: grid;
height: 20px;
left: 40%; top:26%;
position:absolute;transform: rotateY(180deg);
z-index: 3;
opacity: 1;
}
#tup3{width: 12px;display: grid;
height: 20px; mix-blend-mode: difference;
left: 60%; top:35%;-webkit-mask-image: radial-gradient(black 30% ,transparent 80%);
position:absolute;
z-index: 5;
opacity: 1;
}
#tup4{width: 12px;display: grid;
height: 20px;
left: 30%; top:25%;
position:absolute;
z-index: 3;
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: 20%; top:10%;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 2.8em 隶书;color:#007811; 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="tup"></div>
<div id="tup1"><img id="pp"src="https://s1.ax1x.com/2023/06/12/pCZzx2D.png" width="100%" height="100%"></div>
<div id="tup2"><img id="pp0"src="https://mp3.wf/uploap/file/20230608132513.gif" width="2800%" height="2800%"></div>
<div id="tup3"><img id="pp1"src="https://111t.net/assets/file/zp/20230509112430.jpg" width="100%" height="100%"></div>
<div id="tup4"><img id="pp2"src="https://111t.net/assets/file/zp/20230509112430.jpg" width="100%" height="100%"></div>
<div id="lrc" data-lrc="赵鹏 - 外婆的澎湖湾">赵鹏 - 外婆的澎湖湾</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://wp.lsjwldx.com/myfile/%E5%B2%A9%E6%96%B0%E6%96%B0/pu7/cb48_de03_aa52_18b1afb69b13392b70fa33fd99cf8be1.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 = `赵鹏 -外婆的澎湖湾
晚风轻拂澎湖湾
海浪逐沙滩
没有椰林缀斜阳
只是一片海蓝蓝
坐在门前的矮墙上
一遍遍怀想
也是黄昏的沙滩上
有着脚印两对半
那是外婆拄着杖
将我手轻轻挽
踩着薄暮走向余辉
暖暖的澎湖湾
一个脚印是笑语一串
消磨许多时光
直到夜色吞没我俩
回家的路上
澎湖湾澎湖湾
外婆的澎湖湾
有我许多的童年幻想
阳光沙滩海浪仙人掌
还有一位老船长
晚风轻拂澎湖湾
海浪逐沙滩
没有椰林缀斜阳
只是一片海蓝蓝
坐在门前的矮墙上
一遍遍怀想
也是黄昏的沙滩上
有着脚印两对半
那是外婆拄着杖
将我手轻轻挽
踩着薄暮走向余辉
暖暖的澎湖湾
一个脚印是笑语一串
消磨许多时光
直到夜色吞没我俩
回家的路上
澎湖湾澎湖湾
外婆的澎湖湾
有我许多的童年幻想
阳光沙滩海浪仙人掌
还有一位老船长
澎湖湾澎湖湾
外婆的澎湖湾
有我许多的童年幻想
阳光沙滩海浪仙人掌
还有一位老船长
`;
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)); left: 20%;top:10%; ',
player_css: '--ww: 620px; bottom: 7%; left: 22%;',
btn_txt: '✿',
});
aud.onerror = () => {
if(aud.error.code === 4) aud.src=' ';
}
})();
</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_176:} 这首歌曲和标题以及歌词都不同的？是《每个夜晚为你失眠》，不是《外婆的澎湖湾》{:4_173:}
页:
[1]