Jak odtwarzać listy mp3 za pomocą SoundManager za pomocą kontrolek

Question

Próbuję odtworzyć wiele plików audio, używając SoundManager2 i jak dotąd jest to jedyny działający przykład, jaki mogę znaleźć na stronie.

<script src="/path/to/soundmanager2.js"></script> 
<script> 
soundManager.setup({ 
    url: '/path/to/swf-files/', 
    onready: function() { 
    var mySound = soundManager.createSound({ 
     id: 'aSound', 
     url: '/path/to/example.mp3' 
    }); 
    mySound.play(); 
    }, 
    ontimeout: function() { 
    // Hrmm, SM2 could not start. Missing SWF? Flash blocked? Show an error, etc.? 
    } 
}); 
</script> 

Mimo, że mogę grać example.mp3 z powyższego przykładu, chciałbym użyć playlistę, jak pokazano w tym example. Niestety, ta strona nie wspomina nic o tym, jak zaimplementować funkcję listy odtwarzania.

Obecnie mam JSON, która zwraca ścieżek mp3 dla danego utworu artysty, tak:

{ 
    "john_doe":"/path/to/audio/john_doe.mp3", 
    "jane_smith":"/path/to/audio/jane_smith.mp3", 
} 

Tak, jak mogę włączyć te dane json, aby utworzyć listę odtwarzania, na przykład 2 utwory.

Answer 1

Możesz użyć listy, którą chcesz. Możesz napisać tak jak poniżej lub użyć wyniku JSON. Ta pętla je bez końca:

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

Następnie upewnij się, że nie są uruchomione w Flash 8 numerze:

From SoundManager2's Revision History:

Flash Player 11.6.602.171, wydany przez firmę Adobe na 26.02.2013, wprowadzono problem z domyślną interakcją opartą na interfejsie API Flash 8 (flashVersion: 8), opartym na interfejsie API SM2, w którym metody SM2 wywoływane z wywołań zwrotnych, takich jak onfinish(), nie działałyby. To przede wszystkim złamało metody używane do odtwarzania dźwięków w sekwencji, seryjnego ładowania serii dźwięków i tak dalej. (Więcej informacji można znaleźć w artykule discussion).

Należy zauważyć, że nie ma to wpływu na przypadki, w których używany jest kod soundManager.setup({ flashVersion: 9}); jednakże SM2 domyślnie używa flashVersion: 8.

W szczególności zdarzenia inicjowane przez funkcję Flash (takie jak dźwiękowe zakończenie) powodują wywoływanie funkcji Flash -> JS w interfejsie SM2 API, które następnie wywołują określone przez użytkownika procedury obsługi zdarzeń. Jeśli określona przez użytkownika instrukcja SM2 onfinish() natychmiast wywoła metodę SM2, taką jak play(), która wywołuje wywołanie JS -> Flash, to połączenie albo cichnie się zawiesza, albo jest blokowane. Inne biblioteki JS + Flash, które używają podobnych wzorców wywołań zwrotnych, również mogą zostać naruszone, jeśli ich SWF jest zbudowany z interfejsem API Flash 8.

Podejrzewając problem związany z synchronizacją lub rekurencją/stosem, stwierdzono, że wprowadzenie funkcji zwrotnej SM2 określonej przez użytkownika, takiej jak setTimeout(callback, 0), przywróciło funkcje sekwencyjne/listy odtwarzania.

Flash Player 11.6.602.180, przesłany przez Adobe w dniu 3/12/2013, wykazuje to samo zachowanie. Aby uniknąć dodatkowych hacków, SM2 stosuje to do wszystkich wywołań API opartych na technologii Flash 8, niezależnie od zainstalowanej wersji Flash Playera. W wyniku tej zmiany nie przewiduje się regresji.

Ewentualnie można tego uniknąć, używając funkcji soundManager.setup({ flashVersion: 9 }), ponieważ interfejs API oparty na programie Flash 9 nie ma tego problemu.

Należy zauważyć, że w tym przykładzie, szuflada lista zostanie wstawiony tutaj:

To jest przycisk menu do wyzwalania rozwijaną („szuflady”).Kod JavaScript zadba o wszystko opiera się na nazwach klas przypisaniu pokazane tutaj:

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

Jest to bar tytuł:

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

Playlist Szuflada (pierwsza część buduje szuflady/drugi tworzy samą listę odtwarzania w szufladzie:

<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="http://freshly-ground.com/data/audio/sm2/SonReal%20-%20I%20Tried.mp3"> 
      <b>SonReal</b> - I Tried</a></li> 
     </ul> 
     </div> 

</div> 

</div> 

Losowe wskazówki badawcze:

• Węzły html są modyfikowane za pomocą funkcji użyteczności zamiast JQuery lub coś innego mogłeś szukaliśmy. Kod można znaleźć na początku pliku bar-ui.js, aby móc lepiej zrozumieć, co robi cały inny kod źródłowy.
• Plik CSS, którego szukasz, to bar-ui.css. Daje ci wszystko, czego potrzebujesz.
• W przeglądarce takiej jak Chrome możesz kliknąć prawym przyciskiem myszy obszar i wybrać "Sprawdź element", aby zobaczyć, do której części strony odnosi się DIV.