Question

재생 단추와 같은 텍스트 링크 만 사용하여 동일한 웹 페이지에서 오디오 파일 목록을 재생하려고했는데 다음 솔루션을 찾았습니다.이 솔루션은 저에게 정말 완벽합니다. (thanks 이 스크립트에 대한 @linstantnoodles!)이 코드

<audio id="song1" preload='auto'> 
<source src='song1.mp3' type='audio/mp3' /> 
</audio> 

<audio id="song2" preload='auto'> 
<source src='song2.mp3' type='audio/mp3' /> 
</audio> 

<a href="javascript:null()" id="song1-control">Listen</a> 
<a href="javascript:null()" id="song2-control">Listen</a> 

<script type="text/javascript"> 
// List of audio/control pairs 
var playlist = [{ 
    "audio": document.getElementById('song1'), 
    "control": document.getElementById('song1-control') 
}, { 
    "audio": document.getElementById('song2'), 
    "control": document.getElementById('song2-control') 
}]; 

for (var i = 0; i < playlist.length; i++) { 
    var obj = playlist[i]; 
    var audio = obj.audio; 
    var control = obj.control; 
    // returns a closure 
    var listener = function (control, audio) { 
     return function() { 
      var pause = control.innerHTML === 'Pause'; 
      control.innerHTML = pause ? 'Listen' : 'Pause'; 
      // Update the Audio 
      var method = pause ? 'pause' : 'play'; 
      audio[method](); 
      // Prevent Default Action 
      return false; 
     } 
    }; 
control.addEventListener("click", listener(control, audio)); 
} 
</script> 

내 유일한 문제가 같은 시간에 연주 한 노래가 재생되는, 내가 두 번째 하나를 시작하면 있다는 것입니다. 이 문제를 해결하기 위해 여러 가지 방법을 시도했지만 그 중 아무 것도 작동하지 않았습니다. 어떻게 적응해야합니까? 두 번째가 시작될 때 첫 번째가 일시 중지되거나 중지되도록하려면 어떻게해야합니까? 감사!

Answer 1

다음과 같이 할 수 있습니다. 새 오디오가 시작되면 playlist 배열을 반복하여 방금 시작한 오디오 요소가 아닌 모든 오디오 요소를 찾아서 중지하십시오. 여기

은 예입니다 : 귀하의 빠른 회신에 대한

.... 
var method = pause ? 'pause' : 'play'; 
audio[method](); 
if(!pause){ 
    playlist.forEach(function(pl){ 
     if(pl.audio !== audio){ 
      pl.audio.pause(); 
      pl.audio.currentTime = 0; 
      pl.control.innerHTML = 'Listen'; 
     } 
    }); 
} 
....