jQuery 및 Audio.js : 노래가 재생 목록에 동적으로 추가되어 재생 또는 인식되지 않음

Question

나는 dynamic.list를 만들기 위해 audio.js를 사용하고 있습니다. Un-Ordered List에있는 링크를 클릭하면 오디오 플레이어가 재생 목록에있는 정렬 된 목록 (<ol>)에 추가됩니다.

Unquered 목록의 새 목록 항목을 Ordered 목록에 추가하면 jQuery가 작동합니다. 그러나 플레이어는 클릭 할 때 새로 추가 된 노래를 재생하지 않으며 다음 트랙으로 이동하지 않습니다.

오디오 플레이어는 웹 사이트를로드 할 때 처음 재생 목록에이었던 노래 만 재생하지만 내가로드 한 후에 추가 한 노래는 인식하지 못합니다. 어떤 도움이 필요합니까? 플레이어를 설정하는 http://tinyurl.com/kg9clpb

Audio.js 데모 소스 코드 : 여기

http://kolber.github.io/audiojs/demos/test6.html jQuery를 추가 한 노래 내 버전에 대한 링크입니다 : 여기

는 audio.js 예를 들어 재생 목록에 대한 링크입니다 :

<script> 
$(function() { 
// Setup the player to autoplay the next track 
    var a = audiojs.createAll({ 
     trackEnded: function() { 
     var next = $('ol li.playing').next(); 
     if (!next.length) next = $('ol li').first(); 
     next.addClass('playing').siblings().removeClass('playing'); 
     audio.load($('a', next).attr('data-src')); 
     audio.play(); 
     } 
    }); 

    // Load in the first track 
    var audio = a[0]; 
     first = $('ol a').attr('data-src'); 
    $('ol li').first().addClass('playing'); 
    audio.load(first); 

    // Load in a track on click 
    $('ol li').click(function(e) { 
     e.preventDefault(); 
     $(this).addClass('playing').siblings().removeClass('playing'); 
     audio.load($('a', this).attr('data-src')); 
     audio.play(); 
    }); 
    // Keyboard shortcuts 
    $(document).keydown(function(e) { 
     var unicode = e.charCode ? e.charCode : e.keyCode; 
     // right arrow 
     if (unicode == 39) { 
     var next = $('li.playing').next(); 
     if (!next.length) next = $('ol li').first(); 
     next.click(); 
     // back arrow 
     } else if (unicode == 37) { 
     var prev = $('li.playing').prev(); 
     if (!prev.length) prev = $('ol li').last(); 
     prev.click(); 
     // spacebar 
     } else if (unicode == 32) { 
     audio.playPause(); 
     } 
    }) 
    }); 
</script> 

하기 Aud-oplayer에 대한 HTML과 모두 목록 :

<audio ></audio> 
    <h2>Playlist</h2> 
    <ol id="userPlaylist"> 
    <li><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/02-juicy-r.mp3">dead wrong intro</a></li> 
    <li><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/02-juicy-r.mp3">juicy-r</a></li> 
    <li><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/03-its-all-about-the-crystalizabeths.mp3">it's all about the crystalizabeths</a></li> 
    <li><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/04-islands-is-the-limit.mp3">islands is the limit</a></li> 
    <li><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/05-one-more-chance-for-a-heart-to-skip-a-beat.mp3">one more chance for a heart to skip a beat</a></li> 
    <li><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/06-suicidal-fantasy.mp3">suicidal fantasy</a></li> 
    <li><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/07-everyday-shelter.mp3">everyday shelter</a></li> 
    <li><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/08-basic-hypnosis.mp3">basic hypnosis</a></li> 
    <li><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/09-infinite-victory.mp3">infinite victory</a></li> 
    <li><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/10-the-curious-incident-of-big-poppa-in-the-nighttime.mp3">the curious incident of big poppa in the nighttime</a></li> 
    <li><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/11-mo-stars-mo-problems.mp3">mo stars mo problems</a></li> 
    </ol> 
    <h3>Songs Not it Playlist - Click to add to Playlist</h3> 
    <ul id="mainSite"> 
    <li><a href="#" data-src="http://www.jussbuss.tv/testing/sapi/mp3/john-fenton_dive-table.mp3">john-fenton_dive-table</a></li> 
    </ul> 

클릭에 다른 목록에서 노래를 추가

내 코드 : 내가 제대로 이해하면

<script> 
$("ul#mainSite li").on("click", "a", function(e){ 

    e.preventDefault(); 


     var addLink = $(this).attr('data-src'); 


     $("ol#userPlaylist").append('<li> <a href="#" data-src="'+addLink+'">NEW 
      SONG</li>'); 

    }); 

</script> 

Answer 1

문제는 플레이어가 귀하의 목록에 관련되지 않는 것입니다. 플레이어는 SWF 플레이어이므로 플레이어를 제어해야합니다 (재생 시작 피드).

마법 낳는다에서 :

audio.load($('a', next).attr('data-src')); 
audio.play(); 

전체 코드 :

http://kolber.github.io/audiojs/audiojs/audio.js 

더 도움을 읽고 데모의 전체 코드를 이해 (모두를 다운로드하고 코드와 함께 재생)하시기 바랍니다

http://kolber.github.io/audiojs/demos/test6.html 

그리고 곧 답변을 찾으실 수 있습니다.