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。我很确定这就是播放方法在幕后做的事情。

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

因此，如果您想使用whileplaying，您可以使用createSound方法将事件附加到声音对象或获取声音实例，并使用sound.play方法选项，只需选中{{3}你送我了我认为当用户点击播放按钮时，您已经在调用此功能或类似功能。

//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.');
      }
    });
  }
});

编辑第2条评论：不确定您何时拨打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")作为页面，但是如果你在一个页面中有多个玩家，那么找到相对于玩家的好处会有好处。

如何为soundmanager2（内联播放器）添加歌曲进度条？

1 个答案: