旧梦一场 - 宋小睿
本帖最后由 亚伦影音工作室 于 2023-4-16 20:56 编辑 <br /><br /><style>#papa { margin: 20px -300px; width: 1164px; height: 620px; background: gray url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/2242c60f0b0127977f5f543841940b40.jpg') center/cover no-repeat; box-shadow: 0px 0px 0px 8px #800000 ,0px 0px 0px 2px #cccccc inset, 0px 0px 10px 0px #000080 inset;position: relative; z-index: 1; --state: running; overflow:hidden;}
#lrc { --motion: cover2; --tt: 1s; position: absolute; left: 50%;top:82%; transform: translate(-50%, 10px);font:normal 3em 华文隶书; color:#0000;filter:hue-rotate(0deg)contrast(120%)brightness(200%);filter: drop-shadow( 2px 2px 0px #000000); z-index: 2; }
#lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: pre;background:#ff0000 ; filter: drop-shadow( 0px 0px 1px #ffffff)drop-shadow( 0px 0px 1px #ffffff)drop-shadow( 0px 0px 1px #ffffff)drop-shadow( 0px 0px 1px #ffffff); -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }
#mplayer { position: absolute; width: 120px; height: 180px;left: 10%; z-index: 20;top:65%;overflow:hidden;}
#an{position: absolute;
top:0%; left:0%;
width: 100%;
height:100%; transform: rotateY(180deg);
}
@keyframes cover1{0% { width: 0%;letter-spacing: 0px; filter: blur(0px); } to { width: 500%;} }
@keyframes cover2 {0% { width: 0%;letter-spacing: 10px; color:#000090;}100% { width: 500%; letter-spacing: 0px;color:#ff0000; ; }}
</style>
<div id="papa">
<div id="mydiv"></div>
<div id="lrc" data-lrc="HCPlayer">HCPlayer</div>
<div id="mplayer">
<img id="an"src="https://pic.imgdb.cn/item/643b26c20d2dde577712571d.gif" width="100%" height="100%"></div>
</div>
<audio id="aud" src="https://www.qqmc.com/mp3/music142064420.mp3" autoplay loop></audio>
<script>
(function() {
let mKey = 0, mFlag = true;
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 averAdd = 0, offset = 0;
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));}
let geci = `旧梦一场 - 宋小睿
早知惊鸿一场 何必情深一往
昨日人去楼空泪微凉
道不尽缘本无常 情如风过水淌
红尘难逃几次人瘦花黄
总有几段旧爱昙花一刹芬芳
换几人划过梦的中央
每次挥手间 总留一抹惆怅
拼凑填满半生浮想
不屑谁说情过缘尽有多荒凉
忘乎所以间爱的痴狂
一别两宽 细数曾几过往
梦中你还如当初模样
早知惊鸿一场 何必情深一往
昨日人去楼空泪微凉
道不尽缘本无常 情如风过水淌
红尘难逃几次人瘦花黄
不屑谁说情过缘尽有多荒凉
忘乎所以间爱的痴狂
一别两宽 细数曾几过往
梦中你还如当初模样
早知惊鸿一场 何必情深一往
昨日人去楼空泪微凉
道不尽缘本无常 情如风过水淌
红尘难逃几次人瘦花黄
早知旧梦一场 莫叹心如水凉
冬去春回花又满山岗
谁不是阵阵感伤 悟出感叹两行
他日总有某人一世情长
他日总有某人一世情长
`;
let lrcAr = getLrcAr(geci);
let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrcAr;lrc.dataset.lrc = lrcAr.replace(/<br>/, '\n');lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');papa.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};
let calcKey = () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime <= lrcAr) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;let time = lrcAr - (aud.currentTime - 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;}
let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('pause', () => mState());
aud.addEventListener('play', () => mState());
aud.addEventListener('seeked', () => calcKey());
aud.addEventListener('timeupdate', () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime >= lrcAr) {if (mKey === j) showLrc(lrcAr);else continue;}}});
mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
})();
</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("an"),
button = document.getElementById("mplayer");
if (image && button) {
button.onclick = function() {
if (this.value == '') {
image.play();
this.value = '.';
} else {
image.stop();
this.value = '';
}
};
}
</script>
<style>
#mydiv {
margin: 0px auto;
width: 1164px;
height: 620px;
overflow: hidden;
cursor: pointer;
position: relative;
--state: paused;
}
.dot {
position: absolute;
left: 50%;
bottom: -10px;
width: 100px;opacity:.8;
height: 200px;
border-radius: 0%;
background: url('https://pic.imgdb.cn/item/643b2ff90d2dde5777196f86.png')0 0/100% 100%;
}
@keyframes ani { to { transform: rotate(var(--deg)) translateY(-620px); }}
</style>
<script>
Array.from({length: 60}).forEach( (item,key) => {
let sp = document.createElement('span');
let ww = Math.random() * 5 + 2;
sp.className = 'dot';
sp.style.cssText += `
--deg: ${-50 + Math.random() * 100}deg;
animation: ani 20s ${Math.random() * key - 2}s infinite alternate var(--state);
`;
mydiv.appendChild(sp);
});
let mState = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
</script>
这个把粒子换成了羽毛，真有趣。歌词同步也很惊艳。旁边那个小动物是白狐还是白猫？{:4_173:} 这么多羽毛飞起，让人想打喷嚏{:4_173:}
欣赏亚伦老师好帖{:4_187:} 很漂亮的播放器，点赞！{:4_185:} 欣赏佳作！{:4_204:}
页:
[1]