使用 CSS 和 WebKit 属性设置 HTML5 `＜audio＞` 标签的样式

使用 CSS 和 WebKit 属性可以自定义 HTML5 `<audio>` 标签的样式。以下是一些常用的方法和属性：

1. **隐藏默认控件**：
首先，需要隐藏浏览器默认的音频控件，以便使用自定义样式。

   audio {
       display: none;
   }

2. **自定义播放按钮**：
创建一个自定义的播放按钮，并使用 CSS 进行样式设计。

   <audio id="audio" src="audiofile.mp3"></audio>
   <button id="playButton">播放</button>

   #playButton {
       background-color: #4CAF50; /* Green */
       border: none;
       color: white;
       padding: 15px 32px;
       text-align: center;
       text-decoration: none;
       display: inline-block;
       font-size: 16px;
       cursor: pointer;
   }

   #playButton:hover {
       background-color: #45a049;
   }

3. **使用 WebKit 属性进行自定义**：
WebKit 提供了 `-webkit-media-controls` 相关的伪元素，可以进一步自定义控件的样式。

   /* 隐藏默认控件 */
   audio::-webkit-media-controls {
       display: none !important;
   }

   /* 自定义播放按钮 */
   #playButton {
       /* 样式同上 */
   }

   /* 自定义进度条 */
   audio::-webkit-media-controls-timeline {
       background-color: #ddd;
   }

   /* 自定义音量控制 */
   audio::-webkit-media-controls-volume-slider {
       background-color: #ddd;
   }

4. **JavaScript 控制播放**：
使用 JavaScript 来控制音频的播放和暂停。

   document.getElementById('playButton').addEventListener('click', function() {
       var audio = document.getElementById('audio');
       if (audio.paused) {
           audio.play();
           this.textContent = '暂停';
       } else {
           audio.pause();
           this.textContent = '播放';
       }
   });

通过以上方法，你可以使用 CSS 和 WebKit 属性自定义 HTML5 `<audio>` 标签的样式，使其更符合你的网页设计需求。