以下是一个使用
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.inner
HTML = formatTime(audio.currentTime);
duration.inner
HTML = 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.inner
HTML = "暂停";
} else {
audio.pause();
playButton.inner
HTML = "
播放";
}
}
// 上一曲
function prevTrack() {
currentTrack--;
if (currentTrack < 0) {
currentTrack = tracks.length - 1;
}
audio.src = tracks[currentTrack].file;
audio.play();
playButton.inner
HTML = "暂停";
}
// 下一曲
function nextTrack() {
currentTrack++;
if (currentTrack >= tracks.length) {
currentTrack = 0;
}
audio.src = tracks[currentTrack].file;
audio.play();
playButton.inner
HTML = "暂停";
}
// 跳转到指定时间
function seekTo() {
var seekToTime = audio.duration * seekSlider.value / 100;
audio.currentTime = seekToTime;
}
// 初始化
audio.src = tracks[currentTrack].file;
</script>
</body>
</
html>
```
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
