隨著互聯網技術的不斷發展，音頻播放在網頁上也逐漸成為常見的需求。為了方便用戶了解音頻播放的進度，我們需要在網頁上添加音頻進度條。這里我們介紹一種使用CSS樣式表制作音頻進度條的方法。

/* 定義進度條樣式 */
.progress {
position: relative;
height: 5px;
background-color: #ddd;
}
.progress-bar {
position: absolute;
left: 0;
top: 0;
height: 100%;
background-color: #007bff;
}
/* 定義進度百分比樣式 */
.progress-percent {
font-size: 12px;
color: #333;
margin-top: 5px;
}

上面的代碼定義了進度條的基本樣式和進度百分比的樣式。接下來，我們需要使用JavaScript來控制音頻進度條。

// 獲取音頻文件和進度條元素
var audio = document.getElementById("myAudio");
var progress = document.getElementById("myProgress");
// 監聽播放事件
audio.addEventListener("timeupdate", function() {
// 計算進度百分比
var percent = Math.floor((audio.currentTime / audio.duration) * 100);
// 更新進度條
progress.getElementsByTagName("div")[0].style.width = percent + "%";
// 更新進度百分比
progress.nextElementSibling.innerHTML = percent + "%";
});

上面的代碼使用addEventListener方法監聽音頻文件的播放事件，計算出當前播放時間占總時間的百分比，然后更新進度條和進度百分比。

以上就是使用CSS樣式表制作音頻進度條的方法。通過這種方法，我們可以靈活地控制音頻進度條的樣式，同時也可以通過JavaScript來控制進度條的進度。