glenux/wyrian
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Version 0.2b :

Browse source 
- Intro Screen
- Share buttons (Twitter/Facebook)
- SoundManager
- Add audio files
- Some CleanUp
This commit is contained in:
Guillaume DE LA RUE 2011-02-13 13:28:40 +01:00
parent 03e56e1ffe
commit 28e7b63568
262 changed files with 27079 additions and 271 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
audio/18979__bebeto__Loop008_acid.wav Normal file
View file

Binary file not shown.

BIN
audio/35684__jobro__Laser7.wav Normal file
View file

Binary file not shown.

BIN
audio/39023__wildweasel__Dual_Neutron_Disruptor.wav Normal file
View file

Binary file not shown.

BIN
audio/41525__Jamius__BigLaser.wav Normal file
View file

Binary file not shown.

BIN
audio/51483__suonho__suonho_rmx_Berklee_BrianTranseau_132_Let_Me_See_Ya_Bounce_I_crusher.wav Normal file
View file

Binary file not shown.

BIN
audio/87045__RunnerPack__weapGone.wav Normal file
View file

Binary file not shown.

98
css/style.css
View file

@ -1,4 +1,4 @@
/* BASICS */ /* GOOGLE FONT */
.orbitron { .orbitron {
font-family: 'Orbitron', serif; font-family: 'Orbitron', serif;
font-style: normal; font-style: normal;
@ -10,7 +10,8 @@
word-spacing: 0em; word-spacing: 0em;
line-height: 1.2; line-height: 1.2;
} }
/* Global Container */
.container { .container {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -110,14 +111,8 @@
height: 68px; height: 68px;
} }
/* Ennemies */
/*#game .ennemy { border: 1px solid blue; } */
/* The HUD */ /* The HUD */
#hud { #hud { z-index: 90; display: none; }
z-index: 90;
}
#hud #score { #hud #score {
font-size:36px; font-size:36px;
@ -138,7 +133,7 @@
font-weight: bold; font-weight: bold;
text-shadow: 0 0 5px rgba(115, 171, 255, 0.4) ; text-shadow: 0 0 5px rgba(115, 171, 255, 0.4) ;
position: absolute; position: absolute;
display: block; display: none;
top:100px; top:100px;
right: 30px; right: 30px;
} }
@ -155,13 +150,53 @@
right: 30px; right: 30px;
} }
/* Debug Panel */ /* GameIntro Panel */
#game-intro {
position: absolute;
display: block;
left: 0px;
top: 50%;
margin-top: -150px;
color:#fff;
z-index: 1000;
width:100%;
text-align: center;
}
#game-intro .text {
position: relative;
display: block;
font-size: 64px;
}
#game-intro #start-game {
position: relative;
display: block;
margin: 20px auto;
width: 300px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
border: 5px solid rgba(0,0,0, 0.3);
padding: 15px 0 10px;
font-size: 24px;
background: rgba(0,0,0, 0.1);
}
#game-intro #start-game.hover {
cursor: pointer;
background: rgba(0,0,0, 0.2);
box-shadow: 0 0 20px rgba(27, 161, 255, 0.5) ;
-moz-box-shadow: 0 0 20px rgba(27, 161, 255, 0.5) ;
}
/* GameOver Panel */
#game-over { #game-over {
position: absolute; position: absolute;
display: none; display: none;
left: 0px; left: 0px;
top: 50%; top: 50%;
margin-top: -100px; margin-top: -150px;
color:#fff; color:#fff;
z-index: 1000; z-index: 1000;
width:100%; width:100%;
@ -191,9 +226,34 @@
#game-over #restart-game.hover { #game-over #restart-game.hover {
cursor: pointer; cursor: pointer;
background: rgba(0,0,0, 0.2); background: rgba(0,0,0, 0.2);
box-shadow: 0 0 10px rgba(27, 161, 255, 0.5) ; box-shadow: 0 0 20px rgba(27, 161, 255, 0.5) ;
-moz-box-shadow: 0 0 20px rgba(27, 161, 255, 0.5) ;
} }
#game-over #share-buttons {
position: relative;
display: block;
text-align: center;
padding: 10px 0;
}
#game-over #share-buttons div {
display: inline-block;
margin: 0 10px;
position: relative;
}
#game-over #share-buttons a {
position: relative;
display: block;
opacity: 0.1;
outline: none;
}
#game-over #share-buttons a img { border:none; outline: none; }
#game-over #share-buttons a:hover { opacity: 0.9; cursor: pointer; }
/* Credits */ /* Credits */
#credits { #credits {
position: absolute; position: absolute;
@ -207,11 +267,7 @@
font-family: "Lucida Grande", Verdana; font-family: "Lucida Grande", Verdana;
} }
#credits a { #credits a { text-decoration: none; color: #1ba1ff; }
text-decoration: none; #credits a:hover { text-decoration: underline; }
color: #1ba1ff; #credits a.author { color: #baff58; }
} #credits a.quote { color: #fa8100; }
#credits a:hover {
text-decoration: underline;
}

BIN
images/facebook_button.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.3 KiB

BIN
images/twitter_button.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3 KiB

76
index.html
View file

@ -3,31 +3,49 @@
xmlns:og="http://opengraphprotocol.org/schema/" xmlns:og="http://opengraphprotocol.org/schema/"
xmlns:fb="http://www.facebook.com/2008/fbml"> xmlns:fb="http://www.facebook.com/2008/fbml">
<head> <head>
<!-- Google Chrome Frame Compatibility -->
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- SEO Friendly -->
<title>Wyrian - A clone Game of Tyrian in HTML5</title>
<meta name="description" content="Wyrian : An awesome clone Game of Tyrian. Developed during the HTML5 Game Jam 2011 at Paris by Guillaume DE LA RUE." />
<!-- Facebook Meta Tags -->
<meta property="og:type" content="game" />
<meta property="og:title" content="Wyrian - An awesome clone Game of Tyrian in HTML5" />
<meta property="og:site_name" content="Wyrian" />
<meta property="og:url" content="http://www.html5place.com/lab/wyrian/" />
<meta property="og:description" content="Wyrian : An awesome clone Game of Tyrian. Developed during the HTML5 Game Jam 2011 at Paris."/>
<meta http-equiv="X-UA-Compatible" content="chrome=1" /> <!-- Stylesheets -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- Facebook Meta Tags -->
<title>Wyrian - A clone Game of Tyrian in HTML5</title>
<meta property="og:type" content="game" />
<meta property="og:title" content="Wyrian - A clone Game of Tyrian in HTML5" />
<meta property="og:site_name" content="Wyrian" />
<meta property='og:url' content='http://www.html5place.com/lab/wyrian/' />
<meta property="fb:admins" content="100001668966106,582526084,100001643794747"/>
<meta property="og:description" content="An alpha version clone of the Tyrian Game. Developed during the HTML5 Game Jam 2011 at Paris."/>
<link rel="stylesheet" media="all" href="css/style.css" /> <link rel="stylesheet" media="all" href="css/style.css" />
<link href="http://fonts.googleapis.com/css?family=Orbitron:400,500,700,900" rel="stylesheet" type="text/css" > <link href="http://fonts.googleapis.com/css?family=Orbitron:400,500,700,900" rel="stylesheet" type="text/css" >
</head> </head>
<body> <body>
<!-- Game Intro -->
<div id="game-intro">
<div class="text orbitron">Wyrian</div>
<div id="start-game" class="orbitron">Play</div>
</div>
<!-- Game Over -->
<div id="game-over"> <div id="game-over">
<div class="text orbitron">GAME OVER</div> <div class="text orbitron">GAME OVER</div>
<div id="restart-game" class="orbitron">Restart</div> <div id="restart-game" class="orbitron">Restart</div>
<div id="share-buttons">
<div class="twitter">
<a href="http://twitter.com/?status=RT%20%40html5place%20%3A%20Wyrian%20-%20An%20awesome%20clone%20Game%20of%20Tyrian%20in%20%23html5%20http%3A%2F%2Fbit.ly%2FgpObfX%20%23pgj2011%20%23game" target="_blank" title="Share on Twitter"><img src="images/twitter_button.png" width="122" height="42"></a>
</div>
<div class="facebook">
<a href="http://www.facebook.com/sharer.php?u=http://www.html5place.com/lab/wyrian/" target="_blank" title="Share on Facebook"><img src="images/facebook_button.png" width="122" height="42"></a>
</div>
</div>
</div> </div>
<div id="credits" class="">
<strong>HTML5 Game Jam 2011</strong><br> <!-- Scene -->
<strong><a href="https://github.com/glenux/wyrian" target="_blank" title="View Project on GitHub">Wyrian</a> v0.2a</strong> | <a href="http://www.html5place.com/" title="View my Website">Guillaume DE LA RUE</a><br>Thanks to <a href="https://github.com/glenux" target="_blank" title="View profile of Glenux on GitHub">Glenux</a> for design and Matthieu Bosquet and all people presents :)
</div>
<div class="container" id="GameContainer"> <div class="container" id="GameContainer">
<div id="background" class="layout"></div> <div id="background" class="layout"></div>
<div id="ground" class="layout"></div> <div id="ground" class="layout"></div>
@ -50,10 +68,30 @@
</div> </div>
</div> </div>
<!-- The footer... -->
<footer id="credits" class="">
<strong>HTML5 Game Jam 2011</strong><br>
<strong><a href="https://github.com/glenux/wyrian" target="_blank" title="View Project on GitHub" class="game">..:: Wyrian v<span id="version">0.2a</span> ::..</a></strong> | <a href="http://www.html5place.com/" title="View my Website" class="author">Guillaume DE LA RUE</a><br>Thanks to <a href="https://github.com/glenux" target="_blank" title="View profile of Glenux on GitHub" class="quote">Glenux</a> for design and Matthieu Bosquet<br>And everyone present at the HTML5 Game Jam :)
</footer>
<script type="text/javascript" src="js/jquery-1.5.js"></script> <!-- Main JS Libs -->
<script type="text/javascript" src="js/require.js"></script> <script type="text/javascript" src="js/libs/jquery-1.5.js"></script>
<script type="text/javascript" src="js/libs/require.js"></script>
<script type="text/javascript" src="js/GameClass.js"></script> <script type="text/javascript" src="js/GameClass.js"></script>
<script type="text/javascript" src="js/Wyrian.js"></script> <script type="text/javascript" src="js/main.js"></script>
<!-- ANalytics Tracking -->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-12891268-4']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body> </body>
</html> </html>

BIN
js/.DS_Store vendored Normal file
View file

Binary file not shown.

14
js/GameClass.js
View file

