jQuery 함수 audioElement가 종료되지 않았습니다.

Question

< audio> 요소를 생성하고 버튼을 클릭 할 때 노래를 재생하는 코드가 있습니다. 여태까지는 그런대로 잘됐다. 버튼이 클릭되면 '음악 재생'에서 '음악 중지'로 바뀝니다.

audioElement.addEventListener('ended', function() { 
    $('span#pause').fadeOut('slow'); 
    $('span#play').delay(1500).fadeIn('slow'); 
}); 

노래가 끝나면 기술적으로, 다시 플레이 버튼을 표시해야합니다 :

지금이 코드를 추가했습니다. 그러나 그렇지 않습니다. 아무도 내 이유를 말해 줄 수 있니?

$(document).ready(function() { 

var songList = [ 
    'song1.ogg', 
    'song2.ogg', 
    'song3.ogg' 
]; 
var randomNumber = Math.floor(Math.random()*songList.length); 

var audioElement = document.createElement('audio'); 
audioElement.setAttribute('src', songList[randomNumber]); 
audioElement.load(); 

audioElement.addEventListener('ended', function() { 
    $('span#pause').fadeOut('slow'); 
    $('span#play').delay(1500).fadeIn('slow'); 
}); 

$('#play').click(function() { 
    audioElement.play(); 
    $('span#play').fadeOut('slow'); 
    $('span#pause').delay(1500).fadeIn('slow'); 
}); 

$('#pause').click(function() { 
    audioElement.pause(); 
    $('span#pause').fadeOut('slow'); 
    $('span#play').delay(1500).fadeIn('slow'); 
}); 
}); 

Answer 1

다음 노래를 시작하는 당신의 코멘트에서 질문에 대한 대답은 : 다음 audio 태그의 src -attribute을 변경

여기에 전체 코드입니다. 예 : 새로운 button라고 "다음"과 다음 스크립트를 추가

$('#next').click(function() { 
    randomNumber = (randomNumber + 1) % songList.length; 
    audioElement.setAttribute('src', songList[randomNumber]); 
    $('#play').click(); 
}); 

는 또한 업데이트 된 jsfiddle를 참조하십시오.

=== 업데이트 ===

• 먼저 randonNumber가 증가합니다. modulo % (나눗셈의 나머지 부분)은 숫자가 노래 수보다 많다는 것을 방지합니다.
• 그러면 audio 태그의 소스가 다음 노래로 설정됩니다.
• 누군가 play button을 클릭 한 것처럼 click event will be triggered 이상이므로 play click handler이 노래를 시작하고 button 표시를 변경합니다.