html5制作音乐播放界面

可以使用HTML5的 `<audio>` 标签来实现音乐播放，同时使用CSS美化界面。下面是一个简单的示例：

<audio id="myAudio" controls>
  <source src="music.mp3" type="audio/mpeg">
  您的浏览器不支持 HTML5 音频。
</audio>

<style>
  /* 控制条样式 */
  .controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
  }

  /* 播放/暂停按钮样式 */
  .play-pause {
    background-color: #009688;
    color: #fff;
    border: none;
    padding: 10px;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
  .play-pause:hover {
    background-color: #00796b;
  }

  /* 时间进度条样式 */
  .progress {
    width: 80%;
    height: 4px;
    background-color: #ccc;
    position: relative;
    margin-left: 10px;
  }
  .progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background-color: #009688;
    transition: width 0.1s ease;
  }
</style>

<script>
  const audio = document.getElementById("myAudio");
  const playPauseBtn = document.getElementById("play-pause-btn");
  const progressBar = document.getElementById("progress-bar");

  // 播放/暂停按钮点击事件
  playPauseBtn.addEventListener("click", () => {
    if (audio.paused) {
      audio.play();
      playPauseBtn.innerHTML = "暂停";
    } else {
      audio.pause();
      playPauseBtn.innerHTML = "播放";
    }
  });

  // 音频时间变化事件
  audio.addEventListener("timeupdate", () => {
    const progressWidth = (audio.currentTime / audio.duration) * 100;
    progressBar.style.width = `${progressWidth}%`;
  });
</script>

<div class="controls">
  <button id="play-pause-btn" class="play-pause">播放</button>
  <div class="progress">
    <div id="progress-bar" class="progress-bar"></div>
  </div>
</div>

你可以根据需要修改样式和交互效果，实现自己想要的音乐播放界面。