# SoundManager 2 / 360° Player: JS + Canvas UI

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

Rain
20090119 - Untitled Groove
Walking
20090207 - Loverman
Barrlping with Carl (featureblend.com)

Alternate style: inline

Angry cow sound?
Things that open, close and roll
20060826 - Armstrong

Video playback control

Drip Coffee
Magnets

### 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">
    </div>

When the link is clicked, the script 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>
      <img class="sm2-360btn" />
      <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
      loadRingColor: '#ccc', // amount of sound which has loaded
      playRingColor: '#000', // amount of sound which has played
      backgroundRingColor: '#eee', // "default" color shown underneath everything else
      imageRoot: '', // path to prepend for empty.gif used for play/pause button
      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;
    }

### Using the 360° UI for video

With SoundManager "MovieStar" and video modes enabled, you may also control video using the same callbacks as sound.

    soundManager.useMovieStar = true;
    soundManager.movieStarOptions.useVideo = true;

### 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)