javascript音頻加載不讓它暫停

Question

我正在建立一個音樂列表，每個音樂都有一個播放按鈕。所以當你點擊播放時，按鈕變成暫停按鈕。

所以，當你播​​放音樂時，我希望能夠下載列表並點擊另一首歌曲，當前歌曲停止播放，並且我點擊了一首歌曲開始播放。

目前，我可以沿着列表並播放歌曲，但不能讓它暫停。當我點擊暫停時，它只是再次啓動歌曲。

這裏是我的代碼

window.player = document.getElementById('player'); 
    $('ul.tracks li span.play').click(function(){ 

     $('ul.tracks li span.play').find('i').removeClass().addClass('fi-play'); 

     var trackid = $(this).attr('id'); 
     var track; 

     if(trackid == 'play1'){ 
      track = 'img/music.mp3'; 
     } else if(trackid == 'play2'){ 
      track = 'img/music2.mp3'; 
     } else { 
      track = 'img/music3.mp3'; 
     } 

     $('#player_track').attr('src', track); 
     player.load(); 

     if (player.paused) { 
      player.play(); 
      $(this).html('<i class="fi-pause"></i>'); 
     } else { 
      player.pause(); 
      player.empty(); 
      $(this).html('<i class="fi-play"></i>'); 
     } 
    }); 

這裏是HTML

<audio id="player"> 
         <source id="player_track" src="img/music.mp3" /> 
        </audio> 
        <ul class="tracks"> 
         <li> 
         <div class="row"> 
          <div class="large-8 columns">1. No Church in the Wild (feat. Frank Ocean)</div> 
          <div class="large-2 columns"><span class="play" id="play1"><i class="fi-play"></i></span></div> 
         </div> 
         <li> 
         <div class="row"> 
          <div class="large-8 columns">2. Lift Off (feat. Beyonce)</div> 
          <div class="large-2 columns"><span class="play" id="play2"><i class="fi-play"></i></span></div> 
         </div> 
         </li> 
         <li> 
         <div class="row"> 
          <div class="large-8 columns">3. Niggas in Paris</div> 
          <div class="large-2 columns"><span class="play" id="play3"><i class="fi-play"></i></span></div> 
         </div> 
         </li> 
    </ul> 

但是，當我移動player.load（）進入if語句，我可以暫停它，但是當我點擊另一首歌曲正在播放時，它就停止了。那麼我做錯了什麼？

Answer 1

您需要檢查點擊的文件是否是玩家加載的文件。你可以通過在這個if語句中包裝軌道設置代碼和player.load來做到這一點。

if ($('#player_track').attr('src') !== track){ 
     $('#player_track').attr('src', track); 
     player.load();  
    } 

整個代碼：

window.player = document.getElementById('player'); 
$('ul.tracks li span.play').click(function(){ 

    $('ul.tracks li span.play').find('i').removeClass().addClass('fi-play'); 

    var trackid = $(this).attr('id'); 
    var track; 

    if(trackid == 'play1'){ 
     track = 'img/music.mp3'; 
    } else if(trackid == 'play2'){ 
     track = 'img/music2.mp3'; 
    } else { 
     track = 'img/music3.mp3'; 
    } 


    if ($('#player_track').attr('src') !== track){ 
     $('#player_track').attr('src', track); 
     player.load();  
    } 


    if (player.paused) { 
     player.play(); 
     $(this).html('<i class="fi-pause"></i>'); 
    } else { 
     player.pause(); 
     player.empty(); 
     $(this).html('<i class="fi-play"></i>'); 
    } 
});