當我們瀏覽網站時，經常會聽到一些好聽的歌曲，那么如何在網頁中播放音樂呢？這時我們可以使用CSS和HTML5來實現一個簡單的歌曲播放器。在本文中，我們將學習如何用純CSS和HTML來創建一個簡單的歌曲播放器。

<audio controls>
<source src="music.mp3" type="audio/mpeg">
</audio>
<style>
/* 音樂播放器樣式 */
audio {
width: 200px;
margin: auto;
display: block;
background-color: #f3f3f3;
border: 1px solid #ccc;
padding: 5px;
border-radius: 5px;
}
/* 控制按鈕樣式 */
audio::-webkit-media-controls {
display: flex;
justify-content: center;
margin-top: 10px;
}
audio::-webkit-media-controls-play-button,
audio::-webkit-media-controls-pause-button,
audio::-webkit-media-controls-volume-slider,
audio::-webkit-media-controls-mute-button,
audio::-webkit-media-controls-timeline {
background-color: #337ab7;
border: none;
}
audio::-webkit-media-controls-play-button:before {
content: "?";
color: #fff;
}
audio::-webkit-media-controls-pause-button:before {
content: "??";
color: #fff;
}
audio::-webkit-media-controls-volume-slider::-webkit-slider-thumb {
background-color: #fff;
border: none;
border-radius: 50%;
}
</style>

如上所示，首先在HTML中使用<audio>標簽來加載音樂文件，并設置音樂的控制器（controls）。然后在CSS中，我們為音樂播放器和控制按鈕定義了樣式。其中，我們使用偽元素（pseudo-elements）來顯示播放和暫停符號。最后，我們使用了Webkit樣式（-webkit）來控制控制器的外觀。

在以上代碼的基礎上，我們可以嘗試添加更多的樣式和功能來完善我們的歌曲播放器。例如增加音樂列表、調節音量、添加歌詞顯示等等?？傊?，CSS和HTML5提供了很多便捷的機制來實現功能強大的音樂播放器，只需要有足夠的耐心和創造力，就可以做出令人驚艷的效果。