Canvas-based UI. Load progress, seek, play/pause etc. Also see 360° UI visualization demo.
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>
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;
}
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)