Question

我尝试使用按钮将音频曲目更改为在浏览器中播放的2中的一个，但是，我找到的方法切换到第二个曲目，但不会更改之后播放的音频，它只会重启第二首曲目。这是我的代码：

<audio id="player" autoplay="autoplay" preload="auto" loop="loop">
  <source id="source1" src="/audio/mac+.mp3" type="audio/mpeg">
  <source id="source2" src="" type="audio/mpeg">
</audio>
<button onclick='loadSong()'>Switch the Music!</button>

HTML

gawk

Answer 1

您正在覆盖要将相同选择器保存到source1和source 2的代码的#player元素外观，因此将源1的选择器更改为source1和source2

Answer 2

根据您在原始查询中提供的信息，这很可能最适合您。附件是一个有效的JSFiddle供您查看。您需要使用自己的本地存储文件更新src文件。

HTML：

<audio id="source1" autoplay="autoplay" loop="loop" src='http://www.stephaniequinn.com/Music/Allegro%20from%20Duet%20in%20C%20Major.mp3'></audio>
<audio id="source2" loop="loop" src='http://www.stephaniequinn.com/Music/Pachelbel%20-%20Canon%20in%20D%20Major.mp3'></audio>
<button id="player">Switch the music to track # 2</button>

<强>使用Javascript：

var player = document.getElementById('player');
var source1 = document.getElementById('source1');
var source2 = document.getElementById('source2');

player.onclick = function() {
  curTrack = this.innerHTML.replace(/Switch the music to track # /, "");
  if (curTrack == "1") {
    nextTrack = "2";
    source1.play();
    source2.pause();
    source2.currentTime = 0;
  } else {
    nextTrack = "1";
    source2.play();
    source1.pause();
    source1.currentTime = 0;
  }
  this.innerHTML = "Switch the music to track # " + nextTrack;
}

使用js循环播放音频

2 个答案: