|
|
楼主 |
发表于 2025-8-15 22:59:19
|
显示全部楼层
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>音乐播放器</title>
<style>
#papa {
margin: auto;
width: 1024px;
height: 576px;
background: url('https://cccimg.com/view.php/420c68ed9d148740f26c46230696dc23.gif') no-repeat center/cover;
box-shadow: 3px 3px 20px #000;
overflow: hidden;
position: relative;
z-index: 1;
}
#mypic {
position: absolute;
width: 60px;
cursor: pointer;
animation: rot 6s infinite linear;
animation-play-state: var(--state, paused);
}
@keyframes rot { to { transform: rotate(360deg); } }
.lrc-container {
position: absolute;
left: 50%;
transform: translate(-50%);
bottom: 10px;
width: 80%;
text-align: center;
color: white;
font-size: 28px;
text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
background-color: rgba(0,0,0,0.3);
padding: 5px;
border-radius: 5px;
transition: opacity 0.3s;
}
.lrc-container.fade {
opacity: 0.7;
}
</style>
</head>
<body>
<div id="papa">
<img id="mypic" src="https://cccimg.com/view.php/87dc6bc6ebb811c5fc565dcab9998dcc.png" alt="音乐图标" />
<audio id="aud" src="https://cccimg.com/view.php/e01001a81d866af0701de0170eb66ce5.mp3" autoplay loop></audio>
</div>
<script>
// 标准格式的歌词数据（时间单位：秒）
let geci = [
{ time: 0.00, text: "芍药花开" },
{ time: 5.30, text: "LRC歌词编制：shuangzi" },
{ time: 13.00, text: "真以为方幻幻兮是与女方鼎见兮女曰" },
{ time: 23.00, text: "观乎" },
{ time: 24.00, text: "是曰" },
{ time: 26.00, text: "寄促且往" },
{ time: 28.00, text: "观乎惟之外" },
{ time: 31.00, text: "寻虚且乐" },
{ time: 33.00, text: "为士与女饮其相续赠之以芍药" },
{ time: 57.00, text: "百花争艳中" },
{ time: 60.00, text: "漫山芍药红" },
{ time: 65.00, text: "顾盼一瞬间" },
{ time: 68.00, text: "怦然已心动" },
{ time: 73.00, text: "都夸牡丹鲜艳怎知芍药雍容" },
{ time: 80.00, text: "谁能解读花语心有灵犀相通" },
{ time: 91.00, text: "啊......." },
{ time: 94.00, text: "芍药花开" },
{ time: 99.00, text: "啊......." },
{ time: 102.00, text: "芍药花开......" },
{ time: 106.00, text: "嫣然一笑风情万种" },
{ time: 113.00, text: "年年岁岁" },
{ time: 118.00, text: "佳期如梦" },
{ time: 124.00, text: "入梦" },
{ time: 144.00, text: "绿萼着红装" },
{ time: 147.00, text: "芍药掩芳容" },
{ time: 150.00, text: "相谑戏花影" },
{ time: 155.00, text: "尽在不言中" },
{ time: 159.00, text: "都爱牡丹富贵" },
{ time: 163.00, text: "怎知芍药意浓" },
{ time: 167.00, text: "从来花中姊妹" },
{ time: 170.00, text: "偏偏芍药情重" },
{ time: 177.00, text: "啊......." },
{ time: 180.00, text: "啊......芍药花开." },
{ time: 193.00, text: "一笑相逢把酒临风" },
{ time: 199.00, text: "岁岁年年" },
{ time: 204.00, text: "此情与共" },
{ time: 211.00, text: "与共....." },
{ time: 215.00, text: "啊......" },
{ time: 218.00, text: "芍药花开" },
{ time: 222.00, text: "啊.....芍药花开" },
{ time: 230.00, text: "一笑相逢把酒临风" },
{ time: 237.00, text: "岁岁年年此情与共" },
{ time: 240.00, text: "与共......." },
{ time: 252.00, text: "啊......此情与共" },
{ time: 260.00, text: "与共....." }
];
// 获取音频元素和创建歌词容器
const audio = document.getElementById('aud');
const lrcContainer = document.createElement('div');
lrcContainer.className = 'lrc-container';
document.getElementById('papa').appendChild(lrcContainer);
// 当前显示的歌词索引
let currentLine = -1;
// 更新歌词显示
function updateLrc() {
const currentTime = audio.currentTime;
// 查找当前应该显示的歌词行
let newLine = -1;
for (let i = 0; i < geci.length; i++) {
if (i === geci.length - 1 || (currentTime >= geci[i].time && currentTime < geci[i+1].time)) {
newLine = i;
break;
}
}
// 如果需要更新歌词
if (newLine !== currentLine) {
// 添加淡入淡出效果
lrcContainer.classList.add('fade');
setTimeout(() => {
currentLine = newLine;
if (newLine >= 0) {
lrcContainer.textContent = geci[newLine].text;
} else {
lrcContainer.textContent = '';
}
lrcContainer.classList.remove('fade');
}, 150);
}
}
// 监听音频时间更新事件
audio.addEventListener('timeupdate', updateLrc);
// 监听音频播放/暂停事件，控制图片旋转
const mypic = document.getElementById('mypic');
audio.addEventListener('play', () => {
mypic.style.setProperty('--state', 'running');
});
audio.addEventListener('pause', () => {
mypic.style.setProperty('--state', 'paused');
});
// 点击图片切换播放/暂停状态
mypic.addEventListener('click', () => {
if (audio.paused) {
audio.play();
} else {
audio.pause();
}
});
// 初始化歌词显示
updateLrc();
</script>
</body>
</html>
|
|
发表于 2025-8-15 22:58:23
