如何使用控件使用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使用上面的示例,我也想使用此示例中显示的播放列表.遗憾的是,该页面没有提及有关如何实现播放列表功能的任何内容.

我目前有一个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 问题：

来自 SoundManager2 的修订历史：

Adobe 于 2013 年 2 月 26 日发布的 Flash Player 11.6.602.171 引入了 SM2 默认 Flash 8（flashVersion：8）基于 API 的 JS/Flash 交互问题，其中从回调调用的 SM2 方法（例如）将onfinish()不起作用。这主要破坏了用于按顺序播放声音、连续加载一系列声音等的方法。（有关更多信息，请参阅讨论。）

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

具体来说，Flash 启动的事件（例如声音完成）会对 SM2 API 进行 Flash -> JS 调用，随后调用用户指定的事件处理程序。如果用户指定的 SM2onfinish()处理程序立即调用 SM2 方法（例如 play()）来进行 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 引用了页面的哪个部分。