为什么我的页面上不显示 SoundManager2 控件？答案

【问题标题】：Why aren't SoundManager2 controls displayed on my page?为什么我的页面上不显示 SoundManager2 控件？
【发布时间】：2023-03-18 14:29:01
【问题描述】：

我有一个带有SoundManager2 控件的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>

它看起来是这样的：

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

我在开发控制台中没有看到任何“错误的 URL”问题：

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

更新 1（20.02.2016 07:55 MSK）：我调整了 file，现在我可以开始播放特定歌曲了。这是页面现在的样子：

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

【问题讨论】：

标签： javascript ruby sinatra soundmanager2

【解决方案1】：

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

[edit]根据下面的帖子更新[/edit]

Bar UI 会自行引导，因此只要您的页面中有正确的 Bar UI HTML，您无需执行任何操作。此外，播放列表通过一系列列表项出现在 Bar UI HTML 中。因此，Bar UI 本身不需要“初始化”，如果 HTML 存在并且播放列表已填写，它就可以工作。有一个 Bar UI API，可让您访问歌曲和播放列表，如果您将 Bar UI 实例记录到控制台，您可以看到这些内容。但同样，只要您有 a) 页面中所有需要的脚本/css 和 b) 页面中已有的所有必要 html，那么当页面重新加载时一切都将“正常工作”。

你需要在你的页面中有这些东西：

SoundManager2 的 js
栏 UI CSS
栏 UI js
栏 UI HTML

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

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

【讨论】：

谢谢。您将用于音量和其他控件的 SVG 图像放在哪里？
@rluna 谢谢，现在播放器已显示。当我按下“播放”按钮一次时，歌曲开始播放。当我再次按下它时，我希望它会暂停，但这不会发生。这可能是什么原因？代码位于：github.com/dpisarenko/50web/blob/songcontest4/views/songcontest/…

【解决方案2】：

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

【讨论】：