HTML5 플레이어에서 다음 노래를 자동으로 재생하는 방법

Question

나는 html5 오디오 플레이어가 있으며 현재 노래가 끝난 후 내 스크립트가 자동으로 다음 노래를 재생 목록으로 재생하도록 만드는 방법을 알아낼 수 있습니다. 현재 플레이어는 노래를 재생 한 다음 중지합니다. 또한 사용자가 빨리 감기 버튼을 누르는 경우 플레이어가 자동으로 노래를 재생하는 것이 이상적입니다. 나는이의 핵심은, 당신의 오디오 재생 태그에 이벤트를 "종료"(jQuery를 용어로, 또는 "바인딩")을 수신하는 생각

jQuery(document).ready(function() { 

// inner variables 
var song; 
var tracker = $('.tracker'); 
var volume = $('.volume'); 

function initAudio(elem) { 
    var url = elem.attr('audiourl'); 
    var title = elem.text(); 
    var cover = elem.attr('cover'); 
    var artist = elem.attr('artist'); 

    $('.player .title').text(title); 
    $('.player .artist').text(artist); 
    $('.player .cover').css('background-image','url(' + cover+')');; 

    song = new Audio(url); 

    // timeupdate event listener 
    song.addEventListener('timeupdate',function(){ 
     var curtime = parseInt(song.currentTime, 10); 
     tracker.slider('value', curtime); 
    }); 

    $('.playlist li').removeClass('active'); 
    elem.addClass('active'); 
    playAudio(); 
} 
function playAudio() { 
    song.play(); 

    tracker.slider("option", "max", song.duration); 

    $('.play').addClass('hidden'); 
    $('.pause').addClass('visible'); 
} 
function stopAudio() { 
    song.pause(); 

    $('.play').removeClass('hidden'); 
    $('.pause').removeClass('visible'); 
} 
// play click 
$('.play').click(function (e) { 
    e.preventDefault(); 

    playAudio(); 
}); 

// pause click 
$('.pause').click(function (e) { 
    e.preventDefault(); 

    stopAudio(); 
}); 

// forward click 
$('.fwd').click(function (e) { 
    e.preventDefault(); 

    stopAudio(); 

    var next = $('.playlist li.active').next(); 
    if (next.length == 0) { 
     next = $('.playlist li:first-child'); 
    } 
    initAudio(next); 
}); 

// rewind click 
$('.rew').click(function (e) { 
    e.preventDefault(); 

    stopAudio(); 

    var prev = $('.playlist li.active').prev(); 
    if (prev.length == 0) { 
     prev = $('.playlist li:last-child'); 
    } 
    initAudio(prev); 
}); 

// show playlist 
$('.pl').click(function (e) { 
    e.preventDefault(); 

    $('.playlist').fadeIn(300); 
}); 

// playlist elements - click 
$('.playlist li').click(function() { 
    stopAudio(); 
    initAudio($(this)); 
}); 

// initialization - first element in playlist 
initAudio($('.playlist li:first-child')); 

// set volume 
song.volume = 0.8; 

// initialize the volume slider 
volume.slider({ 
    range: 'min', 
    min: 1, 
    max: 100, 
    value: 80, 
    start: function(event,ui) {}, 
    slide: function(event, ui) { 
     song.volume = ui.value/100; 
    }, 
    stop: function(event,ui) {}, 
}); 

// empty tracker slider 
tracker.slider({ 
    range: 'min', 
    min: 0, max: 10, 
    start: function(event,ui) {}, 
    slide: function(event, ui) { 
     song.currentTime = ui.value; 
    }, 
    stop: function(event,ui) {} 
}); 
}); 

Answer 1

:

여기에 내 JS 코드입니다. 미디어 재생이 끝나 자마자 시작됩니다. 미스틱 매직이 언급 한 예제는이를 활용하기 때문에이 페이지를 "종료 됨"으로 검색하여 실제 상황을 확인하십시오.

Answer 2

나는 똑같은 일을하고 싶었지만 오랫동안 할 수 없었다. 여러 이벤트 리스너를 찾은 후에 마침내 작동하게 만들었습니다. D

function playAudio() { 

    song.addEventListener('ended', function() 
    { 
     var next = $('.playlist li.active').next(); 
       if (next.length == 0) 
      { 
         next = $('.playlist li:first-child'); 
       } 
     initAudio(next); 

    song.addEventListener('loadedmetadata', function() { 
       playAudio(); 

      }); 
     },false); 




    tracker.slider("option", "max", song.duration); 
song.play(); 
      $('.play').addClass('hidden'); 
       $('.pause').addClass('visible'); 


} 

playAudio 함수로 넣으십시오. 첫 번째 이벤트 수신기는 노래를 재생 목록의 다음 노래로 루프합니다. 그리고 두 번째 이벤트 리스너는이 eventListener를 사용하지 않으면 null이되는 song.duration입니다.

재생 목록 요소 또는 앞으로/되감기 버튼을 클릭 한 직후에 오디오를 재생하려면 클릭 재생 목록 기능 및 fwd/되감기 기능에 추가하십시오.

song.addEventListener('loadedmetadata', function() { 
       playAudio(); }); 

희망이 도움이 !!!! (게시물 내 첫 번째 대답 : D)