Воспроизведение одной песни за один раз в HTML5

Question

Я делаю сайт html5 со множеством аудио-элементов, и я хочу, чтобы они воспроизводились по одному, для этого я использовал jQuery для паузы и воспроизведения песни.

Я нашел здесь код, который позволяет мне это делать, но поток он мертв в течение 2 лет.

Проблема возникает, когда я воспроизвожу песню, назовем ее song1, затем остановим ее, а затем попытаемся снова воспроизвести песню1, песня1 не начнет воспроизводиться, чтобы снова воспроизвести песню1. Я должен воспроизвести любую другую а затем снова нажмите песню1, чтобы он мог начать играть. Я не уверен, как это исправить. Как я могу заставить его играть, не делая этого?

Большое спасибо заранее.

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) Пауза SONG1 (curPlaying является еще набор для SONG1)

3) Играть SONG1 (потому что curPlaying еще truthy, SONG1 немедленно получает паузу)

Во всяком случае, это довольно поздно, и я» m, поэтому мой код может не работать (oops). Но, надеюсь, остальная часть ответа вернет вас на правильный путь.