<!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 current
Time = audio.current
Time;
// 找到当前应显示的最新一行歌词
let currentLine = null;
for (let i = lyrics.length
- 1; i >= 0; i
--) {
if (current
Time >= 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>帮我改写代码，使歌词和音频同步
博客介绍了Glow效果，即对象旁出现光晕且看起来更亮。还阐述了产生Glow效果的简单步骤：先按通常模式渲染场景，再将带Glow效果的物体渲染到纹理，对该纹理做模糊处理，最后把处理后的纹理贴到屏幕。此外还给出了详细实现参考及渲染例子链接。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
