在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）。但希望剩下的答案能让你走上正轨。