祝论坛朋友们节日快乐【2】有声网页测试
本帖最后由 亚伦影音工作室 于 2023-6-19 13:57 编辑 <br /><br /><style>#papa {
margin: 20px-300px;
place-items: center;
width: 1164px;
height: 620px;
background: url('https://pic2.imgdb.cn/item/645088790d2dde577794490d.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://pic2.imgdb.cn/item/644f29d90d2dde5777d4c632.gif" width="100%" height="100%"></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="https://www.qqmc.com/mp3/music272950061.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 = `在外漂泊靠自己-魏佳艺
词：公子
曲：花僮
编曲：王亚东
混音：王亚东
吉他：杨春
和声：乔秀芬
制作人：亚伦
出品人：亚伦
OP：影音工作室
不是我太任性
不是不想回去
当初离家的时候
想为自己证明
不怪人太势力
不怪路太崎岖
无依无靠的命啊
全靠这一口气
人生哪里有容易
在外漂泊靠自己
任风吹 吹谷底
不怨不悔不畏惧
想看广阔的天地
再苦再累靠自己
从黑夜 到黎明
一个人一路风景
不是我太任性
不是不想回去
当初离家的时候
想为自己证明
不怪人太势力
不怪路太崎岖
无依无靠的命啊
全靠这一口气
人生哪里有容易
在外漂泊靠自己
任风吹 吹谷底
不怨不悔不畏惧
想看广阔的天地
再苦再累靠自己
从黑夜 到黎明
一个人一路风景
人生哪里有容易
在外漂泊靠自己
任风吹 吹谷底
不怨不悔不畏惧
想看广阔的天地
再苦再累靠自己
从黑夜 到黎明
一个人一路风景`;
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="https://pan.111t.net/view.php/5903b45fb81b94281a03c47e1868e2a4.mp3"></audio>
<script>
document.addEventListener("click", function() {
document.getElementById("audio").play();
});
</script> 亚伦速度的，又一个{:4_178:} 亚伦节日快乐！ 向劳动者致敬！亚伦节日快乐！朋友们节日快乐！ 欣赏老师的精彩分享，祝大家节日快乐！{:4_190:} 借贴祝各位五一快乐。 精美作品。{:4_199:} 节日快乐！挺漂亮的制作！{:4_199:} 欣赏精采制作！过了节更快乐。 这个很给力 动态文字的下面也是个动图么，很漂亮。欣赏亚伦老师好帖{:4_187:}
页:
[1]