花心 (雷鬼版) (Cover 周华健) - 大头针
本帖最后由 亚伦影音工作室 于 2026-5-31 08:11 编辑 <br /><br /><style>@import url("https://fonts.googleapis.com/css2?family=Liu+Jian+Mao+Cao&family=Long+Cang&family=Ma+Shan+Zheng&family=ZCOOL+KuaiLe&family=ZCOOL+QingKe+HuangYou&display=swap");
#papa { margin: 10px -150px ; width: 1186px; height: 620px;background:#800000; box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #800000; position: relative; z-index: 10000; overflow:hidden;border-radius: 0px 0px;--state: running;/**/}
#pie{width: 100%; height: 100%;z-index: 1;
position:absolute;
top:0%; left:0%;background:url(https://pic1.imgdb.cn/item/6a1af099172c6dd74dd67a63.png) no-repeat center/cover;
object-fit: cover; pointer-events: none;
}
#d{width: 25% ;height: 25%;position:absolute;left: 23%; top:68%;z-index: 2;}
#source{width: 100% ;border-radius: 4px;}
#d1{width: 45% ;height: 45%;position:absolute;left: 1%; top:18%;z-index: 2; mix-blend-mode: multiply; }
#source1{width: 100% ;}
#wrapper {
position: absolute;
padding: 0px;
font-weight:200;font-size:2.5em;font-family:"Ma Shan Zheng","ZCOOL KuaiLe", "KaiTi","Ma Shan Zheng","STKaiti","SimHei", cursive, serif;
filter: drop-shadow(#fff 1px 0 0) drop-shadow(#fff 0 1px 0) drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px 0);
writing-mode: vertical-lr;white-space: pre;transform: translateX(-50%);text-align: center;
width: 60px;height:90%;left: 9%;z-index: 20;
top: 0;white-space: nowrap;
}
.char {
display: inline-block;
padding: 2px 0px;
opacity: 0;
transform: translate(var(--x), var(--y))rotate(-720deg) ;
animation: fadeIn 1.5s var(--delay) forwards,flash 0.5s linear infinite;
}
@keyframes fadeIn {
100% {
transform: translate(0, 50%);
opacity: 1;
}
}
@keyframes flash {
100% {filter: hue-rotate(360deg);}
}
.stop .char{animation-play-state: paused;}
#player {top:152px; left:196px;position: absolute;width:100px; height: 60px;cursor: pointer; z-index: 200;transition: all 1s;}
#cndpt{position: absolute; width:50px; height: 19px; opacity:1;border-radius: 2px;
background: url(https://pic1.imgdb.cn/item/69edf790f12344047bf53199.png)no-repeat center/cover;}
#enopg{ position: absolute;width:50px; height: 19px;opacity:0;border-radius: 2px;
background: url(https://pic1.imgdb.cn/item/69edf789f12344047bf53197.png)no-repeat center/cover;)
}
#fullscreen { opacity:1;position: absolute; width: 25px; height: 25px; bottom:22px; cursor: pointer;right:94%;z-index: 140;}
#qp{ width: 25px; height: 25px; position: absolute;background:url(https://pic1.imgdb.cn/item/6774df83d0e0a243d4ed4fd7.png)no-repeat center/cover;
}
#tc{ width: 25px; height: 25px; position: absolute;opacity:0;background:url(https://pic1.imgdb.cn/item/6774df8bd0e0a243d4ed4fd9.png)no-repeat center/cover; }
</style>
<div id="papa">
<div id="pie"></div>
<div id="d"><img id="source" src="https://pic1.imgdb.cn/item/69ea02fd022557d116e035bb.gif"> <div id="player">
<div id="cndpt"></div>
<div id="enopg"></div>
</div></div>
<div id="d1"><img id="source1" src="https://pic1.imgdb.cn/item/6a1ad7b8172c6dd74dd5e8ff.gif"></div>
<div id="testImg" >
<div id="wrapper"></div>
</div>
<span id="fullscreen" title="/">
<div id="qp"></div>
<div id="tc" ></div>
</span>
<audio id="aud"autoplay loop >
<source src="https://music.163.com/song/media/outer/url?id=3380844086.mp3" type="audio/mpeg">
</audio>
</div>
<script>
player.onclick = () => aud.paused ? (aud.play(),enopg.style.opacity= '0',cndpt.style.opacity = '1',image.classList.remove('stop')) : (aud.pause(),enopg.style.opacity = '1',cndpt.style.opacity = '0',image.classList.add('stop'));
letimage=document.getElementById('testImg');
let fs= true;
fullscreen.onclick = () => {
fs ? (papa.requestFullscreen(),qp.style.opacity= '0',tc.style.opacity = '1') : ( document.exitFullscreen(),qp.style.opacity = '1',tc.style.opacity = '0');
fs = !fs;
}
</script>
<script>
const gc = `
花心 (雷鬼版) - 大头针
花的心藏在蕊中
空把花期都错过
你的心忘了季节
从不轻易让人懂
为何不牵我的手
共听日月唱首歌
黑夜又白昼
黑夜又白昼
人生为欢有几何
春去春会来
花谢花会再开
只要你愿意
只要你愿意
让梦划向你心海
花瓣泪飘落风中
虽有悲意也从容
你的泪晶莹剔透
心中一定还有梦
为何不牵我的手
同看海天成一色
潮起又潮落
潮起又潮落
送走人间许多愁
春去春会来
花谢花会再开
只要你愿意
只要你愿意
让梦划向你心海
春去春会来
花谢花会再开
只要你愿意
只要你愿意
让梦划向你心海
只要你愿意
让梦划向你心海/name
`;
const gcAr = lrc2HC(gc);
let curkey = 0, isSeeking = false;
aud.ontimeupdate = () => {
if(curkey > gcAr.length - 1) return;
if(aud.currentTime >= gcAr) {
const gap = gcAr?. ?? 0 - gcAr;
showLrc(gcAr, wrapper, gap);
}
};
aud.onended = () => {
curkey = 0;
aud.play();
}
aud.onseeked = () => calcKey();
function lrc2HC(text) {
let lrcAr = [];
let ar = text.trim().split('\n');
ar.sort();
let reg = /\[(\d+)[.:](\d+)[.:](\d+)\](.*)/;
ar.forEach(item => {
if(reg.test(item)) {
let result = item.match(reg);
let tmsg = parseInt(result) * 60 + parseInt(result) + parseInt(result) / 1000;
lrcAr.push(.trim()]);
}
});
return lrcAr ? lrcAr : ;
};
function calcKey() {
for (let j = 0; j < gcAr.length; j++) {
if (aud.currentTime <= gcAr) {
curkey = j - 1;
break;
}
}
if (curkey < 0) curkey = 0;
if (curkey > gcAr.length - 1) curkey = gcAr.length - 1;
let time = gcAr?. ?? 0 - gcAr;
isSeeking = false;
showLrc(gcAr, wrapper, time);
}
function showLrc(str, targetElm, time) {
if(isSeeking) return;
targetElm.innerHTML = '';
const chars = str.split('').map(c => c === ' ' ? ' ' : c);
const frg = document.createDocumentFragment();
chars.forEach((char, idx) => {
const span = document.createElement('span');
span.innerHTML = char;
span.classList.add('char');
const x = Math.random() * (Math.random() > 0.5 ? -20 : 900);
const y = Math.random() * (Math.random() > 0.5 ? -600: 600);
span.style.cssText += `
color: #${Math.random().toString(15).substring(2,8)};
--x: ${x}px;
--y: ${y}px;
--delay: ${Math.random() * 0.5}s;
`;
frg.appendChild(span);
});
targetElm.appendChild(frg);
curkey ++;
setTimeout(() =>isSeeking = false, time);
}
</script>
<script>
const renderGif = function (dom) {
// gif图片的url地址
const src = dom.src;
// 创建的用来播放gif的canvas元素
const canvas = document.createElement('canvas');
const context = canvas.getContext("2d");
// 一些与GIF播放有关的变量
let imageDecoder = null;
let imageIndex = 0;
let paused = false;
// 绘制方法
const renderImage = function (result) {
context.drawImage(result.image, 0, 0);
const track = imageDecoder.tracks.selectedTrack;
// 如果播放结束，从头开始循环
if (imageDecoder.complete) {
if (track.frameCount === 1) {
return;
}
if (imageIndex + 1 >= track.frameCount) {
imageIndex = 0;
}
}
// 绘制下一帧内容
imageDecoder
.decode({ frameIndex: ++imageIndex })
.then((nextResult) => {
if (paused === false) {
setTimeout(() => {
renderImage(nextResult);
}, result.image.duration / 1000);
} else {
canvas.nextResult = nextResult;
}
})
.catch((e) => {
// imageIndex可能超出的容错处理
if (e instanceof RangeError) {
imageIndex = 0;
imageDecoder.decode({ frameIndex: imageIndex }).then(renderImage);
} else {
throw e;
}
});
};
// 判断地址能够请求
fetch(src).then((response) => {
// 可以请求，进行样式处理
// 设置canvas尺寸
canvas.width = dom.naturalWidth;
canvas.height = dom.naturalHeight;
// 实际显示尺寸
canvas.style.width = dom.clientWidth + 'px';
canvas.style.height = dom.clientHeight + 'px';
// 隐藏图片，显示画布
dom.after(canvas);
dom.style.position = 'absolute';
dom.style.opacity = '0';
// 将GIF绘制在canvas上
imageDecoder = new ImageDecoder({
data: response.body,
type: "image/gif"
});
// 解析第一帧并绘制
imageDecoder.decode({
frameIndex: imageIndex
}).then(renderImage);
});
// 事件绑定处理
dom.addEventListener('ended',function () {
if (paused) {
paused = false;
renderImage(canvas.nextResult);
} else {aud.pause();
paused = true;
}
});
canvas.addEventListener('ended',function () {
if (paused) {
paused = false;
renderImage(canvas.nextResult);
} else {
paused = true;
}
});
player.addEventListener('click', function () {
if (paused) {
paused = false;
renderImage(canvas.nextResult);
} else {
paused = true;
}
});
};
renderGif(source); renderGif(source1);
</script>
亚伦老师这个播放器真漂亮！ 谢谢老师分享！ 漂亮~谢谢亚伦老师精彩分享 谢谢亚伦老师精彩分享！
页:
[1]