@ -68,7 +68,7 @@ app.prototype.log = function(txt) {
app.prototype.loopAnimation = function() { app.prototype.loopAnimation = function() {
// -- Search for elements that have to be updated // -- Search for elements that have to be updated
Wyrian.activeElements = 0 ; Game.activeElements = 0 ;
for ( var i in Layouts ) { for ( var i in Layouts ) {
var _layout = Layouts[i] ; var _layout = Layouts[i] ;
if ( _layout && _layout.running ) { if ( _layout && _layout.running ) {
@ -77,7 +77,7 @@ app.prototype.loopAnimation = function() {
} }
// -- Get level // -- Get level
Level = Math.floor((Wyrian.score||0)/1000) ; Level = Math.floor((Game.score||0)/1000) ;
// -- Create ennemies if needed // -- Create ennemies if needed
var numEnnemies = 0 ; var numEnnemies = 0 ;
@ -90,10 +90,10 @@ app.prototype.loopAnimation = function() {
} }
// -- Init loops counter // -- Init loops counter
Wyrian.loops = Wyrian.loops||0 ; Game.loops = Game.loops||0 ;
// -- Init vars // -- Init vars
if ( Wyrian.loops == 0 ) { if ( Game.loops == 0 ) {
this.frameCount = 0; this.frameCount = 0;
this.fps = 0; this.fps = 0;
this.maxfps = 1 / (FPS / 1000); this.maxfps = 1 / (FPS / 1000);
@ -111,11 +111,11 @@ app.prototype.loopAnimation = function() {
this.frameCount++; this.frameCount++;
// -- Increase loop counter // -- Increase loop counter
Wyrian.loops++ ; Game.loops++ ;
// -- Refresh Scores and HUD informations // -- Refresh Scores and HUD informations
$('#score span').html(Wyrian.score) ; $('#score span').html(Game.score) ;
$('#activeElements span').html(Wyrian.activeElements) ; $('#activeElements span').html(Game.activeElements) ;
$('#fpsCounter span').html(this.fps) ; $('#fpsCounter span').html(this.fps) ;
} }

112
js/Wyrian.js
View file

@ -1,112 +0,0 @@
/**************************************************************************
* Init Game Bootstrap
***************************************************************************/
Wyrian = new app({
'libs': [
'order!jquery.transform-0.9.3.min',
'order!LayoutClass'
],
'layers': [
'order!layouts/BgLayer',
'order!layouts/PlayerLayer',
'order!layouts/Ennemies'
],
'wrapper': $('#GameContainer')
}) ;
// Init Application and bind all games events
jQuery(document).ready(function() {
/**************************************************************************
* Load Dependencies & Create Application
***************************************************************************/
require({
baseUrl: "js/",
urlArgs: "bust=" + Wyrian.version
}, Wyrian.settings.libs,
// -- All objects are loaded => can run
function() {
// -- Init Stage or show IE popup
if ( ! $.browser.msie ) {
Wyrian.init() ;
} else {
$.facebox.settings.opacity = 0.8 ;
$.facebox.settings.closeImage = '/common/img/facebox/apple-close.png' ;
$(document).unbind('close.facebox') ;
$.facebox({ajax: '/popup-ie/'}, 'popup-ie' ) ;
}
}
);
/**************************************************************************
* Game Controls Events
***************************************************************************/
// -- Game is loaded
$(document).bind('gameLoaded', function(e, res) {
if ( timers.loopGame ) clearInterval(timers.loopGame) ;
timers.loopGame = setInterval(Wyrian.loopAnimation, 1000/FPS) ;
});
// -- Init Game
$(document).bind('gameInit', function(e, res) {
$(document).trigger('gameReset') ;
}) ;
// -- Game Reset
$(document).bind('gameReset', function(e, res) {
Wyrian.score = 0 ;
Wyrian.loops = 0 ;
Layouts.Ennemies.els = [] ;
$('.sprite').remove() ;
$.each(Layouts, function(key, val){
Layouts[key].running = true ;
$.each(val.els, function(key2, val2){
if ( Layouts[key].els.length && Layouts[key].els[key2] ) {
Layouts[key].els[key2].x = Layouts[key].els[key2].settings.origin.x ;
Layouts[key].els[key2].y = Layouts[key].els[key2].settings.origin.y ;
}
}) ;
}) ;
if ( timers.loopGame ) clearInterval(timers.loopGame) ;
timers.loopGame = setInterval(Wyrian.loopAnimation, 1000/FPS) ;
}) ;
// -- Start Animation
$(document).bind('gameStart', function(e, res) {
}) ;
// -- On Complete Launch
$(document).bind('gameComplete', function(e, res) {
// -- Stop layouts running
$('.sprite').not('.explosion').remove() ;
Layouts.Ennemies.running = false ;
Layouts.Background.running = false ;
// -- Show game over overlay
$('#game-over:hidden').fadeIn(500) ;
// -- Stop loopAnimation
if ( timers.loopGame ) clearInterval(timers.loopGame) ;
}) ;
// -- Bind Restart Screen controls
$('#game-over #restart-game').click(function() {
$('#game-over:visible').fadeOut(500, function() {
$(document).trigger('gameReset') ;
}) ;
}).hover(function() {
$(this).addClass('hover') ;
}, function() {
$(this).removeClass('hover') ;
}) ;
}) ;

13
js/layouts/Ennemies.js
View file

@ -4,13 +4,14 @@ Layouts.Ennemies = new Layout({
// -- Define elements to draw with options // -- Define elements to draw with options
el: [], el: [],
images: ['images/sprites/alien_1.png?_=1', 'images/sprites/alien_2.png?_=1', 'images/sprites/explosion-sprite.png' ],
// -- Define current Speed // -- Define current Speed
speed: 7, speed: 7,
direction: 1, direction: 1,
// -- Define canvas parent // -- Define canvas parent
dom: $('div#game') dom: $('div#ground')
}) ; }) ;
@ -32,13 +33,13 @@ Layouts.Ennemies.createRandom = function(opts) {
{ {
width: 80, width: 80,
height: 80, height: 80,
imageSrc: 'images/sprites/alien_1.png?_=1', imageSrc: self.settings.images[0],
sprites: [0,1,2,3] sprites: [0,1,2,3]
}, },
{ {
width: 80, width: 80,
height: 80, height: 80,
imageSrc: 'images/sprites/alien_2.png?_=1', imageSrc: self.settings.images[1],
sprites: [0] sprites: [0]
} }
] ; ] ;
@ -60,8 +61,8 @@ Layouts.Ennemies.createRandom = function(opts) {
obj.box.hide(0); obj.box.hide(0);
obj = self.reinitObj(obj); obj = self.reinitObj(obj);
Wyrian.score = Wyrian.score || 0 ; Game.score = Game.score || 0 ;
Wyrian.score += obj.settings.power ; Game.score += obj.settings.power ;
} ; } ;
alien.animate = function (obj) { alien.animate = function (obj) {
if ( obj.explosing ) { if ( obj.explosing ) {
@ -87,7 +88,7 @@ Layouts.Ennemies.createExplosion = function(object) {
type: 'neutral', type: 'neutral',
width:330, width:330,
height:330, height:330,
imageSrc: 'images/sprites/explosion-sprite.png', imageSrc: self.settings.images[2],
sprites: [0,1,2], sprites: [0,1,2],
origin: {x: object.x-330/2+object.width/2, y: object.y-330/2+object.height/2}, origin: {x: object.x-330/2+object.width/2, y: object.y-330/2+object.height/2},
animate: function(obj) { animate: function(obj) {

82
js/LayoutClass.js → js/layouts/LayoutClass.js
View file

@ -34,34 +34,6 @@ var Layout = function(opts) {
return this; return this;
}; };
// -- Return or set settings
Layout.prototype.option = function(optName, optValue) {
// No params => return all settings
if ( typeof optName == 'undefined' ) return this.settings;
// If optName and optValue set => modify it
else if ( typeof optValue != 'undefined' ) this.settings[optName] = this.settings ;
// In other cases, simply return the setting value
else return this.settings[optName] ;
};
// -- Return an object by name
Layout.prototype.getObj = function(name) {
this.cache = this.cache || {} ;
if ( this.cache[name] ) return this.cache[name] ;
for ( var i in this.els ) {
if ( this.els[i].settings.name == name ) {
this.cache[name] = this.els[i] ;
return this.cache[name] ;
}
}
}
// -- Update elements into layout // -- Update elements into layout
Layout.prototype.update = function() { Layout.prototype.update = function() {
for ( var j in this.els ) { for ( var j in this.els ) {
@ -100,7 +72,7 @@ Layout.prototype.createObj = function(opts) {
// -- Store options // -- Store options
this.parent = self ; this.parent = self ;
this.name = settingsObj.name || 'default' ; this.name = settingsObj.name || 'default' ;
this.id = settingsObj.id || 'element_'+Wyrian.uniqId++ ; this.id = settingsObj.id || 'element_'+Game.uniqId++ ;
this.width = settingsObj.width ? settingsObj.width : self.width ; this.width = settingsObj.width ? settingsObj.width : self.width ;
this.height = settingsObj.height ? settingsObj.height : self.height ; this.height = settingsObj.height ? settingsObj.height : self.height ;
this.settings = settingsObj ; this.settings = settingsObj ;
@ -118,36 +90,42 @@ Layout.prototype.createObj = function(opts) {
// -- Create a DOM object // -- Create a DOM object
this.box = $('#'+this.id) ; this.box = $('#'+this.id) ;
this.dynamic = false ;
this.cssObj = {} ;
if ( ! this.box.length ) { if ( ! this.box.length ) {
this.box = $('<div>', { this.box = $('<div>', {
class:'sprite '+this.name, class:'sprite '+this.name,
id: this.id, id: this.id
css:{ }) ;
position: 'absolute',
display: 'block', this.cssObj = {
top: 0, position: 'absolute',
left: 0, top: 0,
backgroundColor: settingsObj.backgroundColor, left: 0,
backgroundRepeat: settingsObj.backgroundRepeat, display: 'block',
backgroundPosition: settingsObj.backgroundPosition, backgroundColor: settingsObj.backgroundColor,
backgroundImage: settingsObj.imageSrc ? 'url('+settingsObj.imageSrc+')' : '' backgroundRepeat: settingsObj.backgroundRepeat,
} backgroundPosition: settingsObj.backgroundPosition,
}).appendTo(self.dom) ; backgroundImage: settingsObj.imageSrc ? 'url('+settingsObj.imageSrc+')' : ''
} else { } ;
this.box.show(0) ;
this.dynamic = true ;
} }
// -- Apply CSS // -- Apply CSS
this.box.css({ this.cssObj.width = this.width ;
width: this.width, this.cssObj.height = this.height ;
height: this.height
}) ;
// -- Move // -- Move
if ( ! this.settings.nomove ) { if ( ! this.settings.nomove ) {
this.box.transform({'translate': this.x+'px, '+this.y+'px'}) ; this.cssObj.translate = this.x+'px, '+this.y+'px' ;
} }
// -- Apply CSS Append and display
this.box.css(this.cssObj) ;
if ( this.dynamic ) this.box.appendTo(self.dom) ;
} ; } ;
// -- Init // -- Init
@ -163,14 +141,14 @@ Layout.prototype.createObj = function(opts) {
// -- Draw object into scene // -- Draw object into scene
Obj.prototype.draw = function() { Obj.prototype.draw = function() {
if ( (this.y >= -2*this.height) && (this.y <= (Wyrian.height+this.height)) && this.x >= -this.width && this.x <= (Wyrian.width+this.width) ) { if ( (this.y >= -2*this.height) && (this.y <= (Game.height+this.height)) && this.x >= -this.width && this.x <= (Game.width+this.width) ) {
Wyrian.activeElements++ ; Game.activeElements++ ;
// -- Set sprite to display // -- Set sprite to display
if ( this.settings.sprites ) { if ( this.settings.sprites ) {
this.lastSprite = this.lastSprite || 0 ; this.lastSprite = this.lastSprite || 0 ;
if ( (Wyrian.loops%(this.settings.spriteMod||1)) == 0 ) this.lastSprite++ ; if ( (Game.loops%(this.settings.spriteMod||1)) == 0 ) this.lastSprite++ ;
if ( typeof this.settings.sprites[this.lastSprite] == 'undefined' ) this.lastSprite = 0 ; if ( typeof this.settings.sprites[this.lastSprite] == 'undefined' ) this.lastSprite = 0 ;
this.box.css({'backgroundPosition': -1*this.settings.sprites[this.lastSprite]*this.settings.width+'px 0'}) ; this.box.css({'backgroundPosition': -1*this.settings.sprites[this.lastSprite]*this.settings.width+'px 0'}) ;
} }
@ -270,7 +248,7 @@ Layout.prototype.createObj = function(opts) {
this.settings.explode(this) ; this.settings.explode(this) ;
} }
Wyrian.log('█▬█ █ ▀█▀') ; Game.log('█▬█ █ ▀█▀') ;
} }
} }

18
js/layouts/PlayerLayer.js
View file

@ -11,8 +11,8 @@ Layouts.Player = new Layout({
type: 'human', type: 'human',
sprites: [0,1], sprites: [0,1],
origin: { origin: {
x: Wyrian.width/2 - 80, x: Game.width/2 - 80,
y: Wyrian.height-220 y: Game.height-220
}, },
fireInterval: 300, fireInterval: 300,
explode: function(obj) { explode: function(obj) {
@ -24,23 +24,23 @@ Layouts.Player = new Layout({
animate: function(obj) { animate: function(obj) {
// -- KEY up /down // -- KEY up /down
if ( Wyrian.input.keyboard.up ) { if ( Game.input.keyboard.up ) {
if ( obj.y > 0 ) obj.y -= obj.parent.settings.speed ; if ( obj.y > 0 ) obj.y -= obj.parent.settings.speed ;
} }
if ( Wyrian.input.keyboard.down && (obj.y < (Wyrian.height-obj.height) ) ) { if ( Game.input.keyboard.down && (obj.y < (Game.height-obj.height) ) ) {
obj.y += obj.parent.settings.speed; obj.y += obj.parent.settings.speed;
} }
// -- Left/Right move : choose sprite sequence to display // -- Left/Right move : choose sprite sequence to display
if ( Wyrian.input.keyboard.left && (obj.x > 0)) { if ( Game.input.keyboard.left && (obj.x > 0)) {
obj.x -= obj.parent.settings.speed; obj.x -= obj.parent.settings.speed;
} }
if ( Wyrian.input.keyboard.right && (obj.x < Wyrian.width-obj.width) ) { if ( Game.input.keyboard.right && (obj.x < Game.width-obj.width) ) {
obj.x += obj.parent.settings.speed; obj.x += obj.parent.settings.speed;
} }
// -- Press Space : fire // -- Press Space : fire
if ( Wyrian.input.keyboard.space ) { if ( Game.input.keyboard.space ) {
obj.parent.fire(obj) ; obj.parent.fire(obj) ;
} }
@ -56,7 +56,7 @@ Layouts.Player = new Layout({
animate: function(obj) { animate: function(obj) {
obj.settings.spriteMod = 3 ; obj.settings.spriteMod = 3 ;
obj.settings.sprites = [0,1] ; obj.settings.sprites = [0,1] ;
if ( Wyrian.input.keyboard.up ) { if ( Game.input.keyboard.up ) {
obj.settings.sprites = [2,3,4] ; obj.settings.sprites = [2,3,4] ;
} }
} }
@ -124,7 +124,7 @@ Layouts.Player.bulletLib = function(obj, bulletType) {
if ( obj.deleteAfter ) return false; if ( obj.deleteAfter ) return false;
if ( obj.explosing ) { if ( obj.explosing ) {
Wyrian.log(obj) ; Game.log(obj) ;
return false ; return false ;
} }
obj.y += obj.settings.speed*obj.settings.direction ; obj.y += obj.settings.speed*obj.settings.direction ;

0
js/jquery-1.5.js → js/libs/jquery-1.5.js vendored
View file

0
js/jquery.transform-0.9.3.min.js → js/libs/jquery.transform-0.9.3.min.js vendored
View file

0
js/require.js → js/libs/require.js
View file

98
js/libs/soundmanager/README.rdoc Normal file
View file

@ -0,0 +1,98 @@
== SoundManager 2: JavaScript Sound for the Web
By wrapping and extending HTML5 and Flash Audio APIs, SoundManager 2 brings reliable cross-platform audio to JavaScript.
== HTML5 Audio() Support (Beta-ish)
* 100% Flash-free MP3 + MP4/AAC where supported, compatible with Apple iPad 3.2, iPhone/iOS 4
* Fallback to Flash for MP3/MP4 support, as needed
* SM2 API is unchanged, transparent; HTML5/flash switching handled internally
* HTML5 API support approximates Flash 8 API features, minus ID3, plus buffering
* Some other formats (WAV/OGG) supported via HTML5, depending on browser
* See soundManager.useHTML5Audio for implementation details.
== Basic API Features (Flash 8)
* Load, stop, play, pause, mute, seek, pan and volume control of sounds from Javascript
* Events: onload, whileloading, whileplaying, onfinish and more
* ID3V1 and ID3V2 tag support for MP3s (title, artist, genre etc.)
== Shiny Flash 9 Features
* RTMP / Flash Media Server streaming support (new, experimental)
* MPEG-4 (AAC, HE-AAC, H.264) audio support
* "MultiShot" play (layered/chorusing effects)
* Waveform/frequency spectrum data
* Peak (L/R channel volume) data
* Audio buffering state/event handling
== General Tech Stuff
* Full API Documentation with examples and notes
* console.log()-style debug output and troubleshooting tools
* Community-based discussion/support
== As heard on The Internets
A few nifty sites that have implemented SM2 for driving audio:
* Muxtape
* SoundCloud / The Cloud Player
* 8tracks
* Last.fm
* Opera (media player component)
* Discogs
* Mixcrate
== Project home, documentation, live demos etc.:
http://www.schillmania.com/projects/soundmanager2/
== Merged fork ( kjvarga: http://github.com/kjvarga/SoundManager2/ )
This SM2 fork contains the SoundManager2 implementation that is used on http://www.kazaa.com.
We added RTMP support to SM2 which is now part of the SM2 (experimental) branch as of V2.96a.20100606.
Downloads: http://www.schillmania.com/projects/soundmanager2/doc/download/
For more background on the addition of RTMP check out http://getsatisfaction.com/schillmania/topics/soundmanager_doesnt_support_rtmp
Our old branch of development has been moved to http://github.com/kjvarga/SoundManager2/tree/pre_merge.
== Changes
In addition to the documented SM2 options, we have added the following.
New options to SM2:
* <tt>ondebuglog</tt> callback called with every debugging message. Useful if you need to programatically have access to the debug logs. We use this in our automated reporting of stream failures for QA.
New options to createSound:
* <tt>bufferTimes</tt> optional array of buffer times for double/multiple-buffering. Just specify an array of incrementing buffer sizes (in seconds) e.g. [0.5, 2, 8] for a half-second, then 2 second, then 8 second buffer. Buffers increment when full and reset to the smallest buffer when empty, or when starting to play an unbuffered portion of the stream.
* <tt>onstats</tt> callback called with statistics including how long it took to connect to the server, and how long it took to play (useful for QA).
Our FMS server has some peculiarities that we have to deal with:
* bytesLoaded is always 0 for a streaming sound
* NetStream.Play.Stop is sent when it shouldn't
* We cannot get the stream length using a typical <tt>getStreamLength</tt> call
* We cannot get bandwidth information
== Debugging
1. Set <tt>soundManager.debugFlash = true;</tt>
2. Use a debug version of the SWF e.g. soundmanager2_flash9_debug.swf
3. Open the Flash IDE. Open the SM2 source code files. Start a remote debugging session.
4. Refresh the application in the browser (make sure caching is off).
5. The SWF should connect to Flash and allow you to step through the source.
If it doesn't:
1. Make sure that the Flash version you have installed supports debugging
2. Make sure that the Flash debugger application is using the same version of Flash.
== SM2
Project home, documentation, live demos etc.:
http://www.schillmania.com/projects/soundmanager2/

BIN
js/libs/soundmanager/demo/360-player/360 button.psd Normal file
View file

Binary file not shown.

BIN
js/libs/soundmanager/demo/360-player/360-button-pause-light.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 333 B

BIN
js/libs/soundmanager/demo/360-player/360-button-pause-light.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 445 B

BIN
js/libs/soundmanager/demo/360-player/360-button-pause.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 333 B

BIN
js/libs/soundmanager/demo/360-player/360-button-pause.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 440 B

BIN
js/libs/soundmanager/demo/360-player/360-button-play-light.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 442 B

BIN
js/libs/soundmanager/demo/360-player/360-button-play-light.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 501 B

BIN
js/libs/soundmanager/demo/360-player/360-button-play.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 442 B

BIN
js/libs/soundmanager/demo/360-player/360-button-play.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 487 B

100
js/libs/soundmanager/demo/360-player/360player-visualization.css Normal file
View file

@ -0,0 +1,100 @@
/* larger canvas, spectrum + EQ visualization and other items */
.ui360,
.sm2-360ui {
/* size of the container for the circle, etc. */
width:256px;
height:256px;
}
.ui360 {
position:relative;
/* a little extra spacing */
padding-top:1px;
padding-bottom:1px;
margin-bottom:-18px; /* approximate "line height" we want */
padding-left:248px;
margin-left:0px;
background-position:22.6% 50%; /* (~109px) initial play button position */
}
.ui360 a {
font:14px "helvetica neue",helvetica,monaco,lucida,terminal,monospace;
white-space:nowrap;
line-height:256px;
}
.sm2-360ui {
margin-left:-256px;
}
.ui360 .sm2-timing {
line-height:256px;
}
.ui360 .sm2-timing {
font:bold 24px "helvetica neue",helvetica,monaco,lucida,terminal,monospace;
color:#333;
text-align:center;
line-height:256px;
text-indent:0px;
}
.sm2-inline-list .ui360,
.sm2-inline-list .sm2-360ui {
margin-left:0px;
}
.sm2-inline-list .ui360 {
margin:8px 13px 7px 0px;
padding-left:0px;
background-position:50% 50%; /* initial play button position */
}
.sm2-inline-list .sm2-360ui {
border:1px solid #eee;
/* offset the border */
margin-left:-1px;
margin-top:-1px;
}
.sm2-inline-list .ui360 a {
position:absolute;
display:inline;
left:0px;
bottom:0px;
width:100%; /* 2px padding in box */
height:100%;
*height:256px; /* IE is dumb. */
overflow:hidden;
font-size:small;
font-weight:300;
color:#333;
margin:0px;
padding:0px;
line-height:488px; /* bottom vertical alignment for text */
*line-height:480px; /* IE again */
text-align:center;
-moz-border-radius:0px;
-khtml-border-radius:0px;
border-radius:0px;
}
.sm2-inline-list .ui360:hover {
background-color:#fbfbfb;
}
.sm2-inline-list .ui360 a.sm2_link:hover,
.sm2-inline-list .ui360 a:focus,
.sm2-inline-list .ui360 a:active {
background-color:transparent;
}
/* Use a bigger loading image for this layout */
.ui360:hover .sm2-360btn-default {
background:transparent url(360-button-play-light.png) no-repeat 50% 50%;
_background:transparent url(360-button-play.gif) no-repeat 50% 50%;
cursor:pointer;
}

251
js/libs/soundmanager/demo/360-player/360player.css Normal file
View file

@ -0,0 +1,251 @@
/* General warning: Beta-ish. Code could be a bit cleaner. */
.ui360,
.sm2-360ui {
/* size of the container for the circle, etc. */
width:50px;
height:50px;
}
.ui360 {
position:relative;
/* a little extra spacing */
padding-top:1px;
padding-bottom:1px;
margin-bottom:-18px; /* approximate "line height" we want */
padding-left:42px; /* 50px, with a few off - margin used for visualization UI */
width:auto;
}
.ui360,
.ui360 * {
position:relative;
vertical-align:middle;
}
.ui360 a {
line-height:50px;
}
.sm2-360ui {
position:relative;
display:inline-block; /* firefox 3 et al */
float:left; /* firefox 2 needs this, inline-block would work with fx3 and others */
*float:left; /* IE 6+7 */
*display:inline;
*clear:left;
margin-left:-50px;
}
.sm2-360ui.sm2_playing,
.sm2-360ui.sm2_paused {
/* bump on top when active */
z-index:10;
}
.ui360 a.sm2_link { /* this class added to playable links by SM2 */
position:relative;
}
.ui360 a {
color:#000;
text-decoration:none;
}
.ui360 a,
.ui360 a:hover,
.ui360 a:focus {
padding:2px;
margin-left:-2px;
margin-top:-2px;
}
.ui360 a:hover,
.ui360 a:focus {
background:#eee;
-moz-border-radius:3px;
-webkit-border-radius:3px;
-khtml-border-radius:3px;
border-radius:3px;
outline:none;
}
.ui360 .sm2-canvas {
position:absolute;
left:0px;
top:0px;
}
.ui360 .sm2-timing {
position:absolute;
display:block;
left:0px;
top:0px;
width:100%;
height:100%;
margin:0px;
font:11px "helvetica neue",helvetica,monaco,lucida,terminal,monospace;
color:#666;
text-align:center;
line-height:50px;
}
.ui360 .sm2-timing.alignTweak {
text-indent:1px; /* devious center-alignment tweak for Safari (might break things for others.) */
}
.ui360 .sm2-cover {
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
z-index:2;
display:none;
}
.ui360 .sm2-360btn {
position:absolute;
top:50%;
left:50%;
width:22px;
height:22px;
margin-left:-11px;
margin-top:-11px;
cursor:pointer;
z-index:3;
}
.ui360 .sm2-360btn-default {
}
.ui360 .sm2-360data {
display:inline-block;
font-family:helvetica;
}
.ui360 .sm2-360ui.sm2_playing .sm2-cover,
.ui360 .sm2-360ui.sm2_paused .sm2-cover {
display:block;
}
/* this could be optimized a fair bit. */
.ui360,
.ui360 .sm2-360btn-default {
background:transparent url(360-button-play.png) no-repeat 50% 50%;
_background:transparent url(360-button-play.gif) no-repeat 50% 50%; /* IE 6-only: special crap GIF */
cursor:pointer;
}
.ui360 {
/*
"fake" button shown before SM2 has started, non-JS/non-SM2 case etc.
background image will be removed via JS, in threeSixyPlayer.init()
*/
background-position:6px 50%;
}
.ui360 .sm2-360ui.sm2_paused .sm2-360btn {
background:transparent url(360-button-play.png) no-repeat 50% 50%;
_background:transparent url(360-button-play.gif) no-repeat 50% 50%;
cursor:pointer;
}
.ui360 .sm2-360btn-default:hover,
.ui360 .sm2-360ui.sm2_paused .sm2-360btn:hover {
background:transparent url(360-button-play-light.png) no-repeat 50% 50%;
_background:transparent url(360-button-play.gif) no-repeat 50% 50%;
cursor:pointer;
}
.ui360 .sm2-360ui.sm2_playing .sm2-360btn:hover,
.ui360 .sm2-360btn-playing:hover {
background:transparent url(360-button-pause-light.png) no-repeat 50% 50%;
_background:transparent url(360-button-pause-light.gif) no-repeat 50% 50%;
cursor:pointer;
}
.ui360 .sm2-360ui.sm2_playing .sm2-timing {
visibility:visible;
}
.ui360 .sm2-360ui.sm2_buffering .sm2-timing {
visibility:hidden;
}
.ui360 .sm2-360ui .sm2-timing,
.ui360 .sm2-360ui .sm2-360btn:hover + .sm2-timing,
.ui360 .sm2-360ui.sm2_paused .sm2-timing {
visibility:hidden;
}
.ui360 .sm2-360ui.sm2_dragging .sm2-timing,
.ui360 .sm2-360ui.sm2_dragging .sm2-360btn:hover + .sm2-timing {
/* paused + dragging */
visibility:visible;
}
.ui360 .sm2-360ui.sm2_playing .sm2-360btn,
x.ui360 .sm2-360btn-playing,
.ui360 .sm2-360ui.sm2_dragging .sm2-360btn,
.ui360 .sm2-360ui.sm2_dragging .sm2-360btn:hover,
.ui360 .sm2-360ui.sm2_dragging .sm2-360btn-playing:hover {
/* don't let pause button show on hover when dragging (or paused and dragging) */
background:transparent;
cursor:auto;
}
.ui360 .sm2-360ui.sm2_buffering .sm2-360btn,
.ui360 .sm2-360ui.sm2_buffering .sm2-360btn:hover {
background:transparent url(icon_loading_spinner.gif) no-repeat 50% 50%;
opacity:0.5;
visibility:visible;
}
/* inline list style */
.sm2-inline-list .ui360,
.sm2-inline-block .ui360 {
position:relative;
display:inline-block;
float:left;
_display:inline;
margin-bottom:-15px;
}
.sm2-inline-list .ui360 {
margin-bottom:0px;
}
.sm2-inline-block .ui360 {
margin-right:8px;
}
.sm2-inline-list .ui360 a {
display:none;
}
/* annotations */
ul.ui360playlist {
list-style-type:none;
}
ul.ui360playlist,
ul.ui360playlist li {
margin:0px;
padding:0px;
}
div.ui360 div.metadata {
display:none;
}
div.ui360 a span.metadata,
div.ui360 a span.metadata * {
/* name of track, note etc. */
vertical-align:baseline;
}

125
js/libs/soundmanager/demo/360-player/canvas-visualization-basic.html Normal file
View file

@ -0,0 +1,125 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>360&deg; MP3 player UI demo (SoundManager 2): Javascript + Canvas Visualization, basic example</title>
<meta name="description" content="Basic example of 360-degree circular control for MP3 links, with EQ and spectrum visualization options" />
<!-- demo: make the fonts nicer etc. -->
<link rel="stylesheet" type="text/css" href="../index.css" />
<!-- soundManager.useFlashBlock: related CSS -->
<link rel="stylesheet" type="text/css" href="../flashblock/flashblock.css" />
<!-- required -->
<link rel="stylesheet" type="text/css" href="360player.css" />
<link rel="stylesheet" type="text/css" href="360player-visualization.css" />
<!-- special IE-only canvas fix -->
<!--[if IE]><script type="text/javascript" src="script/excanvas.js"></script><![endif]-->
<!-- Apache-licensed animation library -->
<script type="text/javascript" src="script/berniecode-animator.js"></script>
<!-- the core stuff -->
<script type="text/javascript" src="../../script/soundmanager2.js"></script>
<script type="text/javascript" src="script/360player.js"></script>
<script type="text/javascript">
soundManager.url = '../../swf/'; // path to directory containing SM2 SWF
soundManager.useFastPolling = true; // increased JS callback frequency, combined with useHighPerformance = true
threeSixtyPlayer.config.scaleFont = (navigator.userAgent.match(/msie/i)?false:true);
threeSixtyPlayer.config.showHMSTime = true;
// enable some spectrum stuffs
threeSixtyPlayer.config.useWaveformData = true;
threeSixtyPlayer.config.useEQData = true;
// enable this in SM2 as well, as needed
if (threeSixtyPlayer.config.useWaveformData) {
soundManager.flash9Options.useWaveformData = true;
}
if (threeSixtyPlayer.config.useEQData) {
soundManager.flash9Options.useEQData = true;
}
if (threeSixtyPlayer.config.usePeakData) {
soundManager.flash9Options.usePeakData = true;
}
// favicon is expensive CPU-wise, but can be enabled.
threeSixtyPlayer.config.useFavIcon = false;
</script>
<link rel="stylesheet" type="text/css" href="demo.css" />
<style type="text/css">
#left h2 {
padding-top:0px;
margin-bottom:0.25em;
color:#666;
}
pre.block {
margin-top:0.5em;
}
/* special case */
#left {
width:auto;
max-width:100%;
}
</style>
</head>
<body>
<div id="left">
<h1><a href="http://schillmania.com/projects/soundmanager2/demo/360-player/">360&deg; Player Demo</a> - Visualization Example, Basic Template</h1>
<p class="note" style="color:#666;margin-bottom:0.5em">Canvas-based UI with visualization options. <b>Note: No EQ/spectrum support for IE (too slow.) Data not available in HTML5.</b></p>
<div style="clear:left"></div>
<div id="sm2-container">
<!-- sm2 flash goes here -->
</div>
<!-- here are the MP3 links, which are decorated with the 360 canvas element/UI etc. -->
<h2 style="margin-top:1em">Inline list</h2>
<div class="sm2-inline-list"> <!-- remove this class to have one item per line -->
<div class="ui360"><a href="../../demo/mpc/audio/CRASH_1.mp3">Crash 1</a></div>
<div class="ui360"><a href="../../demo/mpc/audio/CRASH_5.mp3">Crash 5</a></div>
<div class="ui360"><a href="../../demo/mpc/audio/CRASH_6.mp3">Crash 6</a></div>
<div class="ui360"><a href="../../demo/mpc/audio/CHINA_1.mp3">China 1</a></div>
</div>
<h2 style="clear:both;padding-top:1em">Block list</h2>
<div>
<div class="ui360"><a href="../../demo/_mp3/sine,%20square,%20sawtooth,%20rando.mp3">Sine, Square, Sawtooth, Wave (Warning: LOUD)</a></div>
<div class="ui360"><a href="../../demo/_mp3/1hz-10khz-sweep.mp3">1-10 Khz Sweep (Warning: LOUD)</a></div>
</div>
</div>
<p style="margin-left:1em">
<a href="http://www.schillmania.com/projects/soundmanager2/" title="SoundManager 2 home">SoundManager 2 project page</a> (not an MP3 link)
</p>
</div>
</body>
</html>

334
js/libs/soundmanager/demo/360-player/canvas-visualization.html Normal file
View file

@ -0,0 +1,334 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>360&deg; MP3 player UI demo (SoundManager 2): Javascript + Canvas Visualization</title>
<meta name="description" content="Javascript + Canvas + SoundManager 2: 360-degree circular control / jog wheel example for playing MP3 links, with EQ and spectrum visualization options" />
<!-- demo, make the fonts nicer etc. -->
<link rel="stylesheet" type="text/css" href="../index.css" />
<!-- soundManager.useFlashBlock: related CSS -->
<link rel="stylesheet" type="text/css" href="../flashblock/flashblock.css" />
<!-- required -->
<link rel="stylesheet" type="text/css" href="360player.css" />
<link rel="stylesheet" type="text/css" href="360player-visualization.css" />
<!-- special IE-only canvas fix -->
<!--[if IE]><script type="text/javascript" src="script/excanvas.js"></script><![endif]-->
<!-- Apache-licensed animation library -->
<script type="text/javascript" src="script/berniecode-animator.js"></script>
<!-- the core stuff -->
<script type="text/javascript" src="../../script/soundmanager2.js"></script>
<script type="text/javascript" src="script/360player.js"></script>
<script type="text/javascript">
soundManager.url = '../../swf/'; // path to directory containing SM2 SWF
soundManager.useFastPolling = true; // increased JS callback frequency, combined with useHighPerformance = true
threeSixtyPlayer.config.scaleFont = (navigator.userAgent.match(/msie/i)?false:true);
threeSixtyPlayer.config.showHMSTime = true;
// enable some spectrum stuffs
threeSixtyPlayer.config.useWaveformData = true;
threeSixtyPlayer.config.useEQData = true;
// enable this in SM2 as well, as needed
if (threeSixtyPlayer.config.useWaveformData) {
soundManager.flash9Options.useWaveformData = true;
}
if (threeSixtyPlayer.config.useEQData) {
soundManager.flash9Options.useEQData = true;
}
if (threeSixtyPlayer.config.usePeakData) {
soundManager.flash9Options.usePeakData = true;
}
// favicon is expensive CPU-wise, but can be used.
if (window.location.href.match(/hifi/i)) {
threeSixtyPlayer.config.useFavIcon = true;
}
if (window.location.href.match(/html5/i)) {
// for testing IE 9, etc.
soundManager.useHTML5Audio = true;
}
</script>
<!-- DEMO only, customization UI: Yahoo! YUI colorpicker stuff -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/slider/assets/skins/sam/slider.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/colorpicker/assets/skins/sam/colorpicker.css" />
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/animation/animation-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/dragdrop/dragdrop-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/slider/slider-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/element/element-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/colorpicker/colorpicker-min.js"></script>
<link rel="stylesheet" type="text/css" href="demo.css" />
<style type="text/css">
#left h2 {
padding-top:0px;
margin-bottom:0.25em;
color:#666;
}
pre.block {
margin-top:0.5em;
}
/* special case */
#left {
width:auto;
max-width:100%;
}
</style>
<!-- demo configuration stuff, you don't need this -->
<link rel="stylesheet" type="text/css" href="demo-slider-controls.css" />
<script type="text/javascript" src="demo-slider-controls.js"></script>
</head>
<body>
<div id="left">
<h1><a href="http://www.schillmania.com/projects/soundmanager2/" title="Javascript MP3 player project home">SoundManager 2</a> / <a href="http://schillmania.com/projects/soundmanager2/demo/360-player/">360&deg; Player Demo</a>: JS + Canvas Visualization</h1>
<p class="note" style="color:#666;margin-bottom:0.5em">Canvas-based UI with visualization options. <b>Note: Spectrum/EQ visualizations disabled for IE (too slow.) Data is not currently available under HTML5.</b></p>
<p class="note" style="color:#666;margin-bottom:0.5em">You can also <a href="#debug=1" onclick="window.location.href = this.href;window.location.reload()" title="Enable debug mode, show frames per second">show FPS</a><span id="config-link"> or <a href="#customize" onclick="window.location.href=this.href;window.location.reload()">customize the UI</a></span><span id="hifi">, or see the <a href="#hifi=1" onclick="window.location.href=this.href;window.location.reload()">hi-fi version</a></span>. Check the <a href="canvas-visualization-basic.html">basic template</a> for a minimal code example; also see the <a href="../360-player/" title="360&deg; player UI">default 360&deg; UI</a>.</p>
<!-- customization crap -->
<div id="config-ui" style="clear:both;position:relative;max-width:1110px;margin-top:1em;display:none">
<div style="position:relative">
<form action="#" method="get">
<div id="controls">
<div class="checkbox">
<div>
<input id="use-waveform" type="checkbox" checked="checked" title="Enable waveform feature." onclick="controller.updateExample();controller.updateExampleCode()" value="Apply" /> Waveform
<input id="disabled-1" type="checkbox" title="Enable EQ (spectrum) feature." onclick="controller.updateExample();controller.updateExampleCode()" value="Apply" style="margin-left:1em" checked="checked" /> EQ
<input type="checkbox" name="use-amplifier" id="use-amplifier" checked="checked" onclick="controller.updateExample();controller.updateExampleCode()" style="margin-left:1em"> Amplifier
</div>
</div>
<div style="clear:left"></div>
<dl class="col">
<dt>Circle Diameter</dt>
<dd class="title">Size</dd>
<dd>1-256</dd>
<dd class="control">
<div class="bar" title="Click to move here"></div>
<div class="slider" title="Size of circle"></div>
</dd>
<dt>Waveform Thickness</dt>
<dd class="title">thickness</dd>
<dd>1-100</dd>
<dd class="control">
<div class="bar" title="Click to move here"></div>
<div class="slider" title="Thickness of line"></div>
</dd>
<dt>Wave Downsample</dt>
<dd class="title">(Scale)</dd>
<dd>1-16</dd>
<dd class="control">
<div class="bar" title="Click to move here"></div>
<div class="slider" title="Primary (inner circle) colour"></div>
</dd>
<dt>EQ Thickness</dt>
<dd class="title">thickness</dd>
<dd>1-50</dd>
<dd class="control">
<div class="bar" title="Click to move here"></div>
<div class="slider" title="Thickness of line"></div>
</dd>
<dt>EQ Downsample</dt>
<dd class="title">(Scale)</dd>
<dd>1-16</dd>
<dd class="control">
<div class="bar" title="Click to move here"></div>
<div class="slider" title="Primary (inner circle) colour"></div>
</dd>
</dl>
<div id="options" class="col">
<div>
Waveform position:
<input type="radio" name="waveform-inside" id="waveform-inside" value="true" checked="checked" onclick="controller.updateExample();controller.updateExampleCode()"> Inside | <input type="radio" name="waveform-inside" id="waveform-inside" value="false" onclick="controller.updateExample();controller.updateExampleCode()"> Outside
</div>
<div>
EQ position:
<input type="radio" name="eq-inside" id="eq-inside" value="true" onclick="controller.updateExample();controller.updateExampleCode()"> Inside | <input type="radio" name="eq-inside" id="eq-inside" value="false" checked="checked" onclick="controller.updateExample();controller.updateExampleCode()"> Outside
</div>
<div>
Waveform color:
<input type="text" name="waveform-color" id="waveform-color" value="#000000" onclick="createCP(this,setWaveformColor)" />
</div>
<div>
EQ color:
<input type="text" name="eq-color" id="eq-color" value="#000000" onclick="createCP(this,setEQColor)" />
</div>
<div>
Loaded ring color:
<input type="text" name="loaded-ring-color" id="loaded-ring-color" value="#000000" onclick="createCP(this,setLoadedRingColor)" />
</div>
<div>
Progress ring color:
<input type="text" name="progress-ring-color" id="progress-ring-color" value="#000000" onclick="createCP(this,setProgressRingColor)" />
</div>
<div>
Background ring color:
<input type="text" name="bg-ring-color" id="bg-ring-color" value="#000000" onclick="createCP(this,setBackgroundRingColor)" />
</div>
<p class="compact">
<input type="button" onclick="controller.randomize()" value="Randomize controls" title="Assign random control values" style="font-size:x-small" />
</p>
</form>
</div>
<div id="cp-container">
<!-- color picker stuff goes here -->
</div>
<div id="config-code-block" style="float:right;display:inline;margin-left:1em;margin-top:-0.7em">
<!--
<pre id="config-link" class="block"><code style="cursor:pointer" onclick="document.getElementById('config-link').style.display='none';document.getElementById('config-pre-block').style.display='block';return false"> [click to show code] </code></pre>
-->
<pre id="config-pre-block" class="block"><code id="config-code">Code goes here</code></pre>
</div>
</div>
</div>
<p style="clear:left">Get a sound playing, then adjust the values to see real-time updates.</p>
</div>
<!-- here are the MP3 links, which are decorated with the 360 canvas element/UI etc. -->
<div id="sm2-container">
<!-- sm2 flash goes here -->
</div>
<h2 style="margin-top:1em">Inline list</h2>
<div class="sm2-inline-list"> <!-- remove this class to have one item per line -->
<div class="ui360"><a href="http://freshly-ground.com/data/audio/sm2/Adrian%20Glynn%20-%20Blue%20Belle%20Lament.mp3">Adrian Glynn - Blue Belle Lament</a></div>
<div class="ui360"><a href="http://freshly-ground.com/data/audio/sm2/SonReal%20-%20I%20Tried.mp3">SonReal - I Tried</a></div>
<div class="ui360"><a href="http://freshly-ground.com/data/audio/sm2/SonReal%20-%20People%20Asking.mp3">SonReal - People Asking</a></div>
<div class="ui360"><a href="http://freshly-ground.com/data/audio/mpc/20060826%20-%20Armstrong.mp3">20060826 - Armstrong Groove</a></div>
</div>
<p class="note medium-note" style="clear:both"><b>Artist thank-yous</b>: "Blue Belle Lament" courtesy of <a href="http://www.adrianglynn.com/" title="Adrian Glynn, Vancouver-based Singer/Songwriter">Adrian Glynn</a>. "I Tried" and "People Asking" courtesy of <a href="http://sonreal.bandcamp.com/album/the-lightyear-mixtape" title="The Lightyear Mixtape from SonReal, Vancouver-based hip-hop artist">SonReal</a>.</p>
<h2 style="clear:left;padding-top:1em">Block list</h2>
<div>
<div class="ui360"><a href="http://freshly-ground.com/data/audio/mpc/20090207%20-%20Loverman.mp3">20090207 - Loverman</a></div>
<div class="ui360"><a href="../../demo/_mp3/1hz-10khz-sweep.mp3">1-10 Khz Sweep (Warning: <span style="color:#ff3333">LOUD</span>)</a></div>
<div class="ui360"><a href="../../demo/_mp3/sine,%20square,%20sawtooth,%20rando.mp3">Sine, Square, Sawtooth, Wave (Warning: <span style="color:#ff3333">LOUD</span>)</a></div>
</div>
<div style="clear:left"></div>
<h2 style="clear:left;padding-top:1em">Variant: Annotations/meta-data</h2>
<ul class="ui360playlist">
<li>
<div class="ui360">
<a href="http://freshly-ground.com/data/audio/binaural/A%20Virtual%20Haircut%20in%20San%20Francisco%20%283%20Scenes%29.mp3">A Virtual Haircut (3 scenes)</a>
<div class="metadata">
<div class="duration">4:43</div> <!-- total track time (for positioning while loading, until determined -->
<ul>
<li><p>Electric razor</p><span>0:00</span></li> <!-- first scene -->
<li><p>Water, scissors</p><span>2:41</span></li> <!-- start time of second scene -->
<li><p>More razor work</p><span>4:00</span></li>
</ul>
</div>
</div>
</li>
<li>
<div class="ui360">
<a href="http://freshly-ground.com/data/audio/binaural/Rubber%20Chicken%20Launch%20%28office%29.mp3">Rubber Chicken Launch (Office)</a>
<div class="metadata">
<div class="duration">0:47</div>
<ul>
<li><p>First attempt</p><span>0:00</span></li>
<li><p>Fire!</p><span>0:02</span></li>
<li><p>"Too much angle"</p><span>0:05</span></li>
<li><p>Random chicken noise</p><span>0:18</span></li>
<li><p>"Wait a second"</p><span>0:31</span></li>
<li><p>Derrr..</p><span>0:34</span></li>
<li><p>Launch attempt #2</p><span>0:36</span></li>
<li><p>"Wrong angle"</p><span>0:39</span></li>
<li><p>"Fail"</p><span>0:42</span></li>
</ul>
</div>
</div>
</li>
</ul>
<div style="clear:both"></div>
<p style="margin-left:1em">
<a href="http://www.schillmania.com/projects/soundmanager2/" title="SoundManager 2 home">SoundManager 2 project page</a> (not an MP3 link)
</p>
<script type="text/javascript">
if (window.location.toString().match(/#customize/i)) {
document.getElementById('config-link').style.display = 'none';
document.getElementById('config-ui').style.display = 'block';
}
</script>
</div>
</body>
</html>

179
js/libs/soundmanager/demo/360-player/demo-slider-controls.css Normal file
View file

@ -0,0 +1,179 @@
#cp-container { position:relative;float:left;display:inline; margin-left:1em;padding: 6px; background-color: #f6f6f6; border:1px solid #eee; width: 320px; height:180px;z-index:2; }
.yui-picker-controls li,
.yui-picker-controls input {
font-size:1em;
font-family:"helvetica neue",helvetica,arial,verdana;
}
#controls {
position:relative;
margin-top:1.5em;
font-size:0.85em;
}
#options {
float:left;
display:inline;
margin-bottom:0.5em;
margin-top:-1.2em;
}
#controls .checkbox {
float:left;
display:inline;
width:21.2em;
margin-right:2.5em;
}
#controls .checkbox div {
/* tab */
width:auto;
padding:0.4em;
border:1px solid #ddd;
border-bottom:none;
background:#eee;
}
#controls .checkbox div,
#controls .checkbox input {
font-family:arial,tahoma,verdana,"sans serif";
font-size:1em;
vertical-align:middle;
}
#controls dl {
width:21em;
}
#controls dl.col {
position:relative;
float:left;
display:inline;
margin:0px;
margin-right:1em;
padding:0.75em;
/*
height:12.4em;
*/
height:auto;
border:1px solid #ddd;
background:#f6f6f6;
}
#controls .disabled {
color:#ccc;
}
#controls .disabled dt,
#controls .disabled dd {
color:#999;
opacity:0.5;
}
#controls dl dd p {
margin:0px;
padding:0px;
}
#controls dt,
#controls dd {
margin:0px;
padding:0px;
}
#controls dt {
border-bottom:none;
}
#controls dt {
float:left;
display:inline;
background:transparent;
padding-right:0.7em;
margin-right:0.7em;
border-right:1px solid #ccc;
font-size:1.1em;
color:#333;
font-family:"helvetica neue",helvetica,verdana,arial,"sans serif";
}
#controls dd {
margin:0px;
padding:0px;
font-size:0.9em;
vertical-align:middle;
color:#666;
}
#controls .title {
float:left;
display:inline;
margin-right:0.6em;
color:#333;
}
/* those slider bits you might be wondering about */
#controls .control {
position:relative;
border-left:0px;
width:214px;
height:20px;
}
#controls .control .bar {
position:absolute;
left:0px;
top:0px;
width:214px;
height:20px;
background:transparent url(../_image/slider-bar.gif) no-repeat 0px 9px;
cursor:pointer;
cursor:hand;
}
#controls .control .slider {
position:absolute;
left:0px;
top:0px;
width:20px;
height:20px;
background:transparent url(../_image/slider.png) no-repeat 0px 0px;
*background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src='../_image/slider.png');
cursor:pointer;
cursor:hand;
}
#controls .control .slider:hover {
background:transparent url(../_image/slider-1.png) no-repeat 0px 0px;
*background:none;
}
#controls .control .slider.hover {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src='../_image/slider-1.png');
}
#controls .disabled .control .slider {
background:transparent url(../_image/slider-disabled.png) no-repeat 0px 0px;
*background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src='../_image/slider-disabled.png');
}
#controls .disabled .control .slider:hover {
background:transparent url(../_image/slider-disabled-1.png) no-repeat 0px 0px;
*background:none;
}
#controls .disabled .control .slider.hover {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src='../_image/slider-disabled-1.png');
}
#controls input[type=text] {
width:5em;
}
#options div {
margin-bottom:0.25em;
}

