我也克隆【待完成】
本帖最后由 亚伦影音工作室 于 2023-11-25 21:23 编辑 <br /><br /><style>#papa {margin: 0px 0 0 calc(50% - 681px); width: 1200px;height:680px;box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 6px #880000; overflow: hidden;place-items: center; position: relative;z-index: 12345;background: #333;}
#mplayer { width: 200px; height: 200px; position: absolute; left: 70%;top: 50%;}
#mplayer text { user-select: none; }
#sPath { cursor: pointer; }
#progress { pointer-events: none; }
#prog {position: absolute;
width: 100%;
height: 1px;
cursor: pointer;
top:92%;
opacity:1;
left:0%;
}
#btnPlay:hover { cursor: pointer; filter: brightness(1.2); }
#dt{position: absolute;top:0%; left:0%;width: 100%;height: 100%;z-index: -1;opacity: 1; }
#dt1{position: absolute;top:0%; left:0%;width: 100%;height: 100%;z-index: -1;mix-blend-mode:lighten; }
#lrc { --motion: cover1; --tt: 2s; --state: paused; position: absolute; left: 40%; transform: translate(-50%); top: 84%; font: normal 4em 华文新魏; color:#ff0000; -webkit-background-clip: text; filter:drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px0);}
#lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: pre; background:#000080 ; filter: #ffffff; -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }
@keyframes cover1{0% { width: 0%;filter: hue-rotate(360deg)brightness(150%)}
100% { transform: rotateY(0deg)rotatex(0deg);filter: hue-rotate(0deg)brightness(150%);width: 100%;}
}
@keyframes cover2 { 0% { width: 0%;filter: hue-rotate(360deg)brightness(150%)}
100% { transform: rotateY(0deg)rotatex(0deg);filter: hue-rotate(0deg)brightness(150%);width: 100%;}
}
#fullscreen { position: absolute; top:5%; left:calc(85% - 15px);font: normal 2em/0em 楷体;color:#ffffff; opacity: 1; cursor: pointer; z-index: 111}
</style>
<div id="papa">
<span id="fullscreen">全屏欣赏</span>
<div id='dt' ><img id="testImg" src="https://xlaj.cn/assets/file/zp/20231024214007.gif" width="100%" height="100%"></div>
<div id='dt1' ><img id="Img" src="https://pic.imgdb.cn/item/64a52c121ddac507cc5fd3ac.gif" width="100%" height="100%"></div>
<div id='prog' ></div>
<svg id="mplayer">
<path id="" d="0" fill="none" stroke="#ffffff" stroke-width="4"></path>
<circle id="" cx="0" cy="0" r="5" fill="#1E90FF" stroke="#0000" />
<g transform="translate(30,110)" fill="#1E90FF">
<text id="cu" x="0" y="0">00:00</text>
<image id="btnPlay" x="45" y="-22" width="30" height="30" xlink:href="https://638183.freep.cn/638183/t23/btn/pause2.png"></image>
<text id="du" x="90" y="0">00:00</text>
</g>
</svg>
<audio id="aud" src="https://www.qqmc.com/mp3/music176503550.mp3" autoplay loop></audio>
<div id="lrc" data-lrc="HCPlayer">HCPlayer</div>
</div>
<script>
let posAr = [];
let len = sPath.getTotalLength();
let playImg = 'https://638183.freep.cn/638183/t23/btn/play2.png',
pauseImg = 'https://638183.freep.cn/638183/t23/btn/pause2.png';
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 = () => aud.paused ? btnPlay.setAttribute('xlink:href',playImg) : btnPlay.setAttribute('xlink:href',pauseImg);
let getMinItem = (ar) => {
ar.sort((a,b) => a - b);
return ar;
};
for(i = 0; i < len; i ++) {
posAr.push(sPath.getPointAtLength(i));
}
sPath.onclick = (e) => {
let ex = Math.round(e.offsetX), ey = Math.round(e.offsetY), yAr = [];
for(i = 0; i < len; i ++) {
let px = Math.round(posAr.x), py = Math.round(posAr.y);
if(Math.abs(ex-px) <= 4) {
yAr.push();
}
}
aud.currentTime = getMinItem(yAr) * aud.duration / len;
};
aud.addEventListener('timeupdate', () => {
let idx = Math.round(aud.currentTime * len / aud.duration);
progress.setAttribute('cx',posAr.x);
progress.setAttribute('cy',posAr.y);
cu.textContent = toMin(aud.currentTime);
du.textContent = toMin(aud.duration);
});
aud.addEventListener('timeupdate', () => {
prog.style.background = 'linear-gradient(90deg, rgba(173,255,47)' + aud.currentTime / aud.duration * 100 + '%, #880080 0)';
});
prog.onclick = (e) => {
aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
let ex = Math.round(e.offsetX), ey = Math.round(e.offsetY), yAr = [];
for(i = 0; i < len; i ++) {
let px = Math.round(posAr.x), py = Math.round(posAr.y);
if(Math.abs(ex-px) <= 4) {
yAr.push();
}
}
};
var image = document.getElementById("testImg");var image1 = document.getElementById("Img");
</script>
<script>
(function() {
/*原始lrc歌词*/
let lrcStr = `词：崔伟立
曲：崔伟立
编曲：冯丹
笛子：丁晓逵
伴唱：凌菲
混音：苏洲
监制：鑫明
制作人：冯丹
古筝：丁雪儿
我越是爱你心越痛
伤人的感情不敢再触碰
眼望着你走的背影
这炙热的爱从此结冰
我越是爱你心越痛
可惜这美好却不能永恒
怀拥着你给的残梦
就让它慢慢消散风中
我就像是一片浮萍
流浪在这有你的城
你是那夜空最亮的星
是我眼中最美风景
我就像流浪的风筝
偏偏落在你的手中
生命都甘愿被你掌控
你却把它送回寂寞牢笼
我越是爱你心越痛
伤人的感情不敢再触碰
眼望着你走的背影
这炙热的爱从此结冰
我越是爱你心越痛
可惜这美好却不能永恒
怀拥着你给的残梦
就让它慢慢消散风中
我就像流浪的风筝
偏偏落在你的手中
生命都甘愿被你掌控
你却把它送回寂寞牢笼
我越是爱你心越痛
伤人的感情不敢再触碰
眼望着你走的背影
这炙热的爱从此结冰
我越是爱你心越痛
可惜这美好却不能永恒
怀拥着你给的残梦
就让它慢慢消散风中
我越是爱你心越痛
伤人的感情不敢再触碰
眼望着你走的背影
这炙热的爱从此结冰
我越是爱你心越痛
可惜这美好却不能永恒
怀拥着你给的残梦
就让它慢慢消散风中
就让它慢慢消散风中
`;
/*变量 ：mKey - 当前歌词索引；mFlag ：调用关键帧动画索引；averAdd ：平均值补偿*/
let mKey = 0, mFlag = true, averAdd = 0.3;
/*函数 ：获取每句歌词用时，歌词用时若超过平均值则取平均值，最后一句歌词则取平均值*/
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;
};
/*函数 ：从原始lrc歌词获取信息并存入 n*3 数组*/
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 showLrc = (time) => {
let name = mFlag ? 'cover1' : 'cover2';
lrc.innerHTML = lrcAr;
lrc.dataset.lrc = lrcAr;
lrc.style.setProperty('--motion', name);
lrc.style.setProperty('--tt', time + 's');
lrc.style.setProperty('--state', 'running');
mKey += 1;
mFlag = !mFlag;
};
/*函数 ：处理当前歌词索引 mKey*/
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 = () => aud.paused ? (lrc.style.setProperty('--state','paused')) : (lrc.style.setProperty('--state','running'));
/*监听播放进度*/
aud.addEventListener('timeupdate', () => {
for (j = 0; j < lrcAr.length; j++) {
if (aud.currentTime >= lrcAr) {
cKey = j;
if (mKey === j) showLrc(lrcAr);
else continue;
}
}
});
aud.addEventListener('pause', () => mState());/*监听暂停事件*/
aud.addEventListener('play', () => mState());/*监听播放事件*/
aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/
let lrcAr = getLrcAr(lrcStr); /*获得歌词数组*/
})();
let fs = true;
fullscreen.onclick = () => {
fs ? (fullscreen.innerText = '退出全屏', papa.requestFullscreen()) : (fullscreen.innerText = '全屏欣赏', document.exitFullscreen());
fs = !fs;
};
</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 = ''; 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;
}
}
};
}
(function() {var image = document.getElementById("testImg");var image1 = document.getElementById("Img");
btnPlay.onclick = () =>aud.paused ? (aud.play(),image.play(),image1.play()):(aud.pause(),image.stop(),image1.stop());
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
})();
</script>
这个美女路径怎么走过的地方不是变色的？{:4_203:} 是呀是呀！！ 欣赏欣赏
页:
[1]