淘宝【微风网站播放器】
本帖最后由 亚伦影音工作室 于 2026-10-7 09:42 编辑 <br /><br /><style type="text/css">#papa { left: -152px; width: 1186px; height: 680px; border-radius: 6px; background:#000 ; overflow: hidden; box-shadow: 4px 4px 8px #000 ; position: relative; }
#snowCanvas {
position: absolute;
z-index: 5;
top: 0;
left:0px;
width: 100%;
height: 100%;
pointer-events: none;
}
.mouse-title {width: 100%;
height: 100%;
font-size: 22px;
font-weight: bold;
white-space: nowrap;
position: absolute;
z-index: 15;
pointer-events: none;
background: linear-gradient(45deg, red, orange, yellow, green, cyan, blue, purple, red);
background-size: 100% 100%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
text-shadow: 0 0 10px rgba(255,255,255,0.3);
animation: streamLight 15s linear infinite;
}
.time-text{
font-size: 30px;
font-weight:bold;
white-space:nowrap;
position: absolute;
z-index: 20;
left: 50%;
top: 15%;
transform: translate(-50%,-50%);
background: linear-gradient(45deg, red, orange, yellow, green, cyan, blue, purple, red);
background-size: 400% 100%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 0 12px rgba(255,255,255,0.35);
animation: streamLight 15s linear infinite;
}
@keyframes streamLight {
0% {
background-position: 400% 0%;
}
100% {
background-position: -400% 0%;
}
}
#lyricBox {
position: absolute;
z-index: 35;
left: 0;
right: 0;
bottom: 180px;
height: 260px;
overflow: hidden;
text-align: center;
pointer-events: none;
}
.lyric-wrap {
transition: transform 0.3s ease;
}
.lyric-line {
font-size: 22px;
color: #ffffff;
line-height: 55px;
height: 55px;
transition: all 0.3s ease;
}
.lyric-line.active {
font-size: 28px;
background: linear-gradient(45deg, red, orange, yellow, green, cyan, blue, purple, red);
background-size: 400% 100%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: streamLight 12s linear infinite;
}
</style>
<div id="papa">
<canvas id="snowCanvas"></canvas>
<div class="mouse-title" id="trackTitle">亚伦影音工作室</div>
<div class="time-text" id="clock"></div>
<div id="lyricBox">
<div class="lyric-wrap" id="lyricWrap"></div>
</div>
<audio id="bgMusic" loop preload="auto" autoplay >
<source src="https://kkmp3.com/upload/music/music_6a317a17c487c.mp3" type="audio/mpeg">
<script>
const trackTitle = document.getElementById('trackTitle');
let mouseX = 0, mouseY = 0;
let targetX = 0, targetY = 0;
function animateTitle() {
targetX += (mouseX - targetX) * 0.08;
targetY += (mouseY - targetY) * 0.08;
trackTitle.style.left = targetX + 'px';
trackTitle.style.top = targetY + 'px';
requestAnimationFrame(animateTitle);
}
animateTitle();
document.addEventListener('mousemove', e=>{
mouseX = e.clientX;
mouseY = e.clientY;
});
document.addEventListener('touchmove', e=>{
mouseX = e.touches.clientX;
mouseY = e.touches.clientY;
});
const lrcText = `
为什么不能在一起 - 李大树
词：箫奕 / 茂茂
曲：箫奕 / 茂茂
制作团队：箫奕音乐
推广：李樾尘
企划：钟萱
出品：旺兔丝瑞
【未经著作权人许可不得翻唱翻录或使用】
为什么相爱的人不能在一起
为什么想你不能电话联系
你真的好绝情
我真的好伤心
早就注定这是一场悲剧
都怪我太痴情傻傻的等你
我知道你想要的我给不起
你真的好绝情
我真的好伤心
下辈子还想和你在一起
不离不弃
这些年我漂泊千里
始终没能把你忘记
听见别人提起爱情
总会想起你的姓名
多少深夜麻醉自己
多少眼泪流进梦里
多少个无人的夜里
好多话想讲给你听
为什么相爱的人不能在一起
为什么想你不能电话联系
你真的好绝情
我真的好伤心
早就注定这是一场悲剧
都怪我太痴情傻傻的等你
我知道你想要的我给不起
你真的好绝情
我真的好伤心
下辈子还想和你在一起
不离不弃
多少深夜麻醉自己
多少眼泪流进梦里
多少个无人的夜里
好多话想讲给你听
为什么相爱的人不能在一起
为什么想你不能电话联系
你真的好绝情
我真的好伤心
早就注定这是一场悲剧
都怪我太痴情傻傻的等你
我知道你想要的我给不起
你真的好绝情
我真的好伤心
下辈子还想和你在一起
不离不弃
为什么相爱的人不能在一起
为什么想你不能电话联系
你真的好绝情
我真的好伤心
早就注定这是一场悲剧
都怪我太痴情傻傻的等你
我知道你想要的我给不起
你真的好绝情
我真的好伤心
下辈子还想和你在一起
不离不弃`;
function parseLRC(lrcStr) {
const lines = lrcStr.trim().split('\n');
const list = [];
lines.forEach(line => {
const reg = /\[(\d{2}):(\d{2})\.(\d{3})\]\s*(.+)/;
const res = line.match(reg);
if (!res) return;
const m = Number(res);
const s = Number(res);
const ms = Number(res);
const time = m * 60 + s + ms / 1000;
list.push({time, text: res});
});
return list.sort((a,b)=>a.time - b.time);
}
const lyricList = parseLRC(lrcText);
const lyricBox = document.getElementById('lyricBox');
const lyricWrap = document.getElementById('lyricWrap');
let currentLineIndex = -1;
const lineHeight = 55;
function renderAllLyric() {
lyricWrap.innerHTML = '';
lyricList.forEach((item, idx)=>{
const div = document.createElement('div');
div.className = 'lyric-line';
div.dataset.index = idx;
div.innerText = item.text;
lyricWrap.appendChild(div);
});
}
renderAllLyric();
function updateLyric(audioTime) {
let targetIdx = 0;
for(let i=0; i<lyricList.length; i++){
if(lyricList.time <= audioTime){
targetIdx = i;
}else break;
}
if(targetIdx === currentLineIndex) return;
currentLineIndex = targetIdx;
document.querySelectorAll('.lyric-line').forEach(el=>el.classList.remove('active'));
const activeEl = document.querySelector(`.lyric-line`);
if(activeEl){
activeEl.classList.add('active');
const offset = targetIdx * lineHeight - lyricBox.clientHeight / 2 + lineHeight / 2;
lyricWrap.style.transform = `translateY(-${offset}px)`;
}
}
// 雪花逻辑
const snowCanvas = document.getElementById('snowCanvas');
const snowCtx = snowCanvas.getContext('2d');
let snowParticles = [];
let snowPlay = false;
let snowAnimationId = null;
function resizeSnowCanvas() {
snowCanvas.width = window.innerWidth;
snowCanvas.height = window.innerHeight;
}
resizeSnowCanvas();
window.addEventListener('resize', resizeSnowCanvas);
class Snowflake {
constructor() {
this.reset();
}
reset() {
this.x = Math.random() * snowCanvas.width;
this.y = Math.random() * -snowCanvas.height;
this.size = Math.random() * 2.5 + 1;
this.speed = Math.random() * 1.2 + 0.4;
this.wobble = Math.random() * Math.PI * 2;
this.wobbleSpeed = Math.random() * 0.015 + 0.005;
this.opacity = Math.random() * 0.5 + 0.3;
}
update() {
// 只有播放状态雪花才移动
if(snowPlay){
this.y += this.speed;
this.x += Math.sin(this.wobble) * 0.6;
this.wobble += this.wobbleSpeed;
}
}
draw() {
snowCtx.beginPath();
snowCtx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
snowCtx.fillStyle = `rgba(255, 255, 255, ${this.opacity})`;
snowCtx.fill();
}
}
function initSnow() {
snowParticles = [];
for (let i = 0; i < 180; i++) {
snowParticles.push(new Snowflake());
}
}
initSnow();
function animateSnow() {
snowCtx.clearRect(0, 0, snowCanvas.width, snowCanvas.height);
for (const p of snowParticles) {
p.update();
p.draw();
if (p.y > snowCanvas.height) {
p.reset();
}
}
snowAnimationId = requestAnimationFrame(animateSnow);
}
animateSnow();
const audio = document.getElementById('bgMusic');
let playing = false;
let previewTimer = null;
let testTime = 0;
audio.load();
// 页面点击播放/暂停
document.addEventListener('click', function() {
if (!playing) {
audio.play().then(() => {
playing = true;
snowPlay = true;
// 清空预览定时器
if(previewTimer){
clearInterval(previewTimer);
previewTimer = null;
}
}).catch(err => {
console.error("播放失败",err);
alert('浏览器限制自动播放，请手动点击页面再次尝试');
});
} else {
audio.pause();
playing = false;
snowPlay = false;
testTime = audio.currentTime;
// 暂停后歌词定格在当前时间，不再滚动
updateLyric(testTime);
}
});
// 音频播放时开启雪花
audio.addEventListener('play', ()=>{
playing = true;
snowPlay = true;
if(previewTimer){
clearInterval(previewTimer);
previewTimer = null;
}
})
// 音频暂停时冻结雪花+定格歌词
audio.addEventListener('pause', ()=>{
playing = false;
snowPlay = false;
testTime = audio.currentTime;
updateLyric(testTime);
})
audio.addEventListener('timeupdate', () => {
if (playing) {
updateLyric(audio.currentTime);
}
});
function padNum(n){
return String(n).padStart(2, '0');
}
function updateClock(){
const now = new Date();
const h = padNum(now.getHours());
const m = padNum(now.getMinutes());
const s = padNum(now.getSeconds());
const y = now.getFullYear();
const mo = padNum(now.getMonth()+1);
const d = padNum(now.getDate());
document.getElementById('clock').innerText = `当前时间： ${y}-${mo}-${d} ${h}:${m}:${s}`;
}
updateClock();
setInterval(updateClock, 1000);
</script>
欣赏亚伦老师精彩播放器！ 好听好看，谢谢亚伦老师分享经典
页:
[1]