714
js/libs/soundmanager/demo/360-player/demo-slider-controls.js Normal file
View file

@ -0,0 +1,714 @@
/*
Ancient fireworks slider control code (2005)
http://schillmania.com/projects/fireworks/
--------------------------------------------
Not required for your use!
*/
function Animator2() {
var self = this;
this.tweens = [];
this.tweens['default'] = [1,2,3,4,5,6,7,8,9,10,9,8,7,6,5,4,3,2,1];
this.tweens['blast'] = [12,12,11,10,10,9,8,7,6,5,4,3,2,1];
this.tweens['fade'] = [10,10,10,10,10,10,10,10,10,10];
this.queue = [];
this.queue.IDs = [];
this.active = false;
this.timer = null;
this.createTween = function(start,end,type) {
// return array of tween coordinate data (start->end)
type = type||'default';
var tween = [start];
var tmp = start;
var diff = end-start;
var x = self.tweens[type].length;
for (var i=0; i<x; i++) {
tmp += diff*self.tweens[type][i]*0.01;
tween[i] = new Object();
tween[i].data = tmp;
tween[i].event = null;
}
return tween;
}
this.enqueue = function(o,fMethod,fOnComplete) {
// add object and associated methods to animation queue
// writeDebug('animator.enqueue()');
if (!fMethod) {
// writeDebug('animator.enqueue(): missing fMethod');
}
if (typeof(self.queue.IDs[o.oID])=='undefined') {
// writeDebug('animator.enqueue(): added '+o.oID);
var i = self.queue.length;
self.queue.IDs[o.oID] = i;
self.queue[i] = o;
} else {
// writeDebug('animator.enqueue(): '+o.oID+' already queued');
var i = self.queue.IDs[o.oID]; // retrieve queue index
self.queue[i].active = true;
self.queue[i].frame = 0;
}
o.active = true; // flag for animation
self.queue[i]._method = fMethod;
self.queue[i]._oncomplete = fOnComplete?fOnComplete:null;
}
this.animate = function() {
var active = 0;
for (var i=self.queue.length; i--;) {
if (self.queue[i].active) {
self.queue[i]._method();
active++;
}
}
if (active==0 && self.timer) {
// all animations finished
self.stop();
} else {
// writeDebug(active+' active');
}
}
this.start = function() {
if (self.timer || self.active) {
// writeDebug('animator.start(): already active');
return false;
}
// writeDebug('animator.start()'); // report only if started
self.active = true;
self.timer = setInterval(self.animate,mc.intervalRate);
}
this.stop = function() {
// writeDebug('animator.stop()',true);
clearInterval(self.timer);
self.timer = null;
self.active = false;
self.queue = [];
self.queue.IDs = [];
}
}
function MainController() {
var self = this;
this.intervalRate = 20; // rate (ms) to run animation at, general best default = 20
this.DEBUG = true; // debug mode disabled by default
this.oFW = null;
this.isIE = (navigator.appVersion.indexOf('MSIE')+1);
this.isOpera = (navigator.userAgent.toLowerCase().indexOf('opera')+1);
if (this.isOpera) this.isIE = false; // no impersonation allowed here!
this.animator = null;
this.gOID = 0; // global object ID counter (for animation queue)
this.particleTypes = 6;
this.particleXY = 10;
this.tweenFade = [100,90,80,70,60,50,40,30,20,10,0];
this.isSafari = (navigator.appVersion.toLowerCase().indexOf('safari')+1?1:0);
this.canvasX = null;
this.canvasY = null;
this.screenY = null; // screen area (not entire page)
self.scrollY = null;
self.getWindowCoords = function() {
self.canvasX = (document.documentElement.clientWidth||document.body.clientWidth||document.body.scrollWidth);
self.canvasY = (document.documentElement.clientHeight||document.body.clientHeight||document.body.scrollHeight);
self.screenY = self.canvasY;
self.scrollY = parseInt(window.scrollY||document.documentElement.scrollTop||document.body.scrollTop);
self.canvasY += self.scrollY;
}
this.getWindowCoordsAlt = function() {
self.canvasX = window.innerWidth;
self.canvasY = window.innerHeight;
self.screenY = self.canvasY;
self.scrollY = parseInt(window.scrollY||document.documentElement.scrollTop||document.body.scrollTop);
self.canvasY += self.scrollY;
}
this.getPanX = function(x) {
x = parseInt(x);
var pos = x/self.canvasX;
if (pos<0.4) {
pos *= -1;
} else if (pos >= 0.4 && pos <= 0.6) {
pos = 0.5;
}
pos = parseInt(pos*100);
// writeDebug('getPanX('+x+'): '+pos+'%');
return pos;
}
this.isEmpty = function(o) {
// needs further hacking
return (typeof(o)=='undefined'||(o==null&&o!=0)||(o==''&&o!=0)||o=='null');
}
this.init = function() {
// self.oFW = document.getElementById('fw');
// self.oFP = document.getElementById('fp');
// if (typeof(enableDebugMode)!='undefined' && (self.DEBUG||window.location.toString().toLowerCase().indexOf('debug')>=0)) enableDebugMode();
self.getWindowCoords();
self.animator = new Animator2();
}
this.destructor = function() {
/*
for (var i=self.fireworks.length; i--;) {
self.fireworks[i] = null;
}
self.fireworks = null;
if (soundManager) {
soundManager.destructor();
soundManager = null;
}
*/
}
if (this.isSafari || this.isOpera) this.getWindowCoords = this.getWindowCoordsAlt;
}
function Controller(o) {
var self = this;
this.o = o;
this.controls = [];
this.cb = [];
this.options = [];
this.functionExample = document.getElementById('function-example');
this.fbIE = null;
this.randomize = function() {
for (var i=1; i<self.controls.length; i++) {
setTimeout(self.controls[i].randomize,20+(20*i+1));
}
}
this.cbClick = function(nIndex) {
document.getElementById('controls').getElementsByTagName('dl')[nIndex].className = 'col'+(this.checked==false||this.checked==''?' disabled':'');
self.updateExample();
self.updateExampleCode();
}
this.updateExample = function() {
if (threeSixtyPlayer) {
var val = self.controls[0].value;
threeSixtyPlayer.config.circleDiameter = self.controls[0].value;
threeSixtyPlayer.config.circleRadius = self.controls[0].value/2;
// update some stuff
// set the cover width/height to match the canvas
if (threeSixtyPlayer.lastSound) {
// always set cover to max area?
// threeSixtyPlayer.lastSound._data.oCover.style.width = 250+'px';
// threeSixtyPlayer.lastSound._data.oCover.style.height = 250+'px';
// threeSixtyPlayer.lastSound._data.oCover.style.width = threeSixtyPlayer.config.circleDiameter+'px';
// threeSixtyPlayer.lastSound._data.oCover.style.height = threeSixtyPlayer.config.circleDiameter+'px';
threeSixtyPlayer.refreshCoords(threeSixtyPlayer.lastSound);
}
threeSixtyPlayer.config.waveformDataLineRatio = (self.controls[1].value/100)*2;
threeSixtyPlayer.config.waveformDataDownsample = (self.controls[2].value);
threeSixtyPlayer.config.eqDataLineRatio = parseInt((self.controls[3].value/100)*3*1000)/1000;
threeSixtyPlayer.config.eqDataDownsample = (self.controls[4].value);
threeSixtyPlayer.config.useEQData = (document.getElementById('disabled-1').checked?true:false);
// radio buttons
threeSixtyPlayer.config.useWaveformData=(document.getElementById('use-waveform').checked?true:false);
threeSixtyPlayer.config.waveformDataOutside = document.getElementById('waveform-inside').checked?false:true;
threeSixtyPlayer.config.eqDataOutside = document.getElementById('eq-inside').checked?false:true;
threeSixtyPlayer.config.useAmplifier = (document.getElementById('use-amplifier').checked?true:false);
// threeSixtyPlayer.refreshCoords();
}
}
this.updateExampleCode = function() {
// set innerHTML
document.getElementById('config-code').innerHTML = "\
// 360player.js, config section\n\
\n\
this.config = {\n\
\n\
playNext: <span>"+threeSixtyPlayer.config.playNext+"</span>,\n\
autoPlay: <span>"+threeSixtyPlayer.config.autoPlay+"</span>,\n\
allowMultiple: <span>"+threeSixtyPlayer.config.allowMultiple+"</span>,\n\
loadRingColor: <span>'"+threeSixtyPlayer.config.loadRingColor+"'</span>,\n\
playRingColor: <span>'"+threeSixtyPlayer.config.playRingColor+"'</span>,\n\
backgroundRingColor: <span>'"+threeSixtyPlayer.config.backgroundRingColor+"'</span>,\n\
circleDiameter: <span>"+threeSixtyPlayer.config.circleDiameter+"</span>,\n\
circleRadius: <span>"+threeSixtyPlayer.config.circleRadius+"</span>,\n\
imageRoot: <span>'"+threeSixtyPlayer.config.imageRoot+"'</span>,\n\
animDuration: <span>"+threeSixtyPlayer.config.animDuration+"</span>,\n\
animTransition: <span>Animator.tx.bouncy</span>,\n\
showHMSTime: <span>"+threeSixtyPlayer.config.showHMSTime+"</span>,\n\
\n\
useWaveformData: <span>"+threeSixtyPlayer.config.useWaveformData+"</span>,\n\
waveformDataColor: <span>'"+threeSixtyPlayer.config.waveformDataColor+"'</span>,\n\
waveformDataDownsample: <span>"+threeSixtyPlayer.config.waveformDataDownsample+"</span>,\n\
waveformDataOutside: <span>"+threeSixtyPlayer.config.waveformDataOutside+"</span>,\n\
waveformDataConstrain: <span>false</span>,\n\
waveformDataLineRatio: <span>"+threeSixtyPlayer.config.waveformDataLineRatio+"</span>,\n\
\n\
useEQData: <span>"+threeSixtyPlayer.config.useEQData+"</span>,\n\
eqDataColor: <span>'"+threeSixtyPlayer.config.eqDataColor+"'</span>,\n\
eqDataDownsample: <span>"+threeSixtyPlayer.config.eqDataDownsample+"</span>,\n\
eqDataOutside: <span>"+threeSixtyPlayer.config.eqDataOutside+"</span>,\n\
eqDataLineRatio: <span>"+threeSixtyPlayer.config.eqDataLineRatio+"</span>,\n\
\n\
usePeakData: <span>"+threeSixtyPlayer.config.usePeakData+"</span>,\n\
peakDataColor: <span>'"+threeSixtyPlayer.config.peakDataColor+"'</span>,\n\
peakDataOutside: <span>"+threeSixtyPlayer.config.peakDataOutside+"</span>,\n\
peakDataLineRatio: <span>"+threeSixtyPlayer.config.peakDataLineRatio+"</span>,\n\
\n\
useAmplifier: <span>"+threeSixtyPlayer.config.useAmplifier+"</span>\n\
\n\
}";
document.getElementById('config-code').style.display = 'block'; // weird Fx fix
}
this.createCustomFirework = function() {
}
this.destructor = function() {
for (var i=self.controls.length; i--;) {
self.controls[i].destructor();
}
for (i=self.cb.length; i--;) {
self.cb.onclick = null;
self.cb[i] = null;
}
for (i=self.options.length; i--;) {
self.options[i] = null;
}
if (navigator.userAgent.match(/msie/i)) {
self.fbIE.onmouseover = null;
self.fbIE.onmouseout = null;
self.fbIE = null;
}
self.cb = null;
self.options = null;
self.controls = null;
self.functionExample = null;
self.o = null;
}
var items = parseInt(this.o.length/3);
for (var i=0; i<items; i++) {
this.controls[this.controls.length] = new Slider(this.o[(3*i)+2].getElementsByTagName('div')[1],this.o[(3*i)+1],this.o[(3*i)+2].getElementsByTagName('div')[0]);
}
this.cb = [document.getElementById('disabled-0'),document.getElementById('disabled-1')];
/*
for (i=this.cb.length; i--;) {
this.cb[i]._index = i;
this.cb[i].onclick = this.cbClick;
}
*/
this.options = [];
/*
this.cb[1].checked = false;
this.options = [document.getElementById('opt-random0'),document.getElementById('opt-random1')];
this.options[0].checked = false;
this.options[1].checked = true;
if (navigator.userAgent.match(/msie/i)) {
this.fbIE = document.getElementById('fireButton');
this.fbIE.onmouseover = function() {this.className='hover';}
this.fbIE.onmouseout = function() {this.className='';}
}
*/
setTimeout(function(){
var values = [
256,
65,
40,
72,
48
];
for (var i=0; i<values.length; i++) {
self.controls[i].setValue(values[i]); // defaults
}
},1);
}
function Slider(o,oV,oB) {
var self = this;
this.o = o;
this.oV = oV;
this.oB = oB;
this.scale = parseInt(oV.innerHTML.toString().substr(2));
this.oID = 'sc'+(gOID++);
this.offX = 0;
this.x = 0;
this.xMin = 0-10;
this.xMax = self.o.parentNode.offsetWidth-10;
this.value = 0;
this.timer = null;
this._className = this.o.className;
this.tween = [];
this.frame = 0;
this.over = function() {
this.className = self._className+' hover';
event.cancelBubble=true;
return false;
}
this.out = function() {
this.className = self._className;
event.cancelBubble=true;
return false;
}
this.down = function(e) {
var e = e?e:event;
self.offX = e.clientX-self.o.offsetLeft;
addEvent(document,'mousemove',self.move);
addEvent(document,'mouseup',self.up);
return false;
}
this.barClick = function(e) {
var e=e?e:event;
self.slide(self.x,e.clientX-self.o.parentNode.parentNode.offsetLeft-self.o.offsetWidth);
}
this.move = function(e) {
var e=e?e:event;
var x = e.clientX-self.offX;
if (x>self.xMax) {
x = self.xMax;
} else if (x<self.xMin) {
x = self.xMin;
}
if (x != self.x) {
self.moveTo(x);
self.doUpdate();
controller.updateExample();
controller.updateExampleCode();
}
e.stopPropgation?e.stopPropagation():e.cancelBubble=true;
return false;
}
this.up = function(e) {
removeEvent(document,'mousemove',self.move);
removeEvent(document,'mouseup',self.up);
// controller.updateExample();
controller.updateExampleCode();
}
this.slide = function(x0,x1) {
self.tween = mc.animator.createTween(x0,x1);
mc.animator.enqueue(self,self.animate,function(){
controller.updateExample()
controller.updateExampleCode();
});
mc.animator.start();
}
this.moveTo = function(x) {
self.x = x;
self.o.style.marginLeft = x+'px';
}
this.animate = function() {
self.moveTo(self.tween[self.frame].data);
self.doUpdate(50);
controller.updateExample();
if (self.frame++>=self.tween.length-1) {
self.active = false;
self.frame = 0;
if (self._oncomplete) self._oncomplete();
// self.doUpdate();
return false;
}
self.doUpdate();
return true;
}
this.doUpdate = function(t) {
// if (!self.timer) self.timer = setTimeout(self.update,t||20);
self.update();
}
this.update = function() {
self.timer = null;
self.value = 1+parseInt(self.x/self.xMax*(self.scale-1));
if (self.value<1) self.value = 1;
// if (self.oV.innerHTML != self.value) self.oV.innerHTML = self.value;
// self.oV.innerHTML = self.value;
}
this.setValue = function(x) {
self.slide(self.x,Math.min(self.xMax,x));
}
this.randomize = function() {
self.slide(self.x,parseInt(Math.random()*self.xMax));
}
this.destructor = function() {
self.o.onmouseover = null;
self.o.onmouseout = null;
self.o.onmousedown = null;
self.o = null;
self.oV = null;
self.oB.onclick = null;
self.oB = null;
}
if (soundManager.isIE) {
// IE is lame, no :hover
this.o.onmouseover = this.over;
this.o.onmouseout = this.out;
}
this.o.onmousedown = this.down;
this.oB.onclick = this.barClick;
self.update();
}
var gOID = 0;
function demoInit() {
controller = new Controller(document.getElementById('controls').getElementsByTagName('dd'));
}
function demoDestuctor() {
controller.destructor();
controller = null;
}
var controller = null;
var mc = new MainController();
// create null objects if APIs not present
function createCP(oInput,oHandler) {
var Event = YAHOO.util.Event;
cpHandler = oHandler;
if (picker != null) {
// picker.showcontrols(true);
var c = oInput.value.substr(1);
picker.setValue(hex2decArray([c.substr(0,2),c.substr(2,2),c.substr(4,2)]),true); // be silent
return false;
}
Event.onDOMReady(function() {
picker = new YAHOO.widget.ColorPicker("cp-container", {
showhsvcontrols: true,
showhexcontrols: true,
images: {
PICKER_THUMB: "../_image/picker_thumb.png",
HUE_THUMB: "../_image/hue_thumb.png"
}
});
// picker.showcontrols(false);
//a listener for logging RGB color changes;
//this will only be visible if logger is enabled:
var onRgbChange = function(o) {
/*o is an object
{ newValue: (array of R, G, B values),
prevValue: (array of R, G, B values),
type: "rgbChange"
}
*/
cpHandler(o.newValue);
controller.updateExampleCode();
}
//subscribe to the rgbChange event;
picker.on("rgbChange", onRgbChange);
//use setValue to reset the value to white:
Event.on("reset", "click", function(e) {
picker.setValue([255, 255, 255], false); //false here means that rgbChange
//wil fire; true would silence it
});
//use the "get" method to get the current value
//of one of the Color Picker's properties; in
//this case, we'll get the hex value and write it
//to the log:
Event.on("gethex", "click", function(e) {
console.log("Current hex value: " + picker.get("hex"));
});
});
}
var picker = null;
cpHandler = function() {
}
// hex -> dec / dec -> hex
// http://www.southwest.com.au/~jfuller/binary/converter.htm
function dec2hex(cval) {
if (cval > 255) cval = 255;
var hexascii = "0123456789ABCDEF";
var cval0 = Math.floor(cval/16);
var cval1 = cval-(cval0*16);
var c1 = hexascii.charAt(cval0);
var c2 = hexascii.charAt(cval1);
return (c1+c2);
}
function hex2dec(cval) {
cval = cval.toUpperCase();
var tval = 0;
var hexascii = "0123456789ABCDEF";
var mychar, ch;
for (var c=0; c<cval.length; c++) {
mychar = cval.charAt(c);
for (ch=0; ch<16; ch++) {
if (mychar == hexascii.charAt(ch)) {
tval += ch;
if (c<cval.length-1) tval *= 16;
}
}
}
return tval;
}
function hex2decArray(hArray) {
var result = [];
for (var i=0,j=hArray.length; i<j; i++) {
result[i] = hex2dec(hArray[i]);
}
return result;
}
function dec2hexArray(dArray) {
var result = [];
for (var i=0,j=dArray.length; i<j; i++) {
result[i] = dec2hex(dArray[i]);
}
return result;
}
/*
threeSixtyPlayer.config.waveformDataColor = '#'+dec2hexArray([self.controls[5].value,self.controls[6].value,self.controls[7].value]).join('');
threeSixtyPlayer.config.eqDataColor = '#'+dec2hexArray([self.controls[8].value,self.controls[9].value,self.controls[10].value]).join('');
threeSixtyPlayer.config.loadRingColor = '#'+dec2hexArray([self.controls[11].value,self.controls[12].value,self.controls[13].value]).join('');
threeSixtyPlayer.config.playRingColor = '#'+dec2hexArray([self.controls[14].value,self.controls[15].value,self.controls[16].value]).join('');
threeSixtyPlayer.config.waveformDataLineRatio = (self.controls[1].value/100)*2;
threeSixtyPlayer.config.waveformDataDownsample = (self.controls[2].value);
threeSixtyPlayer.config.eqDataLineRatio = (self.controls[3].value/100)*3;
threeSixtyPlayer.config.eqDataDownsample = (self.controls[4].value);
*/
function _id(sID) {
return document.getElementById(sID);
}
function setWaveformColor(sColor) {
var value = '#'+(dec2hexArray(sColor).join(''));
threeSixtyPlayer.config.waveformDataColor = value;
_id('waveform-color').value = value;
}
function setEQColor(sColor) {
var value = '#'+dec2hexArray(sColor).join('');
_id('eq-color').value = value;
threeSixtyPlayer.config.eqDataColor = value;
}
function setLoadedRingColor(sColor) {
var value = '#'+dec2hexArray(sColor).join('');
_id('loaded-ring-color').value = value;
threeSixtyPlayer.config.loadRingColor = value;
}
function setProgressRingColor(sColor) {
var value = '#'+dec2hexArray(sColor).join('');
_id('progress-ring-color').value = value;
threeSixtyPlayer.config.playRingColor = value;
}
function setBackgroundRingColor(sColor) {
var value = '#'+dec2hexArray(sColor).join('');
_id('bg-ring-color').value = value;
threeSixtyPlayer.config.backgroundRingColor = value;
}
function addEvent(o,evtName,evtHandler) {
typeof(attachEvent)=='undefined'?o.addEventListener(evtName,evtHandler,false):o.attachEvent('on'+evtName,evtHandler);
}
function removeEvent(o,evtName,evtHandler) {
typeof(attachEvent)=='undefined'?o.removeEventListener(evtName,evtHandler,false):o.detachEvent('on'+evtName,evtHandler);
}
if (window.location.toString().match(/#customize/i)) {
addEvent(window,'resize',mc.getWindowCoords);
addEvent(window,'scroll',mc.getWindowCoords);
addEvent(window,'load',mc.init);
addEvent(window,'load',demoInit);
}
if (window.location.toString().match(/hifi/i)) {
soundManager.onready(function(){
document.getElementById('hifi').style.display = 'none';
threeSixtyPlayer.config = {
playNext: false,
autoPlay: false,
loadRingColor: '#ccc',
playRingColor: '#000',
backgroundRingColor: '#eee',
circleDiameter: 256,
circleRadius: 128,
imageRoot: '',
animDuration: 500,
animTransition: Animator.tx.bouncy,
showHMSTime: true,
useWaveformData: true,
waveformDataColor: '#0099ff',
waveformDataDownsample: 1,
waveformDataOutside: true,
waveformDataConstrain: false,
waveformDataLineRatio: 0.56,
useEQData: true,
eqDataColor: '#339933',
eqDataDownsample: 1,
eqDataOutside: true,
eqDataLineRatio: 0.72,
usePeakData: true,
peakDataColor: '#ff33ff',
peakDataOutside: true,
peakDataLineRatio: 0.5,
useAmplifier: true
}
});
}

75
js/libs/soundmanager/demo/360-player/demo.css Normal file
View file

@ -0,0 +1,75 @@
/*
-------------------------------------------------------------
In-page demo CSS - see external CSS for actual relevant stuff.
--------------------------------------------------------------
*/
#soundmanager-debug {
/* SM2 debug container (optional, makes debug more useable) */
position:absolute;position:fixed;*position:absolute;bottom:10px;right:10px;width:50em;height:18em;overflow:auto;background:#fff;margin:1em;padding:1em;border:1px solid #999;font-family:"lucida console",verdana,tahoma,"sans serif";font-size:x-small;line-height:1.5em;opacity:0.9;filter:alpha(opacity=90);
}
body {
font:75% normal verdana,arial,tahoma,"sans serif";
}
h1, h2, h3 {
font:3em arial,tahoma,verdana;
font-weight:normal;
margin-bottom:0px;
}
h1 {
margin-top:0.25em;
}
h1, h2 {
letter-spacing:-1px; /* zomg web x.0! ;) */
}
h2 {
font-size:2em;
margin-top:0px;
margin-bottom:0.1em;
}
h3 {
font-size:1.5em;
margin-bottom:1em;
}
h1 a,
h1 a:hover {
color:#000;
text-decoration:none;
}
h1 a:hover {
text-decoration:underline;
}
ul.notes {
margin-left:0px;
padding-left:1.5em;
}
.note {
margin-top:0px;
font-style:italic;
color:#999;
margin-bottom:0px;
}
pre {
font-size:1.2em;
_font-size:1em;
}
#left {
max-width:56em;
margin-left:1em;
}

