javascriptrubysinatrasoundmanager2

Why aren't SoundManager2 controls displayed on my page?

I have a page with the SoundManager2 control for playing back MP3 file. When I open the page, the HTML code looks like shown below and I hear the sound of the MP3 file.

<!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>

That's what it looks like:

Screenshot 1

Why aren't the controls (play, pause etc.) displayed? How do I need to change my code in order for them to be visible?

I don't see any "wrong URL" problems in the dev console:

Dev console

Neither do I see any errors in the JS console:

JS console

Update 1 (20.02.2016 07:55 MSK): I adapted the file so that now I can start the playback of a particular song. Here's what the page looks like now:

Player

However, there is an error: When I press the "Play" button second time, the playback is not paused (as I expect). I don't see any obvious errors in the console.

Solution

  • Soundmanager2 does not have a ui - its just an api for playing sound. The UI you see at their site is a completely different library called Bar UI. You have to copy the html and other relevant code from the demo. Coincidentally I figured this out a couple of days ago and wrote up something about it: how to use Bar UI

    [edit]updating per the posts below[/edit]

    Bar UI bootstraps itself so there is nothing that you need to do as long as you have the proper Bar UI HTML in your page. Also, the playlist is present in the Bar UI HTML via a series of list items. Bar UI therefore requires no "initing" per se, if the HTML is there and the playlist is filled out it just works. There is a Bar UI API that gives you access to songs and playlists that you can see if you log a Bar UI instance to the console. But again, as long as you have a) all the needed scripts/css in the page and b) all the necessary html already in the page, then everything will "just work" when the page reloads.

    You need to have these things in your page:

    Bar UI does not have a downloadable package, you have to view the demo page's source to get all the needed assets.

    Note that the Bar UI CSS uses svg for its UI so you have to look at the Bar UI CSS to figure out what and where to put those files on your own server. Of course, you can edit the CSS to fit where you prefer to place the svg files.