在HTML5中一次播放一首歌曲

Question

我正在製作一個包含許多音頻元素的html5網站，我希望它們一次播放一個，爲了做到這一點，我使用jQuery來暫停播放歌曲。

我在這裏找到了一個代碼，允許我這樣做，但它已經死了2年的線程。

問題出現在播放歌曲時，我們將其稱爲song1，然後暫停播放，然後嘗試再次播放song1，song1不會開始播放，爲了再次播放song1，我必須再次播放其他歌曲歌曲，然後再點擊一首歌曲，以便它可以開始播放。我不知道如何解決這個問題。我怎樣才能在沒有這樣做的情況下玩呢？

非常感謝提前。

HTML：

<div id="song"> 
    <a class="playback"> 
     <img class="play" src="./MusicPlayer/base.png" /> 
    </a> 
    <audio><source src="./MusicPlayer/avicii.mp3" type="audio/mpeg" /></audio> 
</div> 
<div id="song2" > 
    <a class="playback"> 
     <img class="play" src="./MusicPlayer/base.png" /> 
    </a> 
    <audio><source src="./MusicPlayer/harlem.mp3" type="audio/mpeg" /></audio> 
</div> 

的Javascript：

var curPlaying; 
$(function() { 
    $(".playback").click(function (e) { 
     e.preventDefault(); 
     var song = $(this).next('audio')[0]; 
     if (song.paused) { 
      song.play(); 
      if (curPlaying) { 
       $("audio", "#" + curPlaying)[0].pause(); 
      } 
     } else { 
      song.pause(); 
     } 
     curPlaying = $(this).parent()[0].id; 
    }); 
}); 

Answer 1

試試這個：

var curPlaying; 
$(function() { 
    $(".playback").click(function (e) { 
     e.preventDefault(); 
     var song = $(this).next('audio')[0]; 
     if (song.paused) { 
      if (curPlaying) { 
       $("audio", "#" + curPlaying)[0].pause(); 
      } 
      song.play(); 
      curPlaying = $(this).parent()[0].id; 
     } else { 
      song.pause(); 
      curPlaying = null; 
     } 
    }); 
}); 

問題是這個流程：

1）播放歌曲1（curPlaying = = song1）

2）暫停鬆1（curPlaying是仍然設置爲鬆1）

3）播放鬆1（因爲curPlaying仍然truthy，鬆1立即被暫停）

不管怎麼說，這是非常晚，我」 m已耗盡，所以我的代碼實際上可能不工作（oops）。但希望剩下的答案能讓你走上正軌。