为什么我的页面上没有显示 SoundManager2 控件？

Question

我有一个 page with the SoundManager2 控件用于播放 MP3 文件。当我打开页面时，HTML 代码如下所示，我听到了 MP3 文件的声音。

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Free, open song contest</title>
<meta name="viewport" content="width=device-width" />
</head>
<body>
<section id="content">

<h2>Free, open song contest</h2>
 <div id="sm2-container">
  <!-- SM2 flash goes here -->
 </div>
<script src="/js/soundmanagerv297a-20150601/script/soundmanager2.js"></script>
<script>
soundManager.setup({
  url: '/js/soundmanagerv297a-20150601/swf/',
  onready: function() {
    var mySound = soundManager.createSound({
      url: 'http://localhost:3000/songs/Sleep%20Away.mp3'
    });
    mySound.play();
  }
});
</script>

</section>
</body>
</html>

这就是它的样子：

为什么不显示控件（播放、暂停等）？我需要如何更改我的代码才能使它们可见？

我在开发控制台中没有看到任何 "wrong URL" 问题：

我在 JS 控制台中也没有看到任何错误：

更新 1 (20.02.2016 07:55 MSK): 我修改了 file 这样我就可以开始播放特定的歌曲了。页面现在的样子：

但是出现错误：当我第二次按下"Play"按钮时，播放没有暂停（如我所料）。我在控制台中没有看到任何明显的错误。

Answer 1

Soundmanager2 没有 ui - 它只是一个用于播放声音的 api。您在他们的网站上看到的 UI 是一个完全不同的库，名为 Bar UI。您必须从演示中复制 html 和其他相关代码。巧合的是，几天前我发现了这个问题并写了一些关于它的东西：how to use Bar UI

[edit]根据以下帖子更新[/edit]

Bar UI 会自行引导，因此只要您的页面中有适当的 Bar UI HTML，您就无需执行任何操作。此外，播放列表通过一系列列表项显示在栏 UI HTML 中。 Bar UI 因此 requires 本身没有 "initing"，如果 HTML 存在并且播放列表已填写，它就可以正常工作。有一个 Bar UI API 可以让您访问歌曲和播放列表，如果您将 Bar UI 实例记录到控制台，您就可以看到这些内容。但是同样，只要您 a) 页面中有所有需要的 scripts/css 和 b) 页面中已经有所有需要的 html，那么当页面重新加载时，所有内容都将 "just work"。

您的页面中需要包含这些内容：

SoundManager2 的 js
小节UICSS
酒吧UI js
小节UIHTML

Bar UI 没有可下载的包，您必须到 view the demo page 的源来获取所有需要的资源。

请注意，Bar UI CSS 使用 svg 作为它的 UI 所以你必须查看 Bar UI CSS 来弄清楚是什么以及将这些文件放在您自己的服务器上的位置。当然，您可以编辑 CSS 以适合您喜欢放置 svg 文件的位置。

Answer 2

作为 Bar UI 的替代品，您可能还想查看 pushtape-player.js，它可能更容易设置主题。它使用最小的 CSS + Fontawesome 图标，允许您以多种不同的方式呈现 UI。

为什么我的页面上没有显示 SoundManager2 控件？

Why aren't SoundManager2 controls displayed on my page?

javascript

ruby

sinatra

soundmanager2