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)