CSS可以用來制作漂亮的播放器，下面是一個(gè)簡單的制作過程。

HTML結(jié)構(gòu)：
<div id="player">
<div class="progress">
<div class="bar"></div>
</div>
<button class="playpause"></button>
</div>
CSS樣式：
#player {
position: relative;
}
.progress {
width: 100%;
height: 10px;
background-color: #ddd;
}
.bar {
height: 100%;
background-color: #ff5c5c;
width: 0%;
}
.playpause {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 50px;
height: 50px;
border: none;
background-color: transparent;
background-image: url('play.png');
background-size: contain;
}
.playing {
background-image: url('pause.png');
}
JS交互：
const player = document.querySelector('#player');
const progress = player.querySelector('.progress');
const bar = progress.querySelector('.bar');
const playpause = player.querySelector('.playpause');
let playing = false;
function togglePlay() {
playing = !playing;
if (playing) {
playpause.classList.add('playing');
} else {
playpause.classList.remove('playing');
}
}
playpause.addEventListener('click', togglePlay);
function updateBar() {
bar.style.width = audio.currentTime / audio.duration * 100 + '%';
}
audio.addEventListener('timeupdate', updateBar);

以上代碼可以制作一個(gè)簡單的播放器，其中HTML結(jié)構(gòu)包括一個(gè)父級div，一個(gè)進(jìn)度條和一個(gè)播放暫停按鈕。CSS樣式定義了進(jìn)度條和按鈕的樣式，以及按鈕的一些動畫效果。JS交互則實(shí)現(xiàn)了播放和暫停按鈕的功能，以及進(jìn)度條的更新。