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

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 中显示的播放列表。遗憾的是，该页面没有提及如何实现播放列表功能。

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

{
  "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 方法从回调中调用，例如 @987654324 @ 行不通。这主要破坏了用于顺序播放声音、串行加载一系列声音等的方法。 （更多信息请参见discussion。）

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

具体来说，Flash 启动的事件（例如声音结束）使 Flash -> JS 调用 SM2 API，后者随后调用用户指定的事件处理程序。如果用户指定的 SM2 onfinish() 处理程序立即调用类似 play() 的 SM2 方法，该方法进行 JS -> Flash 调用，则此调用要么静默失败，要么被阻塞。其他使用类似回调模式的 JS + Flash 库也可能会受到影响，如果它们的 SWF 是针对 Flash 8 API 构建的。

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

Adobe 于 2013 年 3 月 12 日发布的 Flash Player 11.6.602.180 表现出相同的行为。为避免额外的黑客攻击，SM2 将此应用于所有基于 Flash 8 的 API 回调，无论安装的是什么版本的 Flash Player。预计此更改不会导致任何回归。

或者，使用soundManager.setup({ flashVersion: 9 }) 可以避免此问题，因为基于 Flash 9 的 API 似乎没有此问题。

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

这是触发下拉菜单（“抽屉”）的菜单按钮。 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="http://freshly-ground.com/data/audio/sm2/SonReal%20-%20I%20Tried.mp3">
           <b>SonReal</b> - I Tried</a></li>
        </ul>
      </div>

 </div>

</div>

随机研究提示：

• html 节点是通过实用函数而不是 JQuery 或您可能一直在寻找的其他东西来修改的。您可以在 bar-ui.js 文件的开头找到此代码，以防您想了解所有其他源代码在哪些方面做得更好。
• 您要查找的 CSS 文件是 bar-ui.css。它为您提供所需的所有风格。
• 在 Chrome 等浏览器中，您可以右键单击某个区域并选择“检查元素”以查看 DIV 所指的页面部分。