帮我通过html写一个《下个,路口,见》李宇春的音频播放器并且附带歌词
时间: 2023-08-28 13:32:47 浏览: 253
好的,以下是一个《下个,路口,见》李宇春的音频播放器和歌词的HTML代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>下个,路口,见 - 李宇春版本</title>
</head>
<body>
<audio id="myAudio" controls>
<source src="xia-ge-lu-kou-jian-li-yu-chun.mp3" type="audio/mpeg">
</audio>
<div id="lyrics"></div>
<script>
// 歌词数据
var lyricsData = [
{time: 0, text: "[00:00.00]下个路口见"},
{time: 4, text: "[00:04.00]想了又想"},
{time: 7, text: "[00:07.50]还是决定"},
{time: 10, text: "[00:10.50]放手一搏"},
{time: 14, text: "[00:14.50]你说你会等"},
{time: 17, text: "[00:17.00]我说我不想"},
{time: 21, text: "[00:21.00]我们都在等"},
{time: 24, text: "[00:24.00]等到什么时候"},
{time: 28, text: "[00:28.50]下个路口见"},
{time: 31, text: "[00:31.00]我会走得很坚决"},
{time: 35, text: "[00:35.00]下个路口见"},
{time: 38, text: "[00:38.50]你要笑得很灿烂"},
{time: 42, text: "[00:42.00]下个路口见"},
{time: 45, text: "[00:45.00]我要走得更远更高"},
{time: 49, text: "[00:49.00]下个路口见"},
{time: 52, text: "[00:52.00]你要过得更好更好"}
];
// 获取歌词容器
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` 事件,根据当前播放时间动态更新显示的歌词。歌词数据中的时间格式为 `[mm:ss.xx]`,表示分钟、秒钟和毫秒。
阅读全文