BIN
js/libs/soundmanager/demo/360-player/empty.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 43 B

BIN
js/libs/soundmanager/demo/360-player/icon_loading_dots.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
js/libs/soundmanager/demo/360-player/icon_loading_spinner.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 530 B

BIN
js/libs/soundmanager/demo/360-player/icon_loading_spinner_bigger.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.5 KiB

167
js/libs/soundmanager/demo/360-player/index.html Normal file
View file

@ -0,0 +1,167 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>360&deg; MP3 player UI demo (SoundManager 2)</title>
<meta name="robots" content="noindex" />
<meta name="description" content="Javascript-driven sound, canvas-based MP3 player UI demo: 360-degree circular control / jog wheel example for playing MP3 links using SoundManager 2, Javascript and Canvas.">
<!-- required -->
<link rel="stylesheet" type="text/css" href="360player.css" />
<!-- special IE-only canvas fix -->
<!--[if IE]><script type="text/javascript" src="script/excanvas.js"></script><![endif]-->
<!-- Apache-licensed animation library -->
<script type="text/javascript" src="script/berniecode-animator.js"></script>
<!-- the core stuff -->
<script type="text/javascript" src="../../script/soundmanager2.js"></script>
<script type="text/javascript" src="script/360player.js"></script>
<script type="text/javascript">
soundManager.url = '../../swf/';
</script>
<!-- stuff you don't need -->
<!-- makes the fonts nicer etc. -->
<link rel="stylesheet" type="text/css" href="../index.css" />
<link rel="stylesheet" type="text/css" href="demo.css" />
<!-- soundManager.useFlashBlock: related CSS -->
<link rel="stylesheet" type="text/css" href="../flashblock/flashblock.css" />
<style type="text/css">
/* Demo page, general layout */
#left {
position:relative;
width:950px;
max-width:100%;
}
#left h2 {
padding-top:0px;
margin-bottom:0.25em;
color:#666;
}
pre.block {
margin-top:0.5em;
}
</style>
</head>
<body>
<div id="left">
<h1><a href="http://www.schillmania.com/projects/soundmanager2/" title="Javascript MP3 player project home">SoundManager 2</a> / <a href="http://schillmania.com/projects/soundmanager2/demo/360-player/">360&deg; Player</a>: JS + Canvas UI</h1>
<p class="note" style="color:#666;margin-bottom:0.5em">Canvas-based UI. Load progress, seek, play/pause etc. Also see <a href="canvas-visualization.html" title="Javascript canvas visualization with waveform/eq data">360&deg; UI visualization</a> demo.</p>
<div id="sm2-container">
<!-- flash movie is added here -->
</div>
<div style="margin-top:1.25em">
<div style="float:left;display:inline"> <!-- float is just for this demo layout, you don't need it. -->
<div class="ui360" style="margin-top:-0.55em"><a href="../_mp3/rain.mp3">Rain</a></div>
<div class="ui360"><a href="http://freshly-ground.com/data/audio/mpc/20090119%20-%20Untitled%20Groove.mp3">20090119 - Untitled Groove</a></div>
</div>
<div style="float:left;display:inline;margin-left:40px;border-left:1px solid #ccc;padding-left:30px;width:140px">
<p style="margin-top:1em;margin-bottom:0px">Alternate style: inline</p>
<div class="sm2-inline-list" style="margin-bottom:10px"> <!-- note the CSS class, changes the layout -->
<div class="ui360"><a href="http://www.freshly-ground.com/data/audio/binaural/Mak.mp3">Angry cow sound?</a></div>
<div class="ui360"><a href="http://www.freshly-ground.com/data/audio/binaural/Things that open, close and roll.mp3">Things that open, close and roll</a></div>
<div class="ui360"><a href="http://www.freshly-ground.com/misc/music/20060826%20-%20Armstrong.mp3">20060826 - Armstrong</a></div>
</div>
</div>
</div>
<div style="clear:both"></div>
<h3>How This Works</h3>
<p>The script looks for a container element matching <code>div.<span>ui360</span></code>, and then the first link inside of it.</p>
<div>
<pre class="block"><code>&lt;div class="<span>ui360</span>"&gt;
&lt;a href="/path/to/an.mp3"&gt;
&lt;/div&gt;</code></pre>
</div>
<p>When the link is clicked, the script adds a <code>UI</code> template to the block, prepending it in front of the MP3 link:</p>
<pre class="block"><code>&lt;div class="<span>ui360</span>"&gt;
<span><span>&lt;-- dynamically-inserted block --&gt;</span></span>
&lt;div class="<span>ui</span>"&gt;
&lt;canvas class="<span>sm2-canvas</span>"&gt;&lt;/canvas&gt;
&lt;img class="<span>sm2-360btn</span>" /&gt;
&lt;div class="<span>sm2-timing</span>"&gt;&lt;/div&gt;
&lt;div class="<span>sm2-cover</span>"&gt;&lt;/div&gt;
&lt;/div&gt;
<span><span>&lt;-- /UI --&gt;</span></span>
&lt;a href="<span>/path/to/an.mp3</span>"&gt;
&lt;/div&gt;</code></pre>
<h3>Customizing the UI</h3>
<p>The player's default 50x50-pixel canvas is defined both within JavaScript and CSS. For an example with different values, see this <a href="canvas-visualization.html" title="360&deg; UI: larger version">larger version</a>.</p>
<pre class="block"><code>threeSixtyPlayer.config = {
playNext: <span>false</span>, <span><span>// stop after one sound, or play through list until end</span></span>
autoPlay: <span>false</span>, <span><span>// start playing the first sound right away</span></span>
allowMultiple: <span>true</span>, <span><span>// let many sounds play at once (false = one at a time)</span></span>
loadRingColor: <span>'#ccc',</span> <span><span>// amount of sound which has loaded</span></span>
playRingColor: <span>'#000'</span>, <span><span>// amount of sound which has played</span></span>
backgroundRingColor: <span>'#eee', </span><span><span>// "default" color shown underneath everything else</span></span>
imageRoot: <span>''</span>,</span> <span><span>// path to prepend for empty.gif used for play/pause button
animDuration: <span>500</span>,
animTransition: <span>Animator.tx.bouncy</span> <span><span>// http://www.berniecode.com/writing/animator.html</span></span>
}</code></pre>
<p>The CSS for the canvas UI block is a bit ugly, but JavaScript reads the width of the <code>.sm2-360ui</code> element in the DOM as set by CSS and uses that to later draw and update the canvas element while playing.</p>
<pre class="block"><code>.ui360,
.sm2-360ui {
<span><span>/* size of the container for the circle, etc. */</span></span>
width:<span>50px</span>;</span>
height:<span>50px</span>;</span>
}
</code></pre>
<h3>Third-party Components</h3>
<p>This demo includes use of <a href="http://www.berniecode.com/writing/animator.html">Bernie's Better Animation Class</a> (Apache licensed) for some animation effects.</p>
<p>Also, some loader/spinner icons from <a href="http://ajaxload.info">ajaxload.info</a> are used for showing loading/buffering states.</p>
<hr />
<p>
<a href="http://www.schillmania.com/projects/soundmanager2/" title="SoundManager 2 home">SoundManager 2 project page</a> (not an MP3 link)
</p>
</div>
</body>
</html>

