学习《如歌岁月》
本帖最后由 醉美水芙蓉 于 2023-5-2 21:04 编辑 <br /><br /><style>#papa {
margin: 20px-300px;
place-items: center;
width: 1164px;
height: 620px;
background: url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/scene/a31aee9bf301ff0bd0297297ccd73cdd_preview.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: 90%;display: grid;
mix-blend-mode: difference;
height: 90%;
left:-20%; top:0%;
position:absolute;
z-index: 2;
opacity: 1;
}
#ptpn{width: 200px;display: grid;
height: 160px;
left: 30%; top:6%;
position:absolute;
z-index: 3;
opacity: 1;
}
#ptpm{width: 800px;display: grid;
height: 450px; mix-blend-mode: difference;
left: 30%; top:10%;
position:absolute;
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: 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 2em 华文行楷;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/644d89c40d2dde57773fc6de.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="ptpm"><img id="pp1"src="https://pic2.imgdb.cn/item/644e280d0d2dde5777e017c7.gif" width="100%" height="100%"></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/music270350799.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默涵版)
作词：乔泽涛
作曲：慕城
编混：DJ 默涵
制作人：涓子
监制：李彦桦
出品人：李彦桦
发行公司：金鑫大成
企划：秦子文
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:30%; ',
player_css: '--ww: 120px;bottom: 0px;top:55px;left: 15%;',
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';
}
})();
</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 = '';
}
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"),
button = document.getElementById("mplayer");
if (image1 &&image0 &&image && button) {
button.onclick = function() {
if (this.value == '') {
image.play(); image0.play(); image1.play();
this.value = '.';
} else {
image.stop(); image0.stop();image1.stop();
this.value = '';
}
};
}
</script>
这个播放器真漂亮。欣赏水芙蓉好帖{:4_199:} 真不错，{:4_199:} 亚伦影音工作室 发表于 2023-5-2 21:26
真不错，
感谢亚伦老师的代码！ 红影 发表于 2023-5-2 21:09
这个播放器真漂亮。欣赏水芙蓉好帖
谢谢红影美女支持！ 欣赏！{:4_187:} 播放控制器和镁铝一样美{:5_116:} 焱鑫磊 发表于 2023-5-2 21:48
欣赏！
谢谢朋友支持！ 马黑黑 发表于 2023-5-2 22:30
播放控制器和镁铝一样美
谢谢黑黑老师支持！ 制作精美！欣赏学习了！{:4_187:} 这个播放器设计的有新意。 醉美水芙蓉 发表于 2023-5-2 22:31
谢谢黑黑老师支持！
{:4_180:} 亦是金 发表于 2023-5-2 23:16
制作精美！欣赏学习了！
谢谢老师光临支持！ 梦油 发表于 2023-5-3 09:04
这个播放器设计的有新意。
谢谢梦油老师支持！ 醉美水芙蓉 发表于 2023-5-3 16:30
谢谢梦油老师支持！
芙蓉朋友别客气。 欣赏水芙蓉的精彩制作{:4_199:} 我们都要向亦是金老师学习，不要纯套用，要自己加自己的东西进去，个见啊。。。 制作精美，欣赏老师的精彩！{:4_187:} 小辣椒 发表于 2023-5-3 18:34
我们都要向亦是金老师学习，不要纯套用，要自己加自己的东西进去，个见啊。。。
小辣椒说得对！ 梦缘 发表于 2023-5-3 20:21
制作精美，欣赏老师的精彩！
谢谢老师支持！
页:
[1]
2