SoundManager 2 / 360° Player: JavaScript + Canvas UI

Canvas-based UI. Load progress, seek, play/pause etc. Also see 360° UI visualization demo.

How This Works

The script looks for a container element matching div.ui360, and then the first link inside of it.

<div class="ui360">
 <a href="/path/to/an.mp3">play "an.mp3"</a>
</div>

When the 360 player script loads, it adds a UI template to the block, prepending it in front of the MP3 link:

<div class="ui360">
 <-- dynamically-inserted block -->
 <div class="ui">
  <canvas class="sm2-canvas"></canvas>
  <span class="sm2-360btn"></span> 
  <div class="sm2-timing"></div>
  <div class="sm2-cover"></div>
 </div>
 <-- /UI -->
 <a href="/path/to/an.mp3">
</div>

Customizing the UI

The player's default 50x50-pixel canvas is defined both within JavaScript and CSS. For an example with different values, see this larger version.

threeSixtyPlayer.config = {
  playNext: false, // stop after one sound, or play through list until end
  autoPlay: false, // start playing the first sound right away
  allowMultiple: true, // let many sounds play at once (false = one at a time)
  loadRingColor: '#ccc', // amount of sound which has loaded
  playRingColor: '#000', // amount of sound which has played
  backgroundRingColor: '#eee', // "default" color shown underneath everything else
  animDuration: 500,
  animTransition: Animator.tx.bouncy // http://www.berniecode.com/writing/animator.html
}

The CSS for the canvas UI block is a bit ugly, but JavaScript reads the width of the .sm2-360ui element in the DOM as set by CSS and uses that to later draw and update the canvas element while playing.

.ui360,
.sm2-360ui {
  /* size of the container for the circle, etc. */
  width:50px;
  height:50px;
}

Third-party Components

This demo includes use of Bernie's Better Animation Class (Apache licensed) for some animation effects.

Also, some loader/spinner icons from ajaxload.info are used for showing loading/buffering states.

SoundManager 2 project page (not an MP3 link)