1225
js/libs/soundmanager/demo/360-player/script/360player.js Normal file
View file

File diff suppressed because it is too large Load diff

674
js/libs/soundmanager/demo/360-player/script/berniecode-animator.js Normal file
View file

@ -0,0 +1,674 @@
/*
Animator.js 1.1.9
This library is released under the BSD license:
Copyright (c) 2006, Bernard Sumption. All rights reserved.
Redistribution and use in source and binary forms, with or without
modification, are permitted provided that the following conditions are met:
Redistributions of source code must retain the above copyright notice, this
list of conditions and the following disclaimer. Redistributions in binary
form must reproduce the above copyright notice, this list of conditions and
the following disclaimer in the documentation and/or other materials
provided with the distribution. Neither the name BernieCode nor
the names of its contributors may be used to endorse or promote products
derived from this software without specific prior written permission.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
ARE DISCLAIMED. IN NO EVENT SHALL THE REGENTS OR CONTRIBUTORS BE LIABLE FOR
ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT
LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY
OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH
DAMAGE.
*/
// http://www.berniecode.com/writing/animator.html
// Applies a sequence of numbers between 0 and 1 to a number of subjects
// construct - see setOptions for parameters
function Animator(options) {
this.setOptions(options);
var _this = this;
this.timerDelegate = function(){_this.onTimerEvent()};
this.subjects = [];
this.subjectScopes = [];
this.target = 0;
this.state = 0;
this.lastTime = null;
};
Animator.prototype = {
// apply defaults
setOptions: function(options) {
this.options = Animator.applyDefaults({
interval: 20, // time between animation frames
duration: 400, // length of animation
onComplete: function(){},
onStep: function(){},
transition: Animator.tx.easeInOut
}, options);
},
// animate from the current state to provided value
seekTo: function(to) {
this.seekFromTo(this.state, to);
},
// animate from the current state to provided value
seekFromTo: function(from, to) {
this.target = Math.max(0, Math.min(1, to));
this.state = Math.max(0, Math.min(1, from));
this.lastTime = new Date().getTime();
if (!this.intervalId) {
this.intervalId = window.setInterval(this.timerDelegate, this.options.interval);
}
},
// animate from the current state to provided value
jumpTo: function(to) {
this.target = this.state = Math.max(0, Math.min(1, to));
this.propagate();
},
// seek to the opposite of the current target
toggle: function() {
this.seekTo(1 - this.target);
},
// add a function or an object with a method setState(state) that will be called with a number
// between 0 and 1 on each frame of the animation
addSubject: function(subject,scope) {
this.subjects[this.subjects.length] = subject;
this.subjectScopes[this.subjectScopes.length] = scope;
return this;
},
// remove all subjects
clearSubjects: function() {
this.subjects = [];
this.subjectScopes = [];
},
// forward the current state to the animation subjects
propagate: function() {
var value = this.options.transition(this.state);
for (var i=0; i<this.subjects.length; i++) {
if (this.subjects[i].setState) {
this.subjects[i].setState(value);
} else {
this.subjects[i].apply(this.subjectScopes[i],[value]);
}
}
},
// called once per frame to update the current state
onTimerEvent: function() {
var now = new Date().getTime();
var timePassed = now - this.lastTime;
this.lastTime = now;
var movement = (timePassed / this.options.duration) * (this.state < this.target ? 1 : -1);
if (Math.abs(movement) >= Math.abs(this.state - this.target)) {
this.state = this.target;
} else {
this.state += movement;
}
try {
this.propagate();
} finally {
this.options.onStep.call(this);
if (this.target == this.state) {
window.clearInterval(this.intervalId);
this.intervalId = null;
this.options.onComplete.call(this);
}
}
},
// shortcuts
play: function() {this.seekFromTo(0, 1)},
reverse: function() {this.seekFromTo(1, 0)},
// return a string describing this Animator, for debugging
inspect: function() {
var str = "#<Animator:\n";
for (var i=0; i<this.subjects.length; i++) {
str += this.subjects[i].inspect();
}
str += ">";
return str;
}
}
// merge the properties of two objects
Animator.applyDefaults = function(defaults, prefs) {
prefs = prefs || {};
var prop, result = {};
for (prop in defaults) result[prop] = prefs[prop] !== undefined ? prefs[prop] : defaults[prop];
return result;
}
// make an array from any object
Animator.makeArray = function(o) {
if (o == null) return [];
if (!o.length) return [o];
var result = [];
for (var i=0; i<o.length; i++) result[i] = o[i];
return result;
}
// convert a dash-delimited-property to a camelCaseProperty (c/o Prototype, thanks Sam!)
Animator.camelize = function(string) {
var oStringList = string.split('-');
if (oStringList.length == 1) return oStringList[0];
var camelizedString = string.indexOf('-') == 0
? oStringList[0].charAt(0).toUpperCase() + oStringList[0].substring(1)
: oStringList[0];
for (var i = 1, len = oStringList.length; i < len; i++) {
var s = oStringList[i];
camelizedString += s.charAt(0).toUpperCase() + s.substring(1);
}
return camelizedString;
}
// syntactic sugar for creating CSSStyleSubjects
Animator.apply = function(el, style, options) {
if (style instanceof Array) {
return new Animator(options).addSubject(new CSSStyleSubject(el, style[0], style[1]));
}
return new Animator(options).addSubject(new CSSStyleSubject(el, style));
}
// make a transition function that gradually accelerates. pass a=1 for smooth
// gravitational acceleration, higher values for an exaggerated effect
Animator.makeEaseIn = function(a) {
return function(state) {
return Math.pow(state, a*2);
}
}
// as makeEaseIn but for deceleration
Animator.makeEaseOut = function(a) {
return function(state) {
return 1 - Math.pow(1 - state, a*2);
}
}
// make a transition function that, like an object with momentum being attracted to a point,
// goes past the target then returns
Animator.makeElastic = function(bounces) {
return function(state) {
state = Animator.tx.easeInOut(state);
return ((1-Math.cos(state * Math.PI * bounces)) * (1 - state)) + state;
}
}
// make an Attack Decay Sustain Release envelope that starts and finishes on the same level
//
Animator.makeADSR = function(attackEnd, decayEnd, sustainEnd, sustainLevel) {
if (sustainLevel == null) sustainLevel = 0.5;
return function(state) {
if (state < attackEnd) {
return state / attackEnd;
}
if (state < decayEnd) {
return 1 - ((state - attackEnd) / (decayEnd - attackEnd) * (1 - sustainLevel));
}
if (state < sustainEnd) {
return sustainLevel;
}
return sustainLevel * (1 - ((state - sustainEnd) / (1 - sustainEnd)));
}
}
// make a transition function that, like a ball falling to floor, reaches the target and/
// bounces back again
Animator.makeBounce = function(bounces) {
var fn = Animator.makeElastic(bounces);
return function(state) {
state = fn(state);
return state <= 1 ? state : 2-state;
}
}
// pre-made transition functions to use with the 'transition' option
Animator.tx = {
easeInOut: function(pos){
return ((-Math.cos(pos*Math.PI)/2) + 0.5);
},
linear: function(x) {
return x;
},
easeIn: Animator.makeEaseIn(1.5),
easeOut: Animator.makeEaseOut(1.5),
strongEaseIn: Animator.makeEaseIn(2.5),
strongEaseOut: Animator.makeEaseOut(2.5),
elastic: Animator.makeElastic(1),
veryElastic: Animator.makeElastic(3),
bouncy: Animator.makeBounce(1),
veryBouncy: Animator.makeBounce(3)
}
// animates a pixel-based style property between two integer values
function NumericalStyleSubject(els, property, from, to, units) {
this.els = Animator.makeArray(els);
if (property == 'opacity' && window.ActiveXObject) {
this.property = 'filter';
} else {
this.property = Animator.camelize(property);
}
this.from = parseFloat(from);
this.to = parseFloat(to);
this.units = units != null ? units : 'px';
}
NumericalStyleSubject.prototype = {
setState: function(state) {
var style = this.getStyle(state);
var visibility = (this.property == 'opacity' && state == 0) ? 'hidden' : '';
var j=0;
for (var i=0; i<this.els.length; i++) {
try {
this.els[i].style[this.property] = style;
} catch (e) {
// ignore fontWeight - intermediate numerical values cause exeptions in firefox
if (this.property != 'fontWeight') throw e;
}
if (j++ > 20) return;
}
},
getStyle: function(state) {
state = this.from + ((this.to - this.from) * state);
if (this.property == 'filter') return "alpha(opacity=" + Math.round(state*100) + ")";
if (this.property == 'opacity') return state;
return Math.round(state) + this.units;
},
inspect: function() {
return "\t" + this.property + "(" + this.from + this.units + " to " + this.to + this.units + ")\n";
}
}
// animates a colour based style property between two hex values
function ColorStyleSubject(els, property, from, to) {
this.els = Animator.makeArray(els);
this.property = Animator.camelize(property);
this.to = this.expandColor(to);
this.from = this.expandColor(from);
this.origFrom = from;
this.origTo = to;
}
ColorStyleSubject.prototype = {
// parse "#FFFF00" to [256, 256, 0]
expandColor: function(color) {
var hexColor, red, green, blue;
hexColor = ColorStyleSubject.parseColor(color);
if (hexColor) {
red = parseInt(hexColor.slice(1, 3), 16);
green = parseInt(hexColor.slice(3, 5), 16);
blue = parseInt(hexColor.slice(5, 7), 16);
return [red,green,blue]
}
if (window.DEBUG) {
alert("Invalid colour: '" + color + "'");
}
},
getValueForState: function(color, state) {
return Math.round(this.from[color] + ((this.to[color] - this.from[color]) * state));
},
setState: function(state) {
var color = '#'
+ ColorStyleSubject.toColorPart(this.getValueForState(0, state))
+ ColorStyleSubject.toColorPart(this.getValueForState(1, state))
+ ColorStyleSubject.toColorPart(this.getValueForState(2, state));
for (var i=0; i<this.els.length; i++) {
this.els[i].style[this.property] = color;
}
},
inspect: function() {
return "\t" + this.property + "(" + this.origFrom + " to " + this.origTo + ")\n";
}
}
// return a properly formatted 6-digit hex colour spec, or false
ColorStyleSubject.parseColor = function(string) {
var color = '#', match;
if(match = ColorStyleSubject.parseColor.rgbRe.exec(string)) {
var part;
for (var i=1; i<=3; i++) {
part = Math.max(0, Math.min(255, parseInt(match[i])));
color += ColorStyleSubject.toColorPart(part);
}
return color;
}
if (match = ColorStyleSubject.parseColor.hexRe.exec(string)) {
if(match[1].length == 3) {
for (var i=0; i<3; i++) {
color += match[1].charAt(i) + match[1].charAt(i);
}
return color;
}
return '#' + match[1];
}
return false;
}
// convert a number to a 2 digit hex string
ColorStyleSubject.toColorPart = function(number) {
if (number > 255) number = 255;
var digits = number.toString(16);
if (number < 16) return '0' + digits;
return digits;
}
ColorStyleSubject.parseColor.rgbRe = /^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i;
ColorStyleSubject.parseColor.hexRe = /^\#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
// Animates discrete styles, i.e. ones that do not scale but have discrete values
// that can't be interpolated
function DiscreteStyleSubject(els, property, from, to, threshold) {
this.els = Animator.makeArray(els);
this.property = Animator.camelize(property);
this.from = from;
this.to = to;
this.threshold = threshold || 0.5;
}
DiscreteStyleSubject.prototype = {
setState: function(state) {
var j=0;
for (var i=0; i<this.els.length; i++) {
this.els[i].style[this.property] = state <= this.threshold ? this.from : this.to;
}
},
inspect: function() {
return "\t" + this.property + "(" + this.from + " to " + this.to + " @ " + this.threshold + ")\n";
}
}
// animates between two styles defined using CSS.
// if style1 and style2 are present, animate between them, if only style1
// is present, animate between the element's current style and style1
function CSSStyleSubject(els, style1, style2) {
els = Animator.makeArray(els);
this.subjects = [];
if (els.length == 0) return;
var prop, toStyle, fromStyle;
if (style2) {
fromStyle = this.parseStyle(style1, els[0]);
toStyle = this.parseStyle(style2, els[0]);
} else {
toStyle = this.parseStyle(style1, els[0]);
fromStyle = {};
for (prop in toStyle) {
fromStyle[prop] = CSSStyleSubject.getStyle(els[0], prop);
}
}
// remove unchanging properties
var prop;
for (prop in fromStyle) {
if (fromStyle[prop] == toStyle[prop]) {
delete fromStyle[prop];
delete toStyle[prop];
}
}
// discover the type (numerical or colour) of each style
var prop, units, match, type, from, to;
for (prop in fromStyle) {
var fromProp = String(fromStyle[prop]);
var toProp = String(toStyle[prop]);
if (toStyle[prop] == null) {
if (window.DEBUG) alert("No to style provided for '" + prop + '"');
continue;
}
if (from = ColorStyleSubject.parseColor(fromProp)) {
to = ColorStyleSubject.parseColor(toProp);
type = ColorStyleSubject;
} else if (fromProp.match(CSSStyleSubject.numericalRe)
&& toProp.match(CSSStyleSubject.numericalRe)) {
from = parseFloat(fromProp);
to = parseFloat(toProp);
type = NumericalStyleSubject;
match = CSSStyleSubject.numericalRe.exec(fromProp);
var reResult = CSSStyleSubject.numericalRe.exec(toProp);
if (match[1] != null) {
units = match[1];
} else if (reResult[1] != null) {
units = reResult[1];
} else {
units = reResult;
}
} else if (fromProp.match(CSSStyleSubject.discreteRe)
&& toProp.match(CSSStyleSubject.discreteRe)) {
from = fromProp;
to = toProp;
type = DiscreteStyleSubject;
units = 0; // hack - how to get an animator option down to here
} else {
if (window.DEBUG) {
alert("Unrecognised format for value of "
+ prop + ": '" + fromStyle[prop] + "'");
}
continue;
}
this.subjects[this.subjects.length] = new type(els, prop, from, to, units);
}
}
CSSStyleSubject.prototype = {
// parses "width: 400px; color: #FFBB2E" to {width: "400px", color: "#FFBB2E"}
parseStyle: function(style, el) {
var rtn = {};
// if style is a rule set
if (style.indexOf(":") != -1) {
var styles = style.split(";");
for (var i=0; i<styles.length; i++) {
var parts = CSSStyleSubject.ruleRe.exec(styles[i]);
if (parts) {
rtn[parts[1]] = parts[2];
}
}
}
// else assume style is a class name
else {
var prop, value, oldClass;
oldClass = el.className;
el.className = style;
for (var i=0; i<CSSStyleSubject.cssProperties.length; i++) {
prop = CSSStyleSubject.cssProperties[i];
value = CSSStyleSubject.getStyle(el, prop);
if (value != null) {
rtn[prop] = value;
}
}
el.className = oldClass;
}
return rtn;
},
setState: function(state) {
for (var i=0; i<this.subjects.length; i++) {
this.subjects[i].setState(state);
}
},
inspect: function() {
var str = "";
for (var i=0; i<this.subjects.length; i++) {
str += this.subjects[i].inspect();
}
return str;
}
}
// get the current value of a css property,
CSSStyleSubject.getStyle = function(el, property){
var style;
if(document.defaultView && document.defaultView.getComputedStyle){
style = document.defaultView.getComputedStyle(el, "").getPropertyValue(property);
if (style) {
return style;
}
}
property = Animator.camelize(property);
if(el.currentStyle){
style = el.currentStyle[property];
}
return style || el.style[property]
}
CSSStyleSubject.ruleRe = /^\s*([a-zA-Z\-]+)\s*:\s*(\S(.+\S)?)\s*$/;
CSSStyleSubject.numericalRe = /^-?\d+(?:\.\d+)?(%|[a-zA-Z]{2})?$/;
CSSStyleSubject.discreteRe = /^\w+$/;
// required because the style object of elements isn't enumerable in Safari
/*
CSSStyleSubject.cssProperties = ['background-color','border','border-color','border-spacing',
'border-style','border-top','border-right','border-bottom','border-left','border-top-color',
'border-right-color','border-bottom-color','border-left-color','border-top-width','border-right-width',
'border-bottom-width','border-left-width','border-width','bottom','color','font-size','font-size-adjust',
'font-stretch','font-style','height','left','letter-spacing','line-height','margin','margin-top',
'margin-right','margin-bottom','margin-left','marker-offset','max-height','max-width','min-height',
'min-width','orphans','outline','outline-color','outline-style','outline-width','overflow','padding',
'padding-top','padding-right','padding-bottom','padding-left','quotes','right','size','text-indent',
'top','width','word-spacing','z-index','opacity','outline-offset'];*/
CSSStyleSubject.cssProperties = ['azimuth','background','background-attachment','background-color','background-image','background-position','background-repeat','border-collapse','border-color','border-spacing','border-style','border-top','border-top-color','border-right-color','border-bottom-color','border-left-color','border-top-style','border-right-style','border-bottom-style','border-left-style','border-top-width','border-right-width','border-bottom-width','border-left-width','border-width','bottom','clear','clip','color','content','cursor','direction','display','elevation','empty-cells','css-float','font','font-family','font-size','font-size-adjust','font-stretch','font-style','font-variant','font-weight','height','left','letter-spacing','line-height','list-style','list-style-image','list-style-position','list-style-type','margin','margin-top','margin-right','margin-bottom','margin-left','max-height','max-width','min-height','min-width','orphans','outline','outline-color','outline-style','outline-width','overflow','padding','padding-top','padding-right','padding-bottom','padding-left','pause','position','right','size','table-layout','text-align','text-decoration','text-indent','text-shadow','text-transform','top','vertical-align','visibility','white-space','width','word-spacing','z-index','opacity','outline-offset','overflow-x','overflow-y'];
// chains several Animator objects together
function AnimatorChain(animators, options) {
this.animators = animators;
this.setOptions(options);
for (var i=0; i<this.animators.length; i++) {
this.listenTo(this.animators[i]);
}
this.forwards = false;
this.current = 0;
}
AnimatorChain.prototype = {
// apply defaults
setOptions: function(options) {
this.options = Animator.applyDefaults({
// by default, each call to AnimatorChain.play() calls jumpTo(0) of each animator
// before playing, which can cause flickering if you have multiple animators all
// targeting the same element. Set this to false to avoid this.
resetOnPlay: true
}, options);
},
// play each animator in turn
play: function() {
this.forwards = true;
this.current = -1;
if (this.options.resetOnPlay) {
for (var i=0; i<this.animators.length; i++) {
this.animators[i].jumpTo(0);
}
}
this.advance();
},
// play all animators backwards
reverse: function() {
this.forwards = false;
this.current = this.animators.length;
if (this.options.resetOnPlay) {
for (var i=0; i<this.animators.length; i++) {
this.animators[i].jumpTo(1);
}
}
this.advance();
},
// if we have just play()'d, then call reverse(), and vice versa
toggle: function() {
if (this.forwards) {
this.seekTo(0);
} else {
this.seekTo(1);
}
},
// internal: install an event listener on an animator's onComplete option
// to trigger the next animator
listenTo: function(animator) {
var oldOnComplete = animator.options.onComplete;
var _this = this;
animator.options.onComplete = function() {
if (oldOnComplete) oldOnComplete.call(animator);
_this.advance();
}
},
// play the next animator
advance: function() {
if (this.forwards) {
if (this.animators[this.current + 1] == null) return;
this.current++;
this.animators[this.current].play();
} else {
if (this.animators[this.current - 1] == null) return;
this.current--;
this.animators[this.current].reverse();
}
},
// this function is provided for drop-in compatibility with Animator objects,
// but only accepts 0 and 1 as target values
seekTo: function(target) {
if (target <= 0) {
this.forwards = false;
this.animators[this.current].seekTo(0);
} else {
this.forwards = true;
this.animators[this.current].seekTo(1);
}
}
}
// an Accordion is a class that creates and controls a number of Animators. An array of elements is passed in,
// and for each element an Animator and a activator button is created. When an Animator's activator button is
// clicked, the Animator and all before it seek to 0, and all Animators after it seek to 1. This can be used to
// create the classic Accordion effect, hence the name.
// see setOptions for arguments
function Accordion(options) {
this.setOptions(options);
var selected = this.options.initialSection, current;
if (this.options.rememberance) {
current = document.location.hash.substring(1);
}
this.rememberanceTexts = [];
this.ans = [];
var _this = this;
for (var i=0; i<this.options.sections.length; i++) {
var el = this.options.sections[i];
var an = new Animator(this.options.animatorOptions);
var from = this.options.from + (this.options.shift * i);
var to = this.options.to + (this.options.shift * i);
an.addSubject(new NumericalStyleSubject(el, this.options.property, from, to, this.options.units));
an.jumpTo(0);
var activator = this.options.getActivator(el);
activator.index = i;
activator.onclick = function(){_this.show(this.index)};
this.ans[this.ans.length] = an;
this.rememberanceTexts[i] = activator.innerHTML.replace(/\s/g, "");
if (this.rememberanceTexts[i] === current) {
selected = i;
}
}
this.show(selected);
}
Accordion.prototype = {
// apply defaults
setOptions: function(options) {
this.options = Object.extend({
// REQUIRED: an array of elements to use as the accordion sections
sections: null,
// a function that locates an activator button element given a section element.
// by default it takes a button id from the section's "activator" attibute
getActivator: function(el) {return document.getElementById(el.getAttribute("activator"))},
// shifts each animator's range, for example with options {from:0,to:100,shift:20}
// the animators' ranges will be 0-100, 20-120, 40-140 etc.
shift: 0,
// the first page to show
initialSection: 0,
// if set to true, document.location.hash will be used to preserve the open section across page reloads
rememberance: true,
// constructor arguments to the Animator objects
animatorOptions: {}
}, options || {});
},
show: function(section) {
for (var i=0; i<this.ans.length; i++) {
this.ans[i].seekTo(i > section ? 1 : 0);
}
if (this.options.rememberance) {
document.location.hash = this.rememberanceTexts[section];
}
}
}

