帮我通过html写一个《下个,路口,见》的音频播放器并且附带歌词
时间: 2023-08-28 17:32:46 浏览: 47
好的,以下是一个《下个,路口,见》的音频播放器和歌词的HTML代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>下个,路口,见 - 音频播放器</title>
</head>
<body>
<audio id="myAudio" controls>
<source src="xia-ge-lu-kou-jian.mp3" type="audio/mpeg">
</audio>
<div id="lyrics"></div>
<script>
// 歌词数据
var lyricsData = [
{time: 0, text: "下个路口见"},
{time: 4, text: "想了又想"},
{time: 7, text: "还是决定"},
{time: 10, text: "放手一搏"},
{time: 14, text: "你说你会等"},
{time: 17, text: "我说我不想"},
{time: 21, text: "我们都在等"},
{time: 24, text: "等到什么时候"},
{time: 28, text: "下个路口见"},
{time: 31, text: "我会走得很坚决"},
{time: 35, text: "下个路口见"},
{time: 38, text: "你要笑得很灿烂"},
{time: 42, text: "下个路口见"},
{time: 45, text: "我要走得更远更高"},
{time: 49, text: "下个路口见"},
{time: 52, text: "你要过得更好更好"}
];
// 获取歌词容器
var lyricsContainer = document.getElementById("lyrics");
// 监听音频播放进度
var myAudio = document.getElementById("myAudio");
myAudio.addEventListener("timeupdate", function() {
// 获取当前播放时间
var currentTime = myAudio.currentTime;
// 查找当前时间对应的歌词
for (var i = 0; i < lyricsData.length; i++) {
if (currentTime >= lyricsData[i].time && currentTime < (lyricsData[i+1] ? lyricsData[i+1].time : myAudio.duration)) {
// 更新歌词容器
lyricsContainer.innerHTML = lyricsData[i].text;
break;
}
}
});
</script>
</body>
</html>
```
其中,`audio` 标签中的 `src` 属性指定了《下个,路口,见》的音频文件;`div` 标签用于显示歌词。在 JavaScript 中,我们监听了音频播放进度的 `timeupdate` 事件,根据当前播放时间动态更新显示的歌词。歌词数据可以通过 AJAX 请求获取,也可以直接在 JavaScript 中定义。在示例中,我们使用了一个数组来存储歌词数据。