Почему на моей странице не отображаются элементы управления SoundManager2?

У меня есть страница с 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>

Вот как это выглядит:

Скриншот 1

Почему не отображаются элементы управления (воспроизведение, пауза и т. д.)? Как мне нужно изменить свой код, чтобы они были видны?

Я не вижу проблем с "неправильным URL" в консоли разработчика:

Консоль разработки

Я также не вижу никаких ошибок в консоли JS:

JS-консоль

Обновление 1 (20.02.2016 07:55 МСК): я адаптировал файл, чтобы теперь я мог начать воспроизведение определенной песни. Вот как страница выглядит сейчас:

Игрок

Однако есть ошибка: Когда я нажимаю кнопку "Воспроизвести" второй раз, воспроизведение не ставится на паузу (как я ожидаю). Явных ошибок в консоли не вижу.


person Mentiflectax    schedule 18.02.2016    source источник


Ответы (2)


Soundmanager2 не имеет пользовательского интерфейса — это просто API для воспроизведения звука. Пользовательский интерфейс, который вы видите на их сайте, представляет собой совершенно другую библиотеку под названием Bar UI. Вы должны скопировать html и другой соответствующий код из демо. По совпадению я понял это пару дней назад и кое-что написал об этом: как использовать интерфейс панели

[edit]обновление согласно постам ниже[/edit]

Пользовательский интерфейс панели загружается сам, поэтому вам не нужно ничего делать, если на вашей странице есть правильный HTML-код пользовательского интерфейса панели. Кроме того, список воспроизведения присутствует в HTML-коде пользовательского интерфейса панели в виде ряда элементов списка. Таким образом, пользовательский интерфейс панели не требует «инициализации» как таковой, если есть HTML и заполнен список воспроизведения, он просто работает. Существует API-интерфейс Bar UI, который дает вам доступ к песням и спискам воспроизведения, которые вы можете увидеть, если зарегистрируете экземпляр Bar UI на консоли. Но опять же, если у вас есть а) все необходимые скрипты/css на странице и б) весь необходимый html уже на странице, тогда все будет «просто работать» при перезагрузке страницы.

Вы должны иметь эти вещи на своей странице:

  • JS SoundManager2
  • Барный пользовательский интерфейс CSS
  • Бар UI js
  • HTML интерфейс бара

Пользовательский интерфейс Bar не имеет загружаемого пакета, вам необходимо просмотреть демонстрационную страницу, чтобы получить все необходимые активы.

Обратите внимание, что CSS Bar UI использует svg для своего пользовательского интерфейса, поэтому вам нужно взглянуть на CSS Bar UI, чтобы выяснить, что и где разместить эти файлы на вашем собственном сервере. Конечно, вы можете отредактировать CSS, чтобы он соответствовал тому месту, где вы предпочитаете размещать файлы svg.

person rluna    schedule 18.02.2016
comment
Спасибо. Куда вы помещаете изображения SVG для громкости и других элементов управления? - person Mentiflectax; 19.02.2016
comment
@rluna Спасибо, теперь плеер отображается. Когда я нажимаю кнопку воспроизведения один раз, песня начинает играть. Когда я нажимаю ее еще раз, я ожидаю, что она будет приостановлена, но этого не происходит. Что может быть причиной этого? Код находится здесь: github.com/dpisarenko/50web/ blob/songcontest4/views/songcontest/ - person Mentiflectax; 20.02.2016

В качестве альтернативы пользовательскому интерфейсу Bar вы также можете проверить pushtape-player.js. что может быть проще темы. Он использует минимальные значки CSS + Fontawesome, что позволяет отображать пользовательский интерфейс разными способами.

person burrbrown    schedule 15.03.2016