17
js/libs/soundmanager/demo/360-player/script/excanvas.js Normal file
View file

File diff suppressed because one or more lines are too long

BIN
js/libs/soundmanager/demo/_image/360ui-screenshot1.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
js/libs/soundmanager/demo/_image/360ui-screenshot2.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
js/libs/soundmanager/demo/_image/360ui-screenshot3.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 9.7 KiB

BIN
js/libs/soundmanager/demo/_image/360ui-screenshot4.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
js/libs/soundmanager/demo/_image/8tracks-logo.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
js/libs/soundmanager/demo/_image/discogs.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 544 B

BIN
js/libs/soundmanager/demo/_image/flash9-dark.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 240 B

BIN
js/libs/soundmanager/demo/_image/flash9.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 285 B

BIN
js/libs/soundmanager/demo/_image/getsatisfaction-icon.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 89 B

BIN
js/libs/soundmanager/demo/_image/hue_thumb.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 140 B

BIN
js/libs/soundmanager/demo/_image/lastfm.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.2 KiB

BIN
js/libs/soundmanager/demo/_image/mixcrate.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
js/libs/soundmanager/demo/_image/muxtape-logo.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.2 KiB

BIN
js/libs/soundmanager/demo/_image/new-bw.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 201 B

BIN
js/libs/soundmanager/demo/_image/new-dark.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 205 B

