Как играть в плейлисты в mp3 с помощью SoundManager с помощью элементов управления

Я пытаюсь воспроизвести несколько аудиофайлов с помощью SoundManager2, и пока это единственный рабочий пример, который я мог найти на сайте.

Несмотря на то, что я могу воспроизвести example.mp3 с приведенным выше примером, я хотел бы использовать плейлист, как показано в этом примере. К сожалению, на этой странице ничего не говорится о том, как реализовать функцию списка воспроизведения.

В настоящее время у меня есть Json, который возвращает mp3-пути для данного исполнителя песни, например:

Итак, как я могу включить эти данные json, чтобы создать список воспроизведения, например, 2 песни.

Ответы

Ответ 1

Вы можете использовать список, как хотите. Вы можете записать его как указано ниже или использовать результат JSON. Это будет циклически их бесконечно:

    var audio = [];
// Array of files you'd like played
audio.playlist = [
    "/canvas/audio/Marissa_Car_Chase.mp3",
    "/canvas/audio/Vortex_Battl_Thru_Danger.mp3",
    "/canvas/audio/Gadgets_Activated.mp3",
    "/canvas/audio/Kids_Run_Into_Agents.mp3",
    "/canvas/audio/Jet_Luge_Chase.mp3"
];

function playAudio(playlistId){
    // Default playlistId to 0 if not supplied 
    playlistId = playlistId ? playlistId : 0;
    // If SoundManager object exists, get rid of it...
    if (audio.nowPlaying){
        audio.nowPlaying.destruct();
        // ...and reset array key if end reached
        if(playlistId == audio.playlist.length){
            playlistId = 0;
        }
    }
    // Standard Sound Manager play sound function...
    soundManager.onready(function() {
        audio.nowPlaying = soundManager.createSound({
            id: 'sk4Audio',
            url: audio.playlist[playlistId],
            autoLoad: true,
            autoPlay: true,
            volume: 50,
            // ...with a recursive callback when play completes
            onfinish: function(){
                playlistId ++;
                playAudio(playlistId);
            }
        })
    });
}

// Start
playAudio[0];

Затем убедитесь, что вы не используете проблему Flash 8:

Из истории изменений SoundManager2:

Flash Player 11.6.602.171, выпущенный Adobe на 02/26/2013, представил проблему с SM2 по умолчанию Flash 8 (flashVersion: 8) на основе API JS/Flash, где методы SM2 вызываются из обратных вызовов, таких как onfinish() не будет работать. Это в первую очередь нарушало методы, используемые для воспроизведения звуков в последовательности, поочередно загружая серию звуков и так далее. (Подробнее см. обсуждение.)

Обратите внимание, что это не влияет на случаи, когда используется soundManager.setup({ flashVersion: 9}); однако по умолчанию SM2 использует flashVersion: 8.

В частности, события, инициируемые Flash (например, завершение звука), вызывают вызовы Flash → JS для SM2 API, которые впоследствии вызывают пользовательские обработчики событий. Если обработчик SM2 onfinish(), заданный пользователем, сразу вызывает метод SM2, такой как play(), который вызывает вызов JS → Flash, этот вызов либо бесшумно терпит неудачу, либо заблокирован. Другие JS + Flash-библиотеки, которые используют похожие шаблоны обратного вызова, также могут быть затронуты, если их SWF построен с таргетингом на API Flash 8.

Подозревая проблему синхронизации или рекурсии/стека, было обнаружено, что введение setTimeout(callback, 0) к указанным пользователем SM2-обратным вызовам типа onfinish() восстановило функциональность последовательного/списка воспроизведения.

Flash Player 11.6.602.180, снятый Adobe 3/12/2013, демонстрирует то же поведение. Чтобы избежать дополнительных хаков, SM2 применяет это ко всем обратным вызовам API на основе Flash 8 независимо от того, какая версия Flash Player установлена. Никаких регрессий не ожидается в результате этого изменения.

В качестве альтернативы эту проблему можно избежать, используя soundManager.setup({ flashVersion: 9 }), поскольку API-интерфейс на основе Flash 9, похоже, не имеет этой проблемы.

Обратите внимание, что в этом примере ящик для плей-листа вставляется здесь:

Это кнопка меню для запуска раскрывающегося списка ( "ящик" ). JavaScript будет заботиться обо всем, основываясь на именах классов, которые вы назначили здесь:

  <div class="sm2-inline-element sm2-button-element sm2-menu">
   <div class="sm2-button-bd">
    <a href="#menu" class="sm2-inline-button menu">menu</a>
   </div>
  </div>

Это строка заголовка :

    <div class="sm2-playlist">
    <div class="sm2-playlist-target">
     <!-- playlist <ul> + <li> markup will be injected here -->
     <!-- if you want default / non-JS content, you can put that here. -->
     <noscript><p>JavaScript is required.</p></noscript>
    </div>
   </div>

Ящик для плейлиста (первая часть создает ящик/вторую строчку самого списка воспроизведения в ящике.

 <div class="bd sm2-playlist-drawer sm2-element">

  <div class="sm2-inline-texture">
   <div class="sm2-box-shadow"></div>
  </div>

  <!-- playlist content is mirrored here -->

  <div class="sm2-playlist-wrapper">
        <ul class="sm2-playlist-bd">
         <li><a href="#" onclick="location.href='http://freshly-ground.com/data/audio/sm2/SonReal%20-%20I%20Tried.mp3'; return false;">
           <b>SonReal</b> - I Tried</a></li>
        </ul>
      </div>

 </div>

</div>

Случайные советы для исследования:

Узлы html модифицируются с помощью функции утилиты, а не JQuery или чего-то еще, что вы, возможно, искали. Вы можете найти код для этого в начале файла bar-ui.js, если вы хотите понять, что делает весь другой исходный код.
Файл CSS, который вы ищете, bar-ui.css. Это дает вам весь стиль, в котором вы нуждаетесь.
В браузере, таком как Chrome, вы можете щелкнуть правой кнопкой мыши по области и выбрать "Осмотреть элемент", чтобы увидеть, на какой части страницы ссылается DIV.