用web前端代码写一个音乐盒

好的，我可以为您提供一些参考。您可以使用HTML、CSS和JavaScript来创建一个简单的音乐盒。以下是一个可能的示例：

HTML代码：

<div id="music-box">
  <h2>我的音乐盒</h2>
  <ul>
    <li><a href="#" onclick="playSong('song1.mp3')">歌曲1</a></li>
    <li><a href="#" onclick="playSong('song2.mp3')">歌曲2</a></li>
    <li><a href="#" onclick="playSong('song3.mp3')">歌曲3</a></li>
  </ul>
  <audio id="audio-player"></audio>
</div>

CSS代码：

#music-box {
  font-family: Arial, sans-serif;
  width: 300px;
  margin: 0 auto;
}

#music-box h2 {
  text-align: center;
  font-size: 24px;
}

#music-box ul {
  list-style: none;
  padding: 0;
}

#music-box li {
  margin-bottom: 10px;
}

#music-box a {
  display: block;
  padding: 5px;
  background-color: #eee;
  border-radius: 3px;
  color: #333;
  text-decoration: none;
}

#music-box a:hover {
  background-color: #ccc;
}

JavaScript代码：

function playSong(filename) {
  var audioPlayer = document.getElementById('audio-player');
  audioPlayer.src = filename;
  audioPlayer.play();
}

您可以根据需要自定义样式和歌曲列表。这是一个简单的示例，您可以根据自己的需要进行更改和扩展。希望有帮助！