css音乐播放器代码

下面是一个简单的CSS音乐播放器代码示例：

HTML代码：

<div class="music-player"> <audio id="audio-player" src="music.mp3"></audio> <div class="controls"> <button id="play-btn" class="play-btn" onclick="togglePlay()">播放</button> <button id="pause-btn" class="pause-btn" onclick="togglePlay()">暂停</button> </div> </div> 

CSS代码：

.music-player { display: flex; align-items: center; justify-content: center; } .controls { margin-top: 10px; } .play-btn, .pause-btn { padding: 10px 20px; background-color: #333; color: #fff; border: none; cursor: pointer; } .play-btn:hover, .pause-btn:hover { background-color: #666; } 

JavaScript代码：

var audioPlayer = document.getElementById("audio-player"); function togglePlay() { if (audioPlayer.paused) { audioPlayer.play(); } else { audioPlayer.pause(); } } 

这个示例只是一个简单的音乐播放器，包括一个播放按钮和一个暂停按钮。你可以根据自己的需求进一步扩展和美化它。