BIN
js/libs/soundmanager/demo/_image/new.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 228 B

BIN
js/libs/soundmanager/demo/_image/opera.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
js/libs/soundmanager/demo/_image/picker_thumb.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 136 B

BIN
js/libs/soundmanager/demo/_image/slider-1.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 887 B

BIN
js/libs/soundmanager/demo/_image/slider-bar.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 101 B

BIN
js/libs/soundmanager/demo/_image/slider.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 570 B

BIN
js/libs/soundmanager/demo/_image/soundcloud-thecloudplayer-logo.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 5.8 KiB

BIN
js/libs/soundmanager/demo/_image/speaker.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 6.3 KiB

BIN
js/libs/soundmanager/demo/_image/wedge.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
js/libs/soundmanager/demo/_mp3/1hz-10khz-sweep.mp3 Normal file
View file

Binary file not shown.

BIN
js/libs/soundmanager/demo/_mp3/440hz.mp3 Normal file
View file

Binary file not shown.

BIN
js/libs/soundmanager/demo/_mp3/880hz.mp3 Normal file
View file

Binary file not shown.

BIN
js/libs/soundmanager/demo/_mp3/background0.mp3 Normal file
View file

Binary file not shown.

BIN
js/libs/soundmanager/demo/_mp3/background1.mp3 Normal file
View file

