javascript - 使用js循环播放音频

Question

我正在尝试使用一个按钮将音频轨道更改为在浏览器中播放的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

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

Answer 1

根据您在原始查询中提供的信息，这很可能是最适合您的。附上正在工作的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;
}