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.