在Web開發中，我們可以使用CSS動畫來實現很多有趣的效果。而在處理聲音播放時，CSS動畫同樣可以為我們帶來很多驚喜。

為了演示這一點，讓我們看一下下面這段代碼：

.audio {
animation: pulse 1s infinite;
}
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}

這段代碼給一個名為"audio"的元素應用了一個名為"pulse"的動畫。這個動畫會無限循環地反復縮放元素的大小。當我們在播放音頻時，我們可以使用JavaScript來控制"audio"元素的動畫效果。這樣一來，我們就可以讓這個元素的大小在音頻播放時隨著聲音的節奏變化而自動調節。

接下來看一下如何使用JavaScript控制這個動畫。下面這段代碼展示了如何在播放聲音時觸發這個動畫：

var audio = new Audio('my-audio-file.mp3');
audio.addEventListener('play', function() {
document.querySelector('.audio').classList.add('animate');
});
audio.addEventListener('pause', function() {
document.querySelector('.audio').classList.remove('animate');
});

在這段代碼中，我們首先創建一個新的Audio對象，并給它傳遞我們要播放的音頻文件的URL。接下來，我們監聽"play"和"pause"事件。當音頻開始播放時，我們在"audio"元素上添加一個名為"animate"的CSS類，這個類將觸發我們在之前定義的"pulse"動畫。當音頻停止播放時，我們通過刪除這個類來停止動畫效果。

總的來說，使用CSS動畫來控制音頻播放時的動態效果是一種既有趣又實用的方法。這種方法可以為我們的網頁帶來更豐富的交互體驗，讓我們的網頁更加生動有趣。