我刚刚在我的网站上安装了soundmanager2。由于我的站点包含各种mp3链接,因此我选择使用sm2的inlineplayer解决方案,该解决方案可在页面上查找mp3并将其替换为inline player实例。播放器正在工作,我想添加一个进度条。

我在下面的链接中为进度栏找到了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;
}

最佳答案

soundManager没有名为whileplaying的函数,您需要将soundManager.createSoundwhileplaying选项一起使用,如您给出的SO答案所示。

或者,您知道开始/停止的时间和持续时间,您可以手动使用JS setInterval。我很确定这是幕后花絮。

编辑:soundManager提供了一个名为whileplaying的事件,但它不是soundManager的功能。 whileplaying是使用soundManager创建的声音对象实例的功能。我希望这是有道理的。

因此,如果您想使用whileplaying,则可以使用将事件附加到声音对象的createSound方法,也可以获取声音的实例,并使用带有选项的sound.play方法,只需检查已发送给我的the demo。我认为您已经在用户单击播放按钮时调用了此功能或类似功能。

//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"),但是如果您在一个页面中有多个玩家,则找到相对于玩家的内容会有所帮助。

关于javascript - 如何为soundmanager2(inlineplayer)添加歌曲进度条?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/27704829/

10-12 12:17
查看更多