Javascript 使用js循环播放音频

我试图使用一个按钮将正在浏览器中播放的音轨更改为2个音轨中的1个，但是，我找到的方法切换到第二个音轨，但不会更改之后播放的音轨，它只会重新启动第二个音轨。这是我的密码：

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

  source1.src='/audio/mac+.mp3';
  source2.src='/audio/mac-slowed.mp3';

  player.load(); //just start buffering (preload)
  player.play(); //start playing
}

HTML

切换音乐！

您正在覆盖

#player

元素查看您的代码您正在将同一选择器保存到source1和source2，因此根据您在原始查询中提供的信息，将source one的选择器更改为

source1

和

source2
，这很可能最适合您。附件是一个为您工作的评论。您需要使用自己本地存储的文件更新
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>

对不起，我不太明白你的意思，你能详细解释一下吗？我是否应该将js中source1和source2的ID更改为与HTML中相同的source1和source2？@blackjackrobo查看前3行，它们在DOM中选择了完全相同的元素。他们需要选择不同的元素，否则他们将继续替换
#player
元素的src
<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>

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;
}