SoundManager2 is a cool library for adding playing audio within web pages. Unfortunately it in itself does not supply a GUI to interact with, instead it provides an API with which to interact with your mp3’s.

The SoundManager2 website does show a demo UI that it calls “Bar UI”. It is not integrated into SoundManager2 but is instead a completely separate library. SoundManager2’s website implies by association that one might get Bar UI merely by creating a new SoundManager2 instance but that’s not true at all.

I spent some time pouring over the docs expecting to find a config property to set the div element within which Bar UI would be inserted since, afterall, every other widget on the Internet functions this way. Alas, that’s not the case here.

So how does one init Bar UI? Well, one doesn’t! Bar UI bootstraps itself when the page is loaded. When this happens it looks for the Bar UI HTML (which not only contains the UI but also the playlist) and if found sets up everything to be interacted with. This means that its incredibly easy to get up and running as long as you understand how to put the pieces together.

Get the Needed Libraries

First download SoundManager2 – easy enough as download links are part of its website.

  • soundmanager2-jsmin.js

Next download Bar UI’s scripts and CSS files – not so easy because there are no direct links to them. You’ll need to find the paths to the needed files by going to the Bar UI demo page so that you can view the source – you’re looking for these files:

  • bar-ui.css
  • bar_ui.js

Next, the Bar UI CSS uses svg graphics from IcoMoon. Download the free icon pack here:

If you look in the Bar UI CSS itself you’ll see where these icons are used and where the files need to be placed relevant to the CSS. For example:

.sm2-volume-control {
  background-image: url(../image/icomoon/entypo-25px-ffffff/PNG/volume.png);
  background-image: none, url(../image/icomoon/entypo-25px-ffffff/SVG/volume.svg);
}

Using that as a reference you can plainly see where the CSS expects to find the IcoMoon art. Below is a sample directory structure that places both the CSS and the IcoMoon files in the correct locations:

  • your_page.html
  • image/icomoon/ (icomoon files go here as long as the css is in its own folder, i.e., as seen in the next bullet)
  • styles/ (all your css goes here)

Add the Libraries and CSS to Your Page

Now that you have them you need to include them in your page, something like the following:




Copy the Desired UI HTML from the Bar UI Demo Page

Next since none of the Bar UI html is part of the Bar UI library you’ll need to copy the Bar UI HTML code that you want for your page – below is the one that I needed, copy and paste it into your page or visit the Bar UI demo page for alternative layouts

  

The Playlist

View line 47 above – the unordered list contains your playlist. Simply follow the convention of list items/anchor tags and edit your page as needed. When your page loads SoundManager2/Bar UI will allow you to interact with your playlist.

This isn’t the only way to do edit the playlist since there is also an API for Bar UI itself….

Bar UI API

Thankfully the creators of bar UI did touch upon how to interact with each Bar UI instance via the window.sm2BarPlayers object. The “documentation” however stops there but I suppose they assume we know a thing or two about JavaScript… Logging this object to the console reveals the API itself:

sm_bar_ui_api

There are two objects of interest, they are:

  • actions
  • playlistController

You can see the list of methods provided by each where the actions methods deal with manipulating a specific MP3 and the playlistController methods deal with manipulating playlists.

If you only have a single Bar UI player in your page then you access its methods via window.sm2BarPlayers[0]. So, if you want to “Play” an MP3 for your lone Bar UI player simply do this: window.sm2BarPlayers[0].actions.play().

Note that you likely don’t need to do anything special to play your MP3’s since Bar UI exists so that you can just click the “play” button…

Set MP3’s After Page Load via the Bar UI API (and some JavaScript)

Bar UI doesnt have an API method for editing the playlist. BUT, there is a playlistController.refresh method. So what you need to do is to programmatically insert additional playlist list items into the page. Once you do that you will then need to update the Bar UI instance via window.sm2BarPlayers[0].playlistController.refresh();

For example, you could do this:

$('#sm2-playlist-bd).append('
  • This is a new sound file
  • '); window.sm2BarPlayers[0].playlistController.refresh();

    As you can see, jQuery’s append method will add the new mp3 to the end of the HTML playlist. Next, the refresh method call updates the internal Bar UI instance’s playlist.

    Lastly, you may want to disable all the debug log statements cascading into your console, to do so add this to your page: