dw实现音频播放器并用Javascript实现手动音频切换以及css设计

好的，下面是实现音频播放器并用JavaScript实现手动音频切换以及CSS设计的代码：

HTML代码：

<audio id="myAudio" controls>
  <source src="audio1.mp3" type="audio/mpeg">
  <source src="audio1.ogg" type="audio/ogg">
  Your browser does not support the audio element.
</audio>

<div class="audio-buttons">
  <button id="audio1Btn" class="active">音频1</button>
  <button id="audio2Btn">音频2</button>
  <button id="audio3Btn">音频3</button>
</div>

CSS代码：

audio {
  width: 100%;
  height: 50px;
  background-color: #f5f5f5;
  border-radius: 5px;
}

audio::-webkit-media-controls-panel {
  background-color: #f5f5f5;
  border-radius: 5px;
}

audio::-webkit-media-controls-play-button {
  background-image: url(play.png);
}

audio::-webkit-media-controls-pause-button {
  background-image: url(pause.png);
}

.audio-buttons {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.audio-buttons button {
  border: none;
  background-color: #fff;
  color: #000;
  padding: 10px 20px;
  border-radius: 5px;
  margin-right: 10px;
  cursor: pointer;
}

.audio-buttons button.active {
  background-color: #000;
  color: #fff;
}

JavaScript代码：

var audio = document.getElementById("myAudio");
var audio1Btn = document.getElementById("audio1Btn");
var audio2Btn = document.getElementById("audio2Btn");
var audio3Btn = document.getElementById("audio3Btn");

// 切换音频
audio1Btn.addEventListener("click", function() {
  audio.src = "audio1.mp3";
  audio.load();
  setActiveBtn(audio1Btn);
});

audio2Btn.addEventListener("click", function() {
  audio.src = "audio2.mp3";
  audio.load();
  setActiveBtn(audio2Btn);
});

audio3Btn.addEventListener("click", function() {
  audio.src = "audio3.mp3";
  audio.load();
  setActiveBtn(audio3Btn);
});

// 设置激活状态的按钮
function setActiveBtn(btn) {
  audio1Btn.classList.remove("active");
  audio2Btn.classList.remove("active");
  audio3Btn.classList.remove("active");
  btn.classList.add("active");
}

// 初始激活第一个按钮
setActiveBtn(audio1Btn);

这段代码创建了一个音频播放器，并且添加了三个按钮，用于手动切换音频。当点击按钮时，会重新设置音频文件的URL，并加载新的音频文件。同时，通过设置激活状态的按钮，可以让用户知道当前正在播放哪个音频文件。

CSS代码用于美化音频播放器和按钮。其中，`audio`部分设置了音频播放器的样式，`audio-buttons`部分设置了按钮的样式。

希望这个代码可以帮助你实现音频播放器并用JavaScript实现手动音频切换以及CSS设计。