자바 스크립트 오디오로드가 일시 중지되지 않음

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> 

하지만 난이 if 문에() player.load를 이동할 때, 나는 그것을 일시 중지 할 수 있습니다하지만 난에 클릭 할 때 하나가 연주되는 동안 또 다른 노래, 그것은 단지 멈춘다. 그래서 내가 뭘 잘못하고 있니?

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>'); 
    } 
});