web html5 制作音乐播放器,播放音乐《起风了》并显示歌词
时间: 2023-12-10 11:38:44 浏览: 35
以下是一个简单的示例代码,可以在 HTML5 中制作音乐播放器并显示歌词:
```html
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Music Player</title>
<meta charset="UTF-8">
<style type="text/css">
#music-container {
width: 400px;
margin: 50px auto;
text-align: center;
}
#lyrics-container {
width: 400px;
margin: 20px auto;
text-align: center;
font-size: 18px;
line-height: 30px;
}
</style>
</head>
<body>
<div id="music-container">
<audio id="music" controls="controls">
<source src="qifengle.mp3" type="audio/mp3">
</audio>
</div>
<div id="lyrics-container"></div>
<script type="text/javascript">
// 歌词
var lyrics = [
{time: 0, text: "起风了,唐七公子"},
{time: 7, text: "你是否还记得那年"},
{time: 11, text: "我们在山丘上唱的歌"},
{time: 16, text: "像那轻风吹过的快乐"},
{time: 22, text: "起风了,唐七公子"},
{time: 26, text: "你是否还记得那天"},
{time: 31, text: "我们在溪边捉的蜻蜓"},
{time: 36, text: "像那流水逝去的年华"}
];
// 显示歌词
var lyricsContainer = document.getElementById("lyrics-container");
function showLyrics() {
var currentTime = music.currentTime;
for (var i = 0; i < lyrics.length; i++) {
if (currentTime > lyrics[i].time) {
lyricsContainer.innerHTML = lyrics[i].text;
}
}
requestAnimationFrame(showLyrics);
}
// 播放音乐
var music = document.getElementById("music");
music.play();
showLyrics();
</script>
</body>
</html>
```
在这个示例代码中,我们使用了 `audio` 元素来播放音乐,并且使用了 `source` 元素来指定音乐文件的路径。我们还定义了一个 `lyrics` 数组,用于存储歌词和时间,然后使用 `showLyrics` 函数来实时显示歌词。最后,我们在页面加载完成后自动播放音乐,并且调用 `showLyrics` 函数来显示歌词。