用CSS写一个音乐播放器

好的，以下是一个基本的音乐播放器的HTML和CSS代码：

HTML:

<div class="music-player">
  <audio id="my-audio" src="path/to/your/music"></audio>
  <div class="play-pause">
    <i class="fa fa-play"></i>
    <i class="fa fa-pause"></i>
  </div>
  <div class="progress-bar">
    <div class="progress"></div>
  </div>
</div>

CSS:

.music-player {
  width: 300px;
  height: 50px;
  background-color: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.play-pause {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  position: absolute;
  left: 0;
  top: 0;
  cursor: pointer;
}

.play-pause i {
  font-size: 24px;
  color: #333;
}

.play-pause i.fa-pause {
  display: none;
}

.progress-bar {
  height: 4px;
  width: 200px;
  position: absolute;
  left: 50px;
  top: 23px;
  background-color: #ccc;
}

.progress {
  height: 100%;
  width: 0%;
  background-color: #333;
}

这个音乐播放器包括一个播放/暂停按钮和一个进度条。你需要使用JavaScript来控制音乐的播放和进度条的更新，但这些超出了CSS的范围。