Как добавить индикатор выполнения песни для soundmanager2 (inlineplayer)?

Я только что установил soundmanager2 на свой сайт. Поскольку мой сайт содержит различные mp3-ссылки, я решил использовать встроенный проигрыватель sm2, который ищет mp3-файлы на странице и заменяет их экземплярами встроенного проигрывателя. Теперь плеер работает, и я хотел бы добавить индикатор выполнения.

Я нашел см2-решение для индикатора выполнения по ссылке ниже, но по какой-то причине это решение у меня не работает. Панель появляется, но прогресс не отображается: Как добавить песню индикатор выполнения в SoundManager2?

Вы можете увидеть плеер с индикатором выполнения, который не работает, здесь: http://goo.gl/oD90Oj/< /а>.

Любая помощь будет принята с благодарностью!

Мой см2 звонок:

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;
}

person jkulakowski    schedule 30.12.2014    source источник


Ответы (1)


В soundManager нет функции с именем whileplaying, вам нужно использовать soundManager.createSound с параметрами whileplaying, как показано в ответе SO, который вы дали.

в качестве альтернативы, поскольку вы знаете время начала/остановки и продолжительность курса, вы можете вручную использовать JS setInterval. Я почти уверен, что это то, что делает метод во время игры за кулисами.

РЕДАКТИРОВАТЬ: soundManager предоставляет событие с именем whileplaying, но это не функция soundManager. whileplaying — это функция экземпляра звукового объекта, который вы создали с помощью soundManager. Я надеюсь, что в этом есть смысл.

поэтому, если вы хотите использовать whileplaying, вы можете либо использовать метод createSound, который прикрепит событие к звуковому объекту, либо получить экземпляр звука и использовать метод sound.play с параметрами, просто отметьте демо, которое вы мне прислали. Я думаю, вы уже вызываете эту функцию или аналогичную, когда пользователь нажимает кнопку воспроизведения.

//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") для страницы, но поиск относительно игрока имеет преимущества, если у вас есть несколько игроков на одной странице.

person Onur Topal    schedule 30.12.2014
comment
Хм. Спасибо за ответ. Тем не менее, я считаю, что в sm2 встроена функция whileplaying(). Это показано на их веб-сайте, здесь, в демо 11: schillmania.com/projects/soundmanager2/demo/api - person jkulakowski; 30.12.2014
comment
пожалуйста, проверьте обновленный ответ также в демо 11, он использует sound.options, а не soundManager. - person Onur Topal; 31.12.2014
comment
Хорошая точка зрения! На самом деле после вашего первоначального комментария я начал искать другое решение и нашел его в jQuery. Однако у меня также возникают проблемы с реализацией этого. Я не знаю, как настроить таргетинг на #player, используя следующий код: $(#player › .progress-bar-container).css('width', ((this.bytesLoaded/this.bytesTotal) * 100 ) + '%'); $(#player › .progress-bar-container › .progress-bar).css('width', ((this.position/this.duration) * 100) + '%'); - person jkulakowski; 31.12.2014
comment
В настоящее время я использую встроенный проигрыватель, чтобы захватить мои mp3-ссылки и преобразовать их в экземпляры проигрывателя sm2. Мои ссылки построены следующим образом: ‹a href=song.mp3 class=sm2_link inline-playable type=audio/mpeg›Название песни‹/a› - person jkulakowski; 31.12.2014
comment
Я ценю ответ, но, к сожалению, я не уверен, как вызывается игрок. Я предполагаю, что это где-то внутри самого кода встроенного проигрывателя. Как видно из моего исходного кода, когда документ готов, можно вызвать плеер, но я этого не делаю. Это уже делается где-то еще в демонстрационном коде. - person jkulakowski; 09.01.2015