soundmanager2 (인라인 플레이어)의 노래 진행률 막대를 추가하려면 어떻게합니까?

Question

방금 ​​웹 사이트에 soundmanager2를 설치했습니다. 내 사이트에는 다양한 mp3 링크가 있기 때문에 sm2의 인라인 플레이어 솔루션을 사용했습니다.이 솔루션은 페이지에서 mp3를 찾아 인라인 플레이어의 인스턴스로 대체합니다. 플레이어가 현재 작업 중이며 진행률 막대를 추가하고 싶습니다.

나는 아래 링크에서 진행 표시 줄에 대한 SM2 해결책을 찾았지만 해결책은 어떤 이유로 나를 위해 작동하지 않습니다. 막대가 나타나지만 진행률이 표시되지 않습니다. How to add a song progress bar in SoundManager2?

진행률 막대가 작동하지 않는 플레이어가 표시됩니다 (여기에는 http://goo.gl/oD90Oj/).

도움이 될 것입니다.

내 SM2 전화 :

var inlinePlayer = null; 

soundManager.setup({ 
    // disable or enable debug output 
    debugMode: false, 
    // use HTML5 audio for MP3/MP4, if available 
    preferFlash: false, 
    useFlashBlock: true, 
    waitForWindowLoad: true, 
    // path to directory containing SM2 SWF 
    url: '../js/soundmanagerv2/swf/', 
    // optional: enable MPEG-4/AAC support (requires flash 9) 
    flashVersion: 9 
}); 

// ---- 

soundManager.onready(function() { 
    // soundManager.createSound() etc. may now be called 
    inlinePlayer = new InlinePlayer(); 
}); 

// Setup progress bar width 
soundManager.whileplaying(function() { 
    jQuery(".progBar").css('width', ((this.position/this.duration) * 100) + '%'); 
}); 
// Reset progress bar after play 
soundManager.onfinish(function() { 
    jQuery(".progBar").css('width', '0'); 
}); 

내 CSS :

/* Style Progress Bar */ 
.progBarWrap { 
    background-color: #ccc; 
    height: 10px; 
    margin-top: 10px; 
    position: relative; 
    width: 100%; 
} 

.progBar { 
    width: 0; 
    background-color: #222; 
    height:10px; 
} 

Answer 1

)와 SoundManager (사운드는 함수는가에 도시 된 바와 같이 당신이 그래서 대답 whileplaying 옵션 soundManager.createSound를 사용할 필요가 whileplaying 이름이 없습니다 줬어.

당신은 당신이 수동으로 JS setInterval 사용할 수 있습니다 물론/정지 시간과 기간을 시작 알고 다른 방법으로. 나는 이것이 장면 뒤에서하는 whileplaying 방법이라고 확신한다.

편집 : soundManager은 whileplaying이라는 이벤트를 제공하지만 soundManager의 기능은 제공하지 않습니다. whileplaying은 soundManager으로 만든 사운드 개체의 인스턴스 함수입니다. 나는 그것이 의미가 있기를 바랍니다.

그래서 당신은 당신이 객체를 소리 또는 소리의 인스턴스를 얻을 당신이 나를 보낸 the demo을 확인 옵션을 sound.play 방법을 사용할 수있는 이벤트를 첨부합니다 createSound 방법을 사용할 수 있습니다 whileplaying을 사용합니다. 사용자가 재생 버튼을 클릭 할 때 이미이 기능 또는 유사한 기능을 호출하고 있다고 생각합니다. 2 코멘트

//From the demo page as you can see s is sound. 
s.play({ 
    whileplaying: function() { 
    // demo only: show sound position while playing, for context 
    soundManager._writeDebug('position = ' + this.position); 
    }, 
    onfinish: function() { 
    // when the sound finishes, play it once more to show that the listener does not fire. 
    soundManager._writeDebug('Playing once more, onPosition() should not fire'); 
    this.play({ 
     onfinish: function() { 
     soundManager._writeDebug('"' + this.id + '" finished.'); 
     } 
    }); 
    } 
}); 

편집 : 확실하지 당신은 css 것을 호출하는 경우. whileplaying 이벤트를 첨부하는 데 성공했다고 가정합니다. 코드는 플레이어의 진행 표시 줄을 찾으려고하지만 HTML 구조와 모양이 다릅니다. 아래 선택자가 당신을 속여 야합니다.

$("a.sm2_link.sm2_playing") // finds the active (playing) link 
     .closest("div.post-entry") // finds the parent element for both player and progress 
     .find("div.progBar") //finally finds progress bar now you can change the width 
     .css("width", /*YOUR CALCULATION HERE*/); 

이론적으로 당신은 단지 페이지 $("div.progBar")를 사용하지만 플레이어에 상대를 찾는 경우에 혜택을 한 페이지에 여러 선수를 가지고있다 할 수 있습니다.