<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>音频同步歌词</title>
<style>
.container {
font-family: Arial, sans-serif;
max-width: 600px;
margin: 20px auto;
padding: 20px;
text-align: center;
}
#audioPlayer {
width: 100%;
margin-bottom: 20px;
}
#lyrics {
color: #333;
line-height: 2;
font-size: 18px;
min-height: 60px;
padding: 10px;
}
.highlight {
color: red;
font-weight: bold;
background-color: rgba(255, 255, 0, 0.3);
border-radius: 4px;
padding: 2px 4px;
}
</style>
</head>
<body>
<div class="container">
<!-- 音频播放器 -->
<audio id="audioPlayer" controls>
<source src="your-audio.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>
<!-- 歌词显示区域 -->
<div id="lyrics">播放后将显示歌词...</div>
</div>
<script>
// 获取音频元素和歌词容器
const audio = document.getElementById("audioPlayer");
const lyricsDiv = document.getElementById("lyrics");
// 定义歌词及其出现的时间（单位：秒）
const lyrics = [
{ time: 0.0, text: "I will run, I will climb, I will soar" },
{ time: 4.0, text: "I’m undefeated" },
{ time: 8.0, text: "Jumping out of my skin, pull the chord" },
{ time: 12.0, text: "Yeah I believe it" },
{ time: 16.0, text: "The past, is everything we were don’t make us who we are" },
{ time: 20.0, text: "So I’ll dream, until I make it real, and all I see is stars" },
{ time: 24.0, text: "It's not until you fall that you fly" },
{ time: 28.0, text: "When your dreams come alive you’re unstoppable" },
{ time: 32.0, text: "Take a shot, chase the sun, find the beautiful" },
{ time: 36.0, text: "We will glow in the dark turning dust to gold" },
{ time: 40.0, text: "And we’ll dream it possible possible And we'll dream it possible" },
{ time: 44.0, text: "I will chase, I will reach, I will fly" },
{ time: 48.0, text: "Until I’m breaking, until I’m breaking" },
{ time: 52.0, text: "Out of my cage, like a bird in the night" },
{ time: 56.0, text: "I know I’m changing, I know I’m changing" },
{ time: 60.0, text: "In, into something big, better than before" },
{ time: 64.0, text: "And if it takes, takes a thousand lives" },
{ time: 68.0, text: "Then it’s worth fighting for" },
{ time: 72.0, text: "It's not until you fall that you fly" },
{ time: 76.0, text: "When your dreams come alive you’re unstoppable" },
{ time: 80.0, text: "Take a shot, chase the sun, find the beautiful" },
{ time: 84.0, text: "We will glow in the dark turning dust to gold" },
{ time: 88.0, text: "And we’ll dream it possible it possible" },
{ time: 92.0, text: "From the bottom to the top" },
{ time: 96.0, text: "We’re sparking wild fires" },
{ time: 100.0, text: "Never quit and never stop" },
{ time: 104.0, text: "The rest of our lives" },
{ time: 108.0, text: "From the bottom to the top" },
{ time: 112.0, text: "We’re sparking wild fires" },
{ time: 116.0, text: "Never quit and never stop" },
{ time: 120.0, text: "It's not until you fall that you fly" },
{ time: 124.0, text: "When your dreams come alive you’re unstoppable" },
{ time: 128.0, text: "Take a shot, chase the sun, find the beautiful" },
{ time: 132.0, text: "We will glow in the dark turning dust to gold" },
{ time: 136.0, text: "And we’ll dream it possible possible And we'll dream it possible" }
];
// 当音频播放或时间更新时触发
audio.addEventListener("timeupdate", () => {
const currentTime = audio.currentTime;
// 找到当前应显示的最新一行歌词
let currentLine = null;
for (let i = lyrics.length - 1; i >= 0; i--) {
if (currentTime >= lyrics[i].time) {
currentLine = lyrics[i];
break;
}
}
// 显示当前行并高亮
if (currentLine) {
lyricsDiv.innerHTML = `<span class="highlight">${currentLine.text}</span>`;
} else {
lyricsDiv.textContent = "正在加载歌词...";
}
});
// 播放结束时重置
audio.addEventListener("ended", () => {
lyricsDiv.textContent = "播放结束";
});
</script>
</body>
</html>帮我改写代码，使歌词和音频同步
扫一扫
492
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
