Wie man MP3-Wiedergabelisten mit SoundManager mit den Steuerelementen spielt

Question

Ich versuche, mehrere Audio-Dateien mit SoundManager2 zu spielen, und bis jetzt ist dies das einzige funktionierende Beispiel, das ich von der Seite finden konnte.

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

Auch wenn ich example.mp3 mit dem obigen Beispiel spielen kann, würde Ich mag die Playlist verwenden, wie in diesen example gezeigt. Leider erwähnt diese Seite nichts darüber, wie man die Playlist-Funktion implementiert.

Ich habe derzeit ein Json, die MP3-Pfade für einen bestimmten Song Künstler zurückgibt, wie folgt aus:

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

Also, wie kann ich diese json Daten übernehmen zum Beispiel 2 Songs eine Wiedergabeliste, zu machen.

Answer 1

Sie können eine Liste verwenden, wie Sie möchten. Sie können es wie unten beschrieben fest codieren oder Ihr JSON-Ergebnis verwenden. Diese Schleife wird sie endlos:

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

Dann stellen Sie sicher, dass Sie nicht in die Flash 8 Ausgabe ausgeführt werden:

From SoundManager2's Revision History:

Flash Player 11.6.602.171, veröffentlicht von Adobe auf 26.02.2013, ein Problem mit SM2's Standard Flash 8 (flashVersion: 8) API-basierter JS/Flash-Interaktion, wo SM2-Methoden aus Callbacks wie onfinish() nicht funktionieren. Dies löste in erster Linie Methoden aus, die zum aufeinanderfolgenden Abspielen von Klängen, zum seriellen Laden einer Reihe von Klängen usw. verwendet wurden. (Weitere Informationen finden Sie unter discussion.)

Beachten Sie, dass dies keine Auswirkungen auf Fälle hat, in denen soundManager.setup({ flashVersion: 9}) verwendet wird; SM2 verwendet jedoch standardmäßig flashVersion: 8.

Flash-initiierte Ereignisse (z. B. ein Sound-Finishing) machen Flash -> JS-Aufrufe an die SM2-API, die anschließend benutzerdefinierte Ereignishandler aufrufen. Wenn der anwenderspezifische SM2-Handler onfinish() sofort eine SM2-Methode wie play() aufruft, die einen JS -> Flash-Aufruf ausführt, schlägt dieser Aufruf entweder automatisch fehl oder wird blockiert. Andere JS + Flash-Bibliotheken, die ähnliche Rückrufmuster verwenden, können ebenfalls betroffen sein, wenn ihre SWF-Datei auf die Flash 8-API ausgerichtet ist.

Bei Verdacht auf ein Timing- oder Rekursions-/Stack-Problem wurde gefunden, dass setTimeout(callback, 0) benutzerspezifischen SM2-Callbacks wie onfinish() die wiederhergestellte Sequential/Playlist-Funktion wieder einführte.

Flash Player 11.6.602.180, veröffentlicht von Adobe am 12.03.2013, weist das gleiche Verhalten auf. Um zusätzliche Hacks zu vermeiden, wendet SM2 dies auf alle Flash 8-basierten API-Rückrufe an, unabhängig davon, welche Version von Flash Player installiert ist. Aufgrund dieser Änderung sind keine Rückschritte zu erwarten.

Alternativ kann dieses Problem durch Verwendung von soundManager.setup({ flashVersion: 9 }) vermieden werden, da die Flash 9-basierte API dieses Problem nicht zu haben scheint.

Beachten Sie, dass in dem Beispiel die Wiedergabeliste Schublade hier eingefügt:

Dies ist die Menütaste zum Auslösen des Drop-Down („Schublade“).Das JavaScript wird sich um alles kümmern, basierend auf den Klassennamen Sie hier gezeigten zuordnen:

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

Play Schublade (erster Teil bildet die Schublade /:

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

Dies ist der Titelleiste zweitens baut die Playlist selbst in der Schublade auf.

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

Zufällige Forschung Tipps:

• Die HTML-Knoten werden über die Nutzenfunktion nicht JQuery oder etwas anderes geändert Sie vielleicht gesucht haben. Sie finden den Code dafür am Anfang der bar-ui.js Datei, falls Sie verstehen wollen, was der andere Quellcode besser macht.
• Die CSS-Datei, die Sie suchen, ist bar-ui.css. Es gibt Ihnen den ganzen Stil, den Sie brauchen.
• In einem Browser wie Chrome können Sie mit der rechten Maustaste auf einen Bereich klicken und "Element prüfen" auswählen, um zu sehen, auf welchen Teil der Seite sich ein DIV bezieht.