javascript - Soundmanager2 mp3 播放器按钮预加载下一个声音

Question

我使用 Soundmanager2 的 mp3 播放器按钮在我的网站上播放 mp3 链接。为了在播放当前 mp3 期间预加载下一个 mp3，我使用了以下修改。

play: function() {
sm.load('basicMP3Sound'+(1*this._data.oLink.title)+1);
      //mycode end
      pl.removeClass(this._data.oLink,this._data.className);
      this._data.className = pl.css.sPlaying;
      pl.addClass(this._data.oLink,this._data.className);

},

在上面的示例中，您可能会注意到 this._data.oLink.title 中的标题标签，我将其添加到 mp3 链接中以简单的方式处理文件顺序，例如：

<a href="/quran/assets/audio/Menshawi_16kbps/002001.mp3" class="sm2_button" title="0">/002001.mp3</a>

但是，我注意到在播放当前 mp3 期间没有预加载下一个 mp3 链接。这是因为下一个 mp3 没有连续播放或在播放完上一个 mp3 后开始播放。换句话说，下载需要一些时间或延迟。

我的代码有问题吗？或者你有什么建议？

注意这个 mp3 层的生活演示可以在这个链接中找到

Answer 1

编辑：使用SoundManager 内联按钮播放器的方法

在下面的设置参数中，mp3-player-button.js在config哪里playNext : true|false找到（第 39 行），将其更新为如下所示：

...
this.config = {
    // configuration options
    playNext: true, // stop after one sound, or play through list until end
    autoPlay: false,  // start playing the first sound right away
    preloadNext :  true // preload next sound when previous sound starts to play
};
...

然后，在this.events对象下方（第 96 行），修改play函数以预加载下一个声音：

...
this.events = {

// handlers for sound events as they're started/stopped/played

play: function() {
  pl.removeClass(this._data.oLink,this._data.className);
  this._data.className = pl.css.sPlaying;
  pl.addClass(this._data.oLink,this._data.className);

  if (pl.config.preloadNext) {
    var nextLink = (pl.indexByURL[this._data.oLink.id]+1);
    if (nextLink<pl.links.length) {
     sm.load(nextLink)
    }
  }
 },
...

总之，当一首歌曲开始时，我们检查是否有下一首歌曲；如果有，我们id从实例化 SoundManager 时创建的声音数组中提取它。在这种情况下， SoundManager 是sm，所以我们只需将id下一首歌曲的 传递给sm.load()函数。

这是一个现场演示：http://plnkr.co/edit/mpBkfDIrLNduMAWJjRfN。

---

试试这个方法：

使用方法onplay的和onfinish事件，您可以链接一系列相互委托的文件。createSound

明确告诉firstSound：“当你开始播放时，预加载下一个声音，当你完成播放时，播放下一个声音”

JavaScript

var firstSound = soundManager.createSound({
    id: 'firstSound',
    url: 'path/to/your/firstSound.mp3'
});
var secondSound = soundManager.createSound({
    id: 'secondSound',
    url: 'path/to/your/secondSound.mp3'
});
// Kickoff first sound
firstSound.load();
// Define the chain of events
firstSound.play({
    onplay: function () {
        // When `firstSound` starts, preload `secondSound`
        secondSound.load();
    },
    onfinish: function () {
        // Repeat, with next sound
        secondSound.play({...
        })
    }
});