html网页制作一个音频播放器并播放音频
时间: 2023-12-26 12:26:55 浏览: 29
以下是一个使用HTML和JavaScript制作的音频播放器的示例代码,你可以将其复制到HTML文件中并在浏览器中打开以查看效果。请确保音频文件与HTML文件在同一目录下,并将音频文件名替换为你自己的音频文件名。
```html
<!DOCTYPE html>
<html>
<head>
<title>音播放器</title>
<style>
/* 播放器样式 */
#player {
width: 500px;
margin: 0 auto;
text-align: center;
background-color: #f2f2f2;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px #ccc;
}
#player h1 {
font-size: 36px;
margin-bottom: 20px;
}
#player audio {
width: 100%;
margin-bottom: 20px;
}
#player button {
font-size: 24px;
margin-right: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
padding: 10px 20px;
cursor: pointer;
}
#player button:hover {
background-color: #3e8e41;
}
#player button:active {
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
</style>
</head>
<body>
<div id="player">
<h1>音频播放器</h1>
<audio id="audio" src="your_audio_file.mp3"></audio>
<button id="prev" onclick="prevTrack()">‹</button>
<button id="play" onclick="playPause()">播放</button>
<button id="next" onclick="nextTrack()">›</button>
<br>
<span id="currentTime">0:00</span> / <span id="duration">0:00</span>
<br>
<input type="range" id="seekSlider" value="0" onchange="seekTo()">
</div>
<script>
// 音频文件列表
var tracks = [
{
"name": "歌曲1",
"file": "your_audio_file1.mp3"
},
{
"name": "歌曲2",
"file": "your_audio_file2.mp3"
},
{
"name": "歌曲3",
"file": "your_audio_file3.mp3"
}
];
// 当前播放的音频文件索引
var currentTrack = 0;
// 获取音频元素
var audio = document.getElementById("audio");
// 获取播放按钮元素
var playButton = document.getElementById("play");
// 获取上一曲按钮元素
var prevButton = document.getElementById("prev");
// 获取下一曲按钮元素
var nextButton = document.getElementById("next");
// 获取当前时间元素
var currentTime = document.getElementById("currentTime");
// 获取总时长元素
var duration = document.getElementById("duration");
// 获取进度条元素
var seekSlider = document.getElementById("seekSlider");
// 更新播放时间和进度条
audio.addEventListener("timeupdate", function() {
currentTime.innerHTML = formatTime(audio.currentTime);
duration.innerHTML = formatTime(audio.duration);
seekSlider.value = audio.currentTime / audio.duration * 100;
});
// 格式化时间
function formatTime(time) {
var minutes = Math.floor(time / 60);
var seconds = Math.floor(time % 60);
if (seconds < 10) {
seconds = "0" + seconds;
}
return minutes + ":" + seconds;
}
// 播放/暂停
function playPause() {
if (audio.paused) {
audio.play();
playButton.innerHTML = "暂停";
} else {
audio.pause();
playButton.innerHTML = "播放";
}
}
// 上一曲
function prevTrack() {
currentTrack--;
if (currentTrack < 0) {
currentTrack = tracks.length - 1;
}
audio.src = tracks[currentTrack].file;
audio.play();
playButton.innerHTML = "暂停";
}
// 下一曲
function nextTrack() {
currentTrack++;
if (currentTrack >= tracks.length) {
currentTrack = 0;
}
audio.src = tracks[currentTrack].file;
audio.play();
playButton.innerHTML = "暂停";
}
// 跳转到指定时间
function seekTo() {
var seekToTime = audio.duration * seekSlider.value / 100;
audio.currentTime = seekToTime;
}
// 初始化
audio.src = tracks[currentTrack].file;
</script>
</body>
</html>
```