Question

我正在尝试使用SoundManager2播放多个音频文件，到目前为止，这是我能找到的唯一可用的网站示例。

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

尽管如此，我可以使用上面的示例播放example.mp3，但我想使用此example中所示的播放列表。遗憾的是，该页面没有提及有关如何实现播放列表功能的任何内容。

我目前有一个Json可以返回给定歌曲艺术家的mp3路径，如下所示：

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

那么，如何将这个json数据合并成一个播放列表，例如2首歌曲。

Answer 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问题：

From SoundManager2's Revision History：

Adobe于2013年2月26日发布的Flash Player 11.6.602.171引入了SM2默认的Flash 8（flashVersion：8）基于API的JS / Flash交互的问题，其中SM2方法从回调中调用，如{{ 1}}不起作用。这主要打破了用于按顺序播放声音，连续加载一系列声音等的方法。（有关详情，请参阅discussion。）

请注意，这不会影响使用onfinish()的情况;但是，SM2默认使用soundManager.setup({ flashVersion: 9})。

具体来说，Flash启动的事件（例如声音整理）会使Flash - ＆gt; JS调用SM2 API，后者调用用户指定的事件处理程序。如果用户指定的SM2 flashVersion: 8处理程序立即调用像play（）这样生成JS的SM2方法 - > Flash调用，此调用无声地失败或被阻止。如果其SWF是针对Flash 8 API构建的，那么使用类似回调模式的其他JS + Flash库也可能会受到影响。

怀疑时间或递归/堆栈问题，发现onfinish()引入用户指定的SM2回调，如setTimeout(callback, 0)恢复顺序/播放列表功能。

Flash Player 11.6.602.180，由Adobe于2013年3月12日发布，表现出相同的行为。为了避免额外的攻击，SM2将此应用于所有基于Flash 8的API回调，无论安装的是什么版本的Flash Player。由于这种变化，预计不会出现回归。

或者，使用onfinish()可以避免此问题，因为基于Flash 9的API似乎没有此问题。

请注意，在示例中，播放列表抽屉插入此处：

这是用于触发下拉菜单的菜单按钮（“抽屉”）。 JavaScript将根据您在此处显示的类名来处理所有内容：

soundManager.setup({ flashVersion: 9 })

这是标题栏：

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

随机研究提示：

通过实用程序函数修改html节点，而不是JQuery或您可能正在寻找的其他东西。您可以在<div class="bd sm2-playlist-drawer sm2-element"> <div class="sm2-inline-texture"> <div class="sm2-box-shadow"></div> </div>  <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>文件的开头找到此代码，以防您希望能够了解所有其他源代码的效果。
您正在寻找的CSS文件是bar-ui.js。它为您提供了所需的所有风格。
在Chrome等浏览器中，您可以右键单击某个区域，然后选择“检查元素”以查看DIV引用的页面部分。

如何使用控件使用SoundManager播放mp3播放列表

1 个答案: