jPlayer - 포스터로 MP3 파일 시리즈 재생

Question

jPlayer QuickStart 프로젝트를 수정하여 각각의 포스터 이미지가있는 일련의 mp3 파일을 순차적으로 재생하려고합니다. 이것은 기본적으로 html, JavaScript, jQuery 및 CSS를 사용하는 것입니다.

(퀵 스타트는 참조 용으로, 여기에 있습니다 : http://jplayer.org/latest/quick-start-guide/)

다음 (심지어 최초의 MP3 오디오 파일을 재생하지 않음) 작동하지 않습니다 내 현재 코드입니다.

$(document).ready(function() { 
    var m = [{ 
     mp: "data/audio1.mp3", 
     p: "data/Slide1.PNG" 
    }, { 
     mp: "data/audio2.mp3", 
     p: "data/Slide2.PNG" 
    }, { 
     mp: "data/audio3.mp3", 
     p: "data/Slide3.PNG" 
    }]; 
    $("#jquery_jplayer_1").jPlayer({ 
     ready: function() { 
      $.each(m, function(index, value) { 
       alert(value.mp); 
       $(this).jPlayer("setMedia", { 
        mp3: value.mp, 
        poster: value.p 
       }).jPlayer("play"); 
      }); 
     }, 
     swfPath: "/js", 
     supplied: "mp3", 
     size: { 
      width: "960px", 
      height: "720px" 
     } 
    }); 
}); 

alert (value.mp);은 파일 이름을 확인하는 중입니다.

jPlayer ("재생")과 함께 사용해 보았습니다. 아무런 행운도 없습니다. 나는 각 줄을 제거하고, 단지 [0] 및 m를 .MP m 같은 것을 사용하는 경우

[0] .P, 나는 주어진 MP3를 재생하고 주어진 PNG를 표시 할 수 있습니다. 그러나 "각"접근 방식은 관련 이미지와 함께 mp3 파일 각각을 순차적으로 재생하지 않습니다.

jplayer에는 listplayer 부가 기능이 있지만, 필자가 필요로하지 않는 많은 기능이 있으므로 몇 줄의 코드로이 작업을 수행 할 수 있다면 사용하지 않을 것입니다.

Answer 1

다음은 mp3를 재생하고 관련 포스터를 순차적으로 표시하는 방법입니다. jPlayer 은 이벤트로 끝났습니다.

$(document).ready(function() { 
    var m = [{ 
     mp: "data/a24x2x1.mp3", 
     p: "data/Slide1.PNG" 
    }, { 
     mp: "data/a24x3x1.mp3", 
     p: "data/Slide2.PNG" 
    }, { 
     mp: "data/a24x4x1.mp3", 
     p: "data/Slide3.PNG" 
    }]; 
    var n = 0; 
    $("#jquery_jplayer_1").jPlayer({ 
     ready: function() { 
      $("#jquery_jplayer_1").bind($.jPlayer.event.ended, function(event) { 
       if (n < m.length - 1) { 
        n++; 
       } else { 
        alert("do something after the last slide"); 
        return; 
       } 
       $(this).jPlayer("setMedia", { 
        mp3: m[n].mp, 
        poster: m[n].p 
       }).jPlayer("play"); 
      }); 
      $(this).jPlayer("setMedia", { 
       mp3: m[n].mp, 
       poster: m[n].p 
      }).jPlayer("play"); 
     }, 
     swfPath: "/js", 
     supplied: "mp3", 
     size: { 
      width: "960px", 
      height: "720px" 
     } 
    }); 
});