CSS自定義audio樣式：

audio {
width: 100%;
height: auto;
}
audio::-webkit-media-controls-panel,
audio::-webkit-media-controls,
audio::controls {
display: none !important;
}
audio {
background-color: #f8f8f8;
border: 1px solid #ccc;
padding: 15px;
border-radius: 5px;
}
audio:before {
content: "\f144";
font-family: FontAwesome;
color: #333;
display: inline-block;
vertical-align: middle;
margin-right: 5px;
font-size: 18px;
}
audio:hover:before,
audio:focus:before {
color: #00bfff;
}
audio::-webkit-slider-thumb {
-webkit-appearance: none;
background-color: #00bfff;
width: 10px;
height: 20px;
margin-top: -9px;
border-radius: 2px;
box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.25);
}
audio::-webkit-slider-runnable-track {
background-color: #ddd;
height: 2px;
}
audio::-moz-range-thumb {
background-color: #00bfff;
width: 10px;
height: 20px;
margin-top: -9px;
border-radius: 2px;
box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.25);
}
audio::-moz-range-track {
background-color: #ddd;
height: 2px;
}
audio::-ms-thumb {
background-color: #00bfff;
width: 10px;
height: 20px;
margin-top: -9px;
border-radius: 2px;
box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.25);
}
audio::-ms-track {
background-color: #ddd;
height: 2px;
border-radius: 2.5px;
box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.25);
}
audio::-ms-tooltip {
display: none;
}
audio:focus {
outline: none;
}

以上是一個簡單的CSS自定義audio樣式的代碼，經過以上的設置，可以使網頁中的音頻播放器更加美觀實用。