在 HTML 中，使用audio元素可以很方便地實現音頻播放功能。但是默認的音頻播放器樣式較為簡單，無法滿足個性化需求。下面我們來介紹如何使用 HTML 和 CSS 編寫一個自定義的 MP3 播放器帶有進度條。

首先，我們需要在 HTML 中創建一個audio元素，定義音頻文件的路徑：

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

接下來，我們需要在 HTML 中創建一個播放器的容器，并在其中添加一些控制按鈕和進度條：

<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分別用于啟動和暫停音頻播放，progressBar是一個進度滑塊，用于顯示音頻播放進度。

在 CSS 中，我們需要對播放器和控制按鈕進行樣式設置。此外，我們還需要為進度滑塊添加樣式，并編寫 JavaScript 代碼來實現進度條的更新效果。具體代碼如下：

.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 代碼來實現進度條的更新效果：

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;
});

通過以上代碼，我們可以實現一個基本的 MP3 播放器，具有自定義樣式和進度條顯示功能?？梢酝ㄟ^audio元素提供的其他方法和屬性，進一步擴展其功能，并滿足不同的需求。