在 HTML 中，使用audio元素可以很方便地實(shí)現(xiàn)音頻播放功能。但是默認(rèn)的音頻播放器樣式較為簡(jiǎn)單，無(wú)法滿足個(gè)性化需求。下面我們來(lái)介紹如何使用 HTML 和 CSS 編寫一個(gè)自定義的 MP3 播放器帶有進(jìn)度條。

首先，我們需要在 HTML 中創(chuàng)建一個(gè)audio元素，定義音頻文件的路徑：

<audio src="music.mp3"></audio>

接下來(lái)，我們需要在 HTML 中創(chuàng)建一個(gè)播放器的容器，并在其中添加一些控制按鈕和進(jìn)度條：

<div class="player">
<button id="playBtn">播放</button>
<button id="pauseBtn">暫停</button>
<input id="progressBar" type="range" min="0" max="100" value="0">
</div>

其中，playBtn和pauseBtn分別用于啟動(dòng)和暫停音頻播放，progressBar是一個(gè)進(jìn)度滑塊，用于顯示音頻播放進(jìn)度。

在 CSS 中，我們需要對(duì)播放器和控制按鈕進(jìn)行樣式設(shè)置。此外，我們還需要為進(jìn)度滑塊添加樣式，并編寫 JavaScript 代碼來(lái)實(shí)現(xiàn)進(jìn)度條的更新效果。具體代碼如下：

.player {
position: relative;
width: 400px;
height: 50px;
background-color: #eee;
padding: 10px;
}
button {
background-color: #007bff;
color: #fff;
border: none;
padding: 5px 10px;
margin-right: 10px;
cursor: pointer;
}
#progressBar {
width: 100%;
-webkit-appearance: none;
background-color: #fff;
height: 10px;
border-radius: 5px;
outline: none;
}
#progressBar::-webkit-slider-thumb {
-webkit-appearance: none;
height: 20px;
width: 20px;
background-color: #007bff;
border-radius: 50%;
cursor: pointer;
margin-top: -5px;
}
#progressBar::-moz-range-thumb {
height: 20px;
width: 20px;
background-color: #007bff;
border-radius: 50%;
cursor: pointer;
}
#progressBar::-moz-range-track {
background-color: #fff;
height: 10px;
border-radius: 5px;
outline: none;
}
#progressBar::-webkit-slider-runnable-track {
background-color: #fff;
height: 10px;
border-radius: 5px;
outline: none;
}
#progressBar::-moz-range-progress {
background-color: #007bff;
height: 10px;
border-radius: 5px;
}
#progressBar::-webkit-progress-value {
background-color: #007bff;
height: 10px;
border-radius: 5px;
}
#progressBar::-moz-progress-bar {
background-color: #007bff;
height: 10px;
border-radius: 5px;
}

最后，我們需要編寫 JavaScript 代碼來(lái)實(shí)現(xiàn)進(jìn)度條的更新效果：

var audio = document.getElementsByTagName("audio")[0];
var playBtn = document.getElementById("playBtn");
var pauseBtn = document.getElementById("pauseBtn");
var progressBar = document.getElementById("progressBar");
playBtn.addEventListener("click", function() {
audio.play();
});
pauseBtn.addEventListener("click", function() {
audio.pause();
});
audio.addEventListener("timeupdate", function() {
var progress = (audio.currentTime / audio.duration) * 100;
progressBar.value = progress;
});
progressBar.addEventListener("change", function() {
var time = (progressBar.value / 100) * audio.duration;
audio.currentTime = time;
});

通過(guò)以上代碼，我們可以實(shí)現(xiàn)一個(gè)基本的 MP3 播放器，具有自定義樣式和進(jìn)度條顯示功能。可以通過(guò)audio元素提供的其他方法和屬性，進(jìn)一步擴(kuò)展其功能，并滿足不同的需求。