為什么我的頁面上沒有顯示SoundManager2控件？

Question

我有一個帶有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>

看起來是這樣的：

為什么不顯示控件（播放，暫停等）？ 我需要如何更改代碼才能使其可見？

我在開發人員控制台中看不到任何“錯誤的URL”問題：

在JS控制台中也看不到任何錯誤：

更新1（20.02.2016 07:55 MSK）：我修改了文件，以便現在可以開始播放特定歌曲。 現在頁面如下所示：

但是，有一個錯誤：當我第二次按下“播放”按鈕時，播放沒有暫停（正如我期望的那樣）。 我在控制台中看不到任何明顯的錯誤。

Answer 1

Soundmanager2沒有ui，它只是用於播放聲音的api。 您在他們的站點上看到的UI是一個完全不同的庫，稱為Bar UI。 您必須從演示中復制html和其他相關代碼。 巧合的是，我幾天前就想出了這一點，並寫了一些有關它的內容：如何使用Bar UI

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

Bar UI會自我引導，因此只要頁面中具有正確的Bar UI HTML，您就無需執行任何操作。 此外，播放列表通過一系列列表項顯示在Bar UI HTML中。 因此，如果存在HTML並填寫了播放列表，Bar UI本身就不需要“初始化”，那么它就可以正常工作。 有一個Bar UI API，可讓您訪問歌曲和播放列表，如果您將Bar UI實例登錄到控制台，則可以看到它們。 但是同樣，只要您擁有a）頁面中所有需要的腳本/ css和b）頁面中已經存在的所有必需的html，那么在重新加載頁面時，所有內容都將“正常工作”。

您需要在頁面中包含以下內容：

SoundManager2的js
酒吧UI CSS
Bar UI js
欄UI HTML

Bar UI沒有可下載的軟件包，您必須查看演示頁面的源以獲取所有需要的資產。

請注意，Bar UI CSS將svg用於其UI，因此您必須查看Bar UI CSS才能確定將這些文件放置在自己的服務器上的位置和位置。 當然，您可以編輯CSS以使其適合放置svg文件的位置。

Answer 2

作為Bar UI的替代方法，您可能還想簽出pushtape-player.js ，這可能更易於主題化。 它使用最少的CSS + Fontawesome圖標，使您可以通過多種不同方式呈現UI。

為什么我的頁面上沒有顯示SoundManager2控件？

問題描述

2 個解決方案

解決方案1
1 已采納 2016-02-18 22:04:56

解決方案2
0 2016-03-15 08:59:25

為什么我的頁面上沒有顯示SoundManager2控件？

問題描述

2 個解決方案

解決方案1 1 已采納 2016-02-18 22:04:56

解決方案2 0 2016-03-15 08:59:25

解決方案1
1 已采納 2016-02-18 22:04:56

解決方案2
0 2016-03-15 08:59:25