CSS代碼也可以用來創作音頻的格式。在CSS中，你可以用 @keyframes 規則創建動畫來控制音頻。這種CSS動畫的每一幀可以定義音頻的播放狀態，包括開始、暫停、停止和重置等。

在以下示例中，我們將使用CSS創建一個簡單的音頻控制器。下面是代碼：

audio {
display: none;
}
#player {
display: flex;
align-items: center;
justify-content: center;
margin-top: 20px;
}
#play {
width: 50px;
height: 50px;
background-image: url(./play.png);
background-repeat: no-repeat;
background-size: contain;
cursor: pointer;
}
#play.playing {
background-image: url(./pause.png);
}
@keyframes playing {
0% {
background-position: 0 0;
}
100% {
background-position: -50px 0;
}
}
#play.playing {
animation: playing 0.5s steps(1) infinite;
}

這個代碼片段從一個隱藏的 audio 元素開始。使用CSS選擇器 #player，我們創建了一個包含播放/暫停按鈕的容器。

播放按鈕具有一個初始背景圖像，該背景圖像在按下按鈕后將切換為暫停按鈕。在 CSS 中，我們定義了一個 @keyframes 規則，在音頻播放時播放播放圖像動畫。

最終效果是，你會看到 play.png 切換為 pause.png，而播放圖標也跳動著，彰顯了你想要的音頻播放樣式。