Binary file not shown.

BIN
js/libs/soundmanager/demo/_mp3/background2.mp3 Normal file
View file

Binary file not shown.

BIN
js/libs/soundmanager/demo/_mp3/bass.mp3 Normal file
View file

Binary file not shown.

BIN
js/libs/soundmanager/demo/_mp3/button-0.mp3 Normal file
View file

Binary file not shown.

BIN
js/libs/soundmanager/demo/_mp3/button-1.mp3 Normal file
View file

Binary file not shown.

BIN
js/libs/soundmanager/demo/_mp3/click-high.mp3 Normal file
View file

Binary file not shown.

BIN
js/libs/soundmanager/demo/_mp3/click-low.mp3 Normal file
View file

Binary file not shown.

BIN
js/libs/soundmanager/demo/_mp3/coins.mp3 Normal file
View file

Binary file not shown.

BIN
js/libs/soundmanager/demo/_mp3/fancy-beer-bottle-pop.mp3 Normal file
View file

Binary file not shown.

BIN
js/libs/soundmanager/demo/_mp3/going_outside.mp3 Normal file
View file

Binary file not shown.

BIN
js/libs/soundmanager/demo/_mp3/mak.mp3 Normal file
View file

Binary file not shown.

BIN
js/libs/soundmanager/demo/_mp3/mouseover.mp3 Normal file
View file

Binary file not shown.

BIN
js/libs/soundmanager/demo/_mp3/mouseover2.mp3 Normal file
View file

Binary file not shown.

BIN
js/libs/soundmanager/demo/_mp3/mouseover3.mp3 Normal file
View file

Binary file not shown.

BIN
js/libs/soundmanager/demo/_mp3/office_lobby.mp3 Normal file
View file

Binary file not shown.

BIN
js/libs/soundmanager/demo/_mp3/rain.mp3 Normal file
View file

Binary file not shown.

BIN
js/libs/soundmanager/demo/_mp3/select.mp3 Normal file
View file

Binary file not shown.

BIN
js/libs/soundmanager/demo/_mp3/sine, square, sawtooth, rando.mp3 Normal file
View file

Binary file not shown.

BIN
js/libs/soundmanager/demo/_mp3/walking.mp3 Normal file
View file

Binary file not shown.

74
js/libs/soundmanager/demo/animation-1/css/animation.css Normal file
View file

@ -0,0 +1,74 @@
body {
font-size:75%;
}
h1, h2, h3 {
font:normal 3em "Helvetica Neue",helvetica,georgia,"times new roman","Arial Rounded MT Bold",verdana,tahoma,arial,"sans serif";
font-weight:normal;
margin-bottom:0px;
}
h1, h2 {
letter-spacing:-1px; /* zomg web x.0! ;) */
}
h1, h2, h3 {
padding-bottom:1px;
margin-bottom:0.25em;
}
h1 {
margin-top:0px;
margin-bottom:0px;
background-color:#666;
color:#ccc;
margin-left:-5px;
padding-left:5px;
padding-right:5px;
padding-bottom:5px;
}
h1,
h1 a {
color:#fff;
text-decoration:none;
}
h1 a:hover {
text-decoration:underline;
}
h2 {
font-size:2em;
margin-top:1em;
background-color:#aaa;
color:#fff;
padding:5px;
margin-left:-5px;
min-width:23em;
}
h3 {
font-size:1.65em;
margin-top:0.5em;
margin-bottom:0.25em;
color:#333;
min-width:28em;
}
h3 a {
font-size:small;
}
h4 {
color:#444;
}
p {
font:normal 1em/2em verdana,tahoma,arial,"sans serif";
}
.balls img {
position:absolute;
width:12px;
height:12px;
}

BIN
js/libs/soundmanager/demo/animation-1/image/ball.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 549 B

46
js/libs/soundmanager/demo/animation-1/index.html Normal file
View file

@ -0,0 +1,46 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<link rel="stylesheet" href="../template/template.css" media="screen" />
<link rel="stylesheet" href="css/animation.css" media="screen" />
<script type="text/javascript" src="../../script/soundmanager2-nodebug-jsmin.js"></script>
<script type="text/javascript" src="script/animation.js"></script>
</head>
<body>
<div style="margin-right:43em">
<h1>Interval-based animation (with sound)</h1>
<p>
Click + drag for fun.
</p>
<h2>Speeding Up ExternalInterface: Keep .swf in view</h2>
<p>SoundManager 2 now incorporates a "high performance" mode, which has been shown to noticeably improve timing and frequency of flash callbacks. This is important for timing, reducing delay between a JS call and the sound being played, etc.</p>
<p>To reduce audio delay and timing issues from slow JS/Flash communication, SM2 will try to ensure that the flash movie is visible on screen at all times. If hidden or otherwise off-screen, Flash will be given lower priority and thus JS/flash "lag" (ie., delay) will be introduced when trying to play audio "in sync."</p>
<p>Generally, positioning the flash movie using position:fixed and bottom/left or bottom/right 0px is the less-intrusive option.</p>
<p style="margin:0px;padding:0px">
<input id="useMouse" name="usemouse" value="usemouse" type="checkbox"> Throw from mouse
</p>
<p style="margin:0px;padding:0px">
<button id="b-start" onclick="startAnimation()" disabled="disabled">Start</button>
<button id="b-stop" onclick="stopAnimation()" disabled="disabled">Stop</button>
</p>
<p>Sound source: <a href="http://freesound.iua.upf.edu/samplesViewSingle.php?id=19987">"Acclivity"</a>, Free Sound Project</p>
</div>
<div id="ball-container" class="balls">
<img src="image/ball.gif" alt="" />
</div>
</body>
</html>

189
js/libs/soundmanager/demo/animation-1/script/animation.js Normal file
View file

@ -0,0 +1,189 @@
var balls = [];
var canvasX = 0;
var canvasY = 0;
var timer = null;
var m_lastX = 0;
var m_lastY = 0;
var M_SPACE = 24;
var B_VMIN = 5;
var B_VMAX = 5;
var B_WIDTH = 13;
var B_HEIGHT = 13;
var useMouse = null;
var ballSound = null;
var ballPopSound = null;
function rnd(n) {
return Math.random()*n;
}
function rndI(n) {
return parseInt(rnd(n));
}
function createBall(oParent) {
oParent.appendChild(balls[0].cloneNode(true));
initBall(balls[balls.length-1],balls.length);
}
function createBallAtMouse(e) {
e = e?e:event;
createBall(document.getElementById('ball-container'));
with (balls[balls.length-1]) {
_x = e.clientX;
_y = e.clientY;
if (useMouse.checked != false) {
_vX = (m_lastX-e.clientX)*-0.7;
_vY = (m_lastY-e.clientY)*-0.7;
} else {
_vX = 0;
_vY = 0;
}
}
moveBall(balls[balls.length-1]);
}
function initBall(oBall,i) {
oBall._id = 'ball'+i;
oBall._active = true;
oBall._x = rnd(canvasX);
oBall._y = rnd(canvasY);
oBall._vX = B_VMIN+rnd(B_VMAX)*(Math.random()>0.5?1:-1);
oBall._vY = B_VMIN+rnd(B_VMAX);
oBall.style.display = 'block';
}
function moveBall(oBall) {
oBall._x += oBall._vX;
oBall._y += (oBall._vY++); // gravity!
var bounce = false;
if ((oBall._vX>0 && oBall._x+oBall._vX+B_WIDTH>canvasX) || (oBall._vX<0 && oBall._x+oBall._vX<0)) {
oBall._vX *= -1;
bounce = true;
}
if ((oBall._vY>0 && oBall._y+oBall._vY+B_HEIGHT>canvasY) || (oBall._vY<0 && oBall._y+oBall._vY<0)) {
// bounce on Y axis - with resistance on both axes
if (oBall._vY>0) oBall._y = canvasY-B_HEIGHT; // bounce exactly from bottom
oBall._vY *= -(oBall._vY>1?0.6:1);
bounce = true;
if (Math.abs(oBall._vX)>0.5) {
oBall._vX *= 0.85;
} else {
oBall._vX = 0;
}
if (Math.abs(oBall._vY)<=3 && Math.abs(oBall._vX==0)) {
oBall._active = false;
bounce = false;
ballPopSound.play();
oBall.style.display = 'none';
}
}
oBall.style.left = oBall._x+'px';
oBall.style.top = oBall._y+'px';
if (bounce) ballSound.play({pan:getPan(oBall._x,canvasX)});
}
function getPan(x,canvasX) {
var pos = x/canvasX;
var pan = null;
if (pos<=0.4) {
pan = Math.floor(-100+(pos/0.4*100));
} else if (pos>0.4 && pos<=0.5) {
pan = 0;
} else {
pan = Math.floor(pos*100);
}
return pan;
}
function animateStuff() {
for (var i=balls.length; i--;) {
if (balls[i]._active) moveBall(balls[i]);
}
}
function startAnimation() {
if (!timer) timer = setInterval(animateStuff,20);
document.getElementById('b-start').disabled = true;
document.getElementById('b-stop').disabled = false;
}
function stopAnimation() {
if (!timer) return false;
clearInterval(timer);
timer = null;
document.getElementById('b-start').disabled = false;
document.getElementById('b-stop').disabled = true;
}
function mouseDown(e) {
e = e?e:event;
m_lastX = e.clientX;
m_lastY = e.clientY;
document.onmousemove = mouseMove;
document.onmouseup = mouseUp;
return false;
}
function mouseMove(e) {
e = e?e:event;
if (Math.abs(e.clientX-m_lastX)>M_SPACE || Math.abs(e.clientY-m_lastY)>M_SPACE) {
createBallAtMouse(e);
m_lastX = e.clientX;
m_lastY = e.clientY;
}
return false;
}
function mouseUp() {
document.onmousemove = null;
document.onmouseup = null;
}
function init() {
ballSound = soundManager.createSound({
id: 'ballSound',
url: '../animation/audio/fingerplop.mp3',
volume: 50,
multiShot: true,
autoLoad: true
});
ballPopSound = soundManager.createSound({
id: 'ballPopSound',
url: '../animation/audio/fingerplop2.mp3',
volume: 50,
multiShot: true,
autoLoad: true
});
balls = document.getElementById('ball-container').getElementsByTagName('img');
for (var i=balls.length; i--;) {
initBall(balls[i],i);
}
useMouse = document.getElementById('useMouse');
useMouse.checked = true;
getWindowCoords();
startAnimation();
document.onmousedown = mouseDown;
}
// I know this is kinda broken in Opera.
getWindowCoords = (navigator.userAgent.toLowerCase().indexOf('opera')>0||navigator.appVersion.toLowerCase().indexOf('safari')!=-1)?function() {
canvasX = window.innerWidth;
canvasY = window.innerHeight;
}:function() {
canvasX = document.documentElement.clientWidth||document.body.clientWidth||document.body.scrollWidth;
canvasY = document.documentElement.clientHeight||document.body.clientHeight||document.body.scrollHeight;
}
window.onresize = getWindowCoords;
soundManager.flashVersion = 9;
soundManager.url = '../../swf/';
soundManager.useHighPerformance = true;
soundManager.debugMode = false; // disable debug mode
soundManager.defaultOptions.multiShot = true;
soundManager.onload = function() {
// soundManager is ready to use (create sounds and so on)
init();
}

BIN
js/libs/soundmanager/demo/animation-2a/bg-land.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
js/libs/soundmanager/demo/animation-2a/bg-sky.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
js/libs/soundmanager/demo/animation-2a/cursor-10.cur Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.2 KiB

BIN
js/libs/soundmanager/demo/animation-2a/cursor-11.cur Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.9 KiB

BIN
js/libs/soundmanager/demo/animation-2a/cursor-3.cur Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 4.2 KiB

Some files were not shown because too many files have changed in this diff Show more