Question

我有here page控件用于播放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>

它的样子：

SoundManager2

为什么不显示控件（播放，暂停等）？如何更改代码以使其可见？

我没有看到任何错误的网址＆＃34;开发者控制台中的问题：

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

更新1（20.02.2016 07:55 MSK）：我调整了，以便现在我可以开始播放特定的歌曲了。现在页面的内容如下：

file

但是，有一个错误：当我按下＆＃34; Play＆＃34;按钮第二次，播放没有暂停（正如我所料）。我在控制台中没有看到任何明显的错误。

Answer 1

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

[编辑]根据以下帖子进行更新[/ edit]

Bar UI引导自身，只要您的页面中有适当的Bar UI HTML，就不需要做任何事情。此外，播放列表通过一系列列表项存在于Bar UI HTML中。因此，Bar UI本身不需要“初始化”，如果HTML在那里并且填写了播放列表它就可以正常工作。如果您将Bar UI实例记录到控制台，则可以使用Bar UI API访问您可以看到的歌曲和播放列表。但同样，只要你拥有a）页面中所有需要的脚本/ css和b）页面中已经存在的所有必需的html，那么当页面重新加载时，一切都将“正常工作”。

您需要在页面中包含以下内容：

SoundManager2的js
Bar UI CSS
Bar UI js
Bar UI HTML

Bar UI没有可下载的软件包，您需要view the demo page的源代码来获取所有需要的资源。

请注意，Bar UI CSS使用svg作为其UI，因此您必须查看Bar UI CSS以确定将这些文件放在您自己的服务器上的内容和位置。当然，您可以编辑CSS以适合您希望放置svg文件的位置。

Answer 2

作为Bar UI的替代方案，您可能还想查看可能更容易主题的{{3}}。它使用最小的CSS + Fontawesome图标，允许您以多种不同的方式呈现UI。

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

2 个答案: