Remove whitespace [Gun.io WhitespaceBot]
This commit is contained in:
parent
dddebaa8a8
commit
2b2bf47f55
45 changed files with 562 additions and 563 deletions
|
@ -37,7 +37,7 @@
|
|||
|
||||
#background {
|
||||
background: transparent url(../images/debug-bg.jpg) repeat 0 0;
|
||||
z-index: 0;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
#ground { z-index: 30; }
|
||||
|
@ -45,7 +45,7 @@
|
|||
|
||||
|
||||
/* The Ship */
|
||||
#game #ship {
|
||||
#game #ship {
|
||||
position: absolute;
|
||||
display: none;
|
||||
top:0;
|
||||
|
@ -53,7 +53,7 @@
|
|||
background: transparent;
|
||||
}
|
||||
|
||||
#ship .wing {
|
||||
#ship .wing {
|
||||
position: absolute;
|
||||
top:33px;
|
||||
left:6px;
|
||||
|
@ -240,7 +240,7 @@
|
|||
|
||||
#game-over #share-buttons {
|
||||
position: relative;
|
||||
display: block;
|
||||
display: block;
|
||||
text-align: center;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
@ -255,7 +255,7 @@
|
|||
position: relative;
|
||||
display: block;
|
||||
opacity: 0.1;
|
||||
outline: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#game-over #share-buttons a img { border:none; outline: none; }
|
||||
|
|
36
index.html
36
index.html
|
@ -2,28 +2,28 @@
|
|||
<html xmlns="http://www.w3.org/1999/xhtml"
|
||||
xmlns:og="http://opengraphprotocol.org/schema/"
|
||||
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" />
|
||||
|
||||
<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." />
|
||||
|
||||
<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:image" content="http://www.html5place.com/lab/wyrian/images/Wyrian-screenshot.png" />
|
||||
<meta property="og:url" content="http://www.html5place.com/lab/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."/>
|
||||
|
||||
<!-- Stylesheets -->
|
||||
<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" >
|
||||
</head>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Game Intro -->
|
||||
|
@ -31,7 +31,7 @@
|
|||
<div class="text orbitron">Wyrian</div>
|
||||
<div id="start-game" class="orbitron">Play</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Game Over -->
|
||||
<div id="game-over">
|
||||
<div class="text orbitron">GAME OVER</div>
|
||||
|
@ -45,7 +45,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Scene -->
|
||||
<div class="container" id="GameContainer">
|
||||
<div id="background" class="layout"></div>
|
||||
|
@ -68,40 +68,40 @@
|
|||
<div class="orbitron" id="fpsCounter">FPS : <span>0</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="soundManager" class=""></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.2e</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>
|
||||
|
||||
|
||||
<!-- Main JS Libs -->
|
||||
<script type="text/javascript" src="js/libs/jquery-1.5.js"></script>
|
||||
<script type="text/javascript" src="js/libs/require.js"></script>
|
||||
|
||||
|
||||
<!-- Sound Library -->
|
||||
<script type="text/javascript" src="js/libs/soundmanager/script/soundmanager2.js"></script>
|
||||
<script type="text/javascript" src="js/sounds.load.js"></script>
|
||||
|
||||
|
||||
<!-- Game Libs -->
|
||||
<script type="text/javascript" src="js/GameClass.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>
|
||||
|
||||
|
||||
<!-- 1x1 stat pixel -->
|
||||
<img src="/t/?action=WyrianGame&u=http%3A%2F%2Fwww.html5place.com%2Flab%2Fwyrian%2F" />
|
||||
|
||||
|
|
|
@ -8,50 +8,50 @@ var Game = null ;
|
|||
|
||||
// -- Init scene prototype
|
||||
var app = function(opts) {
|
||||
|
||||
|
||||
this.name = "Wyrian - A Tyrian Arcade Game Clone" ;
|
||||
this.version = '0.2a' ;
|
||||
|
||||
|
||||
// Init uniqId
|
||||
this.uniqId = 0 ;
|
||||
|
||||
|
||||
// Default settings
|
||||
var settings = {
|
||||
libs: {}
|
||||
} ;
|
||||
$.extend(true, settings, opts);
|
||||
this.settings = settings ;
|
||||
|
||||
|
||||
// Set Scene size
|
||||
this.width = $(document).width() ;
|
||||
this.height = $(document).height() ;
|
||||
|
||||
|
||||
// Listen for inputs
|
||||
this.input = new this.Input() ;
|
||||
|
||||
|
||||
// Return object
|
||||
return this;
|
||||
} ;
|
||||
|
||||
// -- Bind init call
|
||||
app.prototype.init = function() {
|
||||
|
||||
|
||||
var self = this ;
|
||||
|
||||
|
||||
require({
|
||||
baseUrl: "js/",
|
||||
urlArgs: "bust=" + GameVersion
|
||||
},
|
||||
|
||||
|
||||
// -- Layout to load
|
||||
self.settings.layers,
|
||||
|
||||
|
||||
// -- All objects are loaded => can run
|
||||
function() {
|
||||
$(document).trigger('gameLoaded') ;
|
||||
}
|
||||
);
|
||||
|
||||
);
|
||||
|
||||
if ( typeof this.settings.init == 'function') {
|
||||
this.settings.init() ;
|
||||
}
|
||||
|
@ -65,8 +65,8 @@ app.prototype.log = function(txt) {
|
|||
}
|
||||
|
||||
// -- Call all canvas updates if declared as 'running'
|
||||
app.prototype.loopAnimation = function() {
|
||||
|
||||
app.prototype.loopAnimation = function() {
|
||||
|
||||
// -- Search for elements that have to be updated
|
||||
Game.activeElements = 0 ;
|
||||
for ( var i in Layouts ) {
|
||||
|
@ -75,10 +75,10 @@ app.prototype.loopAnimation = function() {
|
|||
_layout.update() ;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// -- Get level
|
||||
Level = Math.floor((Game.score||0)/1000) ;
|
||||
|
||||
|
||||
// -- Create ennemies if needed
|
||||
var numEnnemies = 0 ;
|
||||
if ( Layouts.Ennemies ) {
|
||||
|
@ -90,10 +90,10 @@ app.prototype.loopAnimation = function() {
|
|||
Layouts.Ennemies.createRandom() ;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// -- Init loops counter
|
||||
Game.loops = Game.loops||0 ;
|
||||
|
||||
|
||||
// -- Init vars
|
||||
if ( Game.loops == 0 ) {
|
||||
this.frameCount = 0;
|
||||
|
@ -101,7 +101,7 @@ app.prototype.loopAnimation = function() {
|
|||
this.maxfps = 1 / (FPS / 1000);
|
||||
this.lastTime = new Date();
|
||||
}
|
||||
|
||||
|
||||
// -- Calculate time deltas and find fps value
|
||||
var nowTime = new Date();
|
||||
var diffTime = Math.ceil((nowTime.getTime() - this.lastTime.getTime()));
|
||||
|
@ -111,10 +111,10 @@ app.prototype.loopAnimation = function() {
|
|||
this.lastTime = nowTime;
|
||||
}
|
||||
this.frameCount++;
|
||||
|
||||
|
||||
// -- Increase loop counter
|
||||
Game.loops++ ;
|
||||
|
||||
|
||||
// -- Refresh Scores and HUD informations
|
||||
$('#score span').html(Game.score) ;
|
||||
$('#activeElements span').html(Game.activeElements) ;
|
||||
|
@ -142,7 +142,7 @@ app.prototype.Input = function() {
|
|||
if(e.keyCode==32) {
|
||||
that.keyboard['space'] = val;
|
||||
e.preventDefault() ;
|
||||
e.stopPropagation() ;
|
||||
e.stopPropagation() ;
|
||||
}
|
||||
if(e.keyCode==17)
|
||||
that.keyboard['ctrl'] = val;
|
||||
|
|
|
@ -5,20 +5,20 @@ Layouts.Background = new Layout({
|
|||
// -- Define elements to draw with options
|
||||
el: [{
|
||||
id: 'ground',
|
||||
animate: function(obj) {
|
||||
animate: function(obj) {
|
||||
obj.y -= obj.parent.settings.speed*obj.parent.settings.direction;
|
||||
obj.parent.settings.dom.css({backgroundPosition: '0 '+obj.y+'px'}) ;
|
||||
obj.nodraw = true ;
|
||||
}
|
||||
}],
|
||||
|
||||
|
||||
// -- Define current Speed
|
||||
speed: 5,
|
||||
direction: -1,
|
||||
nomove: true,
|
||||
|
||||
|
||||
// -- Define canvas parent
|
||||
dom: $('div#background')
|
||||
|
||||
|
||||
}) ;
|
||||
|
||||
|
|
|
@ -5,14 +5,14 @@ Layouts.Ennemies = new Layout({
|
|||
// -- Define elements to draw with options
|
||||
el: [],
|
||||
images: ['images/sprites/alien_1.png?_=1', 'images/sprites/alien_2.png?_=1', 'images/sprites/explosion-sprite.png' ],
|
||||
|
||||
|
||||
// -- Define current Speed
|
||||
speed: 7,
|
||||
direction: 1,
|
||||
|
||||
|
||||
// -- Define canvas parent
|
||||
dom: $('div#ground')
|
||||
|
||||
|
||||
}) ;
|
||||
|
||||
// -- Restart enemy
|
||||
|
@ -28,7 +28,7 @@ Layouts.Ennemies.reinitObj = function(obj) {
|
|||
// -- Create a random ennemy
|
||||
Layouts.Ennemies.createRandom = function(opts) {
|
||||
var self = this ;
|
||||
|
||||
|
||||
var libsAlien = [
|
||||
{
|
||||
width: 80,
|
||||
|
@ -43,10 +43,10 @@ Layouts.Ennemies.createRandom = function(opts) {
|
|||
sprites: [0]
|
||||
}
|
||||
] ;
|
||||
|
||||
|
||||
// Choose one in the lib
|
||||
var alien = libsAlien[Math.floor(Math.random()*libsAlien.length)] ;
|
||||
|
||||
|
||||
// Construct global properties
|
||||
alien.name = 'ennemy' ;
|
||||
alien.type = 'alien' ;
|
||||
|
@ -60,7 +60,7 @@ Layouts.Ennemies.createRandom = function(opts) {
|
|||
obj.explosing = true ;
|
||||
obj.box.hide(0);
|
||||
obj = self.reinitObj(obj);
|
||||
|
||||
|
||||
Game.score = Game.score || 0 ;
|
||||
Game.score += obj.settings.power ;
|
||||
} ;
|
||||
|
@ -84,8 +84,8 @@ Layouts.Ennemies.createExplosion = function(object) {
|
|||
|
||||
var self = this ;
|
||||
var explosion = {
|
||||
name: 'explosion',
|
||||
type: 'neutral',
|
||||
name: 'explosion',
|
||||
type: 'neutral',
|
||||
width:330,
|
||||
height:330,
|
||||
imageSrc: self.settings.images[2],
|
||||
|
@ -95,19 +95,19 @@ Layouts.Ennemies.createExplosion = function(object) {
|
|||
obj.settings.spriteMod = 5 ;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
var newObj = this.createObj(explosion) ;
|
||||
self.els.push(newObj) ;
|
||||
|
||||
|
||||
if ( timers.playSoundExplode ) clearTimeout(timers.playSoundExplode) ;
|
||||
timers.playSoundExplode = setTimeout(function() {
|
||||
soundManager.play('explode') ;
|
||||
}, 1000/FPS) ;
|
||||
|
||||
|
||||
setTimeout(function() {
|
||||
newObj.deleteObj() ;
|
||||
if ( ! Layouts.Player.running )
|
||||
if ( ! Layouts.Player.running )
|
||||
$(document).trigger('gameComplete') ;
|
||||
}, 500) ;
|
||||
|
||||
|
||||
} ;
|
||||
|
|
|
@ -9,20 +9,20 @@ var Layout = function(opts) {
|
|||
dom: null
|
||||
} ;
|
||||
$.extend(settings, opts) ;
|
||||
|
||||
|
||||
// -- Set running or not
|
||||
this.running = true ;
|
||||
|
||||
|
||||
// -- Store settings
|
||||
this.settings = settings ;
|
||||
|
||||
this.settings = settings ;
|
||||
|
||||
// -- Declare Scene here
|
||||
this.dom = this.settings.dom.get(0) ;
|
||||
|
||||
|
||||
// -- Set width and height shortcuts
|
||||
this.width = this.settings.dom.width() ;
|
||||
this.height = this.settings.dom.height() ;
|
||||
|
||||
|
||||
// -- Create objects in scene
|
||||
this.els = [] ;
|
||||
if ( typeof settings.el == 'object' ) {
|
||||
|
@ -30,9 +30,9 @@ var Layout = function(opts) {
|
|||
this.els.push(this.createObj(settings.el[i])) ;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
return this;
|
||||
};
|
||||
};
|
||||
|
||||
// -- Update elements into layout
|
||||
Layout.prototype.update = function() {
|
||||
|
@ -42,8 +42,8 @@ Layout.prototype.update = function() {
|
|||
if( ! _el.deleteAfter ) {
|
||||
_el.animate() ;
|
||||
}
|
||||
else {
|
||||
_el.box.addClass('removed').remove() ;
|
||||
else {
|
||||
_el.box.addClass('removed').remove() ;
|
||||
delete this.els[j] ;
|
||||
}
|
||||
}
|
||||
|
@ -52,23 +52,23 @@ Layout.prototype.update = function() {
|
|||
|
||||
// -- Create an object
|
||||
Layout.prototype.createObj = function(opts) {
|
||||
|
||||
|
||||
var self = this ;
|
||||
|
||||
// -- Init and build Framebuffer object
|
||||
var Obj = function (optsObj) {
|
||||
|
||||
|
||||
// -- Parse options
|
||||
var settingsObj = {
|
||||
origin: { x: 0, y: 0},
|
||||
imageSrc: false,
|
||||
backgroundColor: 'transparent',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
backgroundPosition: '0 0',
|
||||
backgroundColor: 'transparent',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
backgroundPosition: '0 0',
|
||||
imageOrigin: { x:0, y:0 }
|
||||
} ;
|
||||
$.extend(true, settingsObj, optsObj) ;
|
||||
|
||||
|
||||
// -- Store options
|
||||
this.parent = self ;
|
||||
this.name = settingsObj.name || 'default' ;
|
||||
|
@ -76,7 +76,7 @@ Layout.prototype.createObj = function(opts) {
|
|||
this.width = settingsObj.width ? settingsObj.width : self.width ;
|
||||
this.height = settingsObj.height ? settingsObj.height : self.height ;
|
||||
this.settings = settingsObj ;
|
||||
|
||||
|
||||
// -- Find backgroundImage in CSS if specified
|
||||
if ( ! settingsObj.imageSrc ) {
|
||||
var bgImg = self.settings.dom.css('backgroundImage') ;
|
||||
|
@ -84,67 +84,67 @@ Layout.prototype.createObj = function(opts) {
|
|||
settingsObj.imageSrc = bgImg ;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// -- Init position
|
||||
this.init() ;
|
||||
|
||||
|
||||
// -- Create a DOM object
|
||||
this.box = $('#'+this.id) ;
|
||||
this.dynamic = false ;
|
||||
this.cssObj = {} ;
|
||||
if ( ! this.box.length ) {
|
||||
|
||||
|
||||
this.box = $('<div>', {
|
||||
'class':'sprite '+this.name,
|
||||
'id': this.id
|
||||
}) ;
|
||||
|
||||
|
||||
this.cssObj = {
|
||||
position: 'absolute',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
display: 'block',
|
||||
backgroundColor: settingsObj.backgroundColor,
|
||||
backgroundColor: settingsObj.backgroundColor,
|
||||
backgroundRepeat: settingsObj.backgroundRepeat,
|
||||
backgroundPosition: settingsObj.backgroundPosition,
|
||||
backgroundImage: settingsObj.imageSrc ? 'url('+settingsObj.imageSrc+')' : ''
|
||||
} ;
|
||||
|
||||
|
||||
this.dynamic = true ;
|
||||
}
|
||||
|
||||
|
||||
// -- Apply CSS
|
||||
this.cssObj.width = this.width ;
|
||||
this.cssObj.height = this.height ;
|
||||
|
||||
|
||||
// -- Move
|
||||
if ( ! this.settings.nomove ) {
|
||||
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
|
||||
Obj.prototype.init = function() {
|
||||
this.x = this.settings.origin.x ;
|
||||
this.y = this.settings.origin.y ;
|
||||
} ;
|
||||
|
||||
} ;
|
||||
|
||||
// -- Return instance
|
||||
Obj.prototype.getInstance = function() {
|
||||
return this;
|
||||
} ;
|
||||
|
||||
|
||||
// -- Draw object into scene
|
||||
Obj.prototype.draw = function() {
|
||||
if ( (this.y >= -2*this.height) && (this.y <= (Game.height+this.height)) && this.x >= -this.width && this.x <= (Game.width+this.width) ) {
|
||||
|
||||
|
||||
Game.activeElements++ ;
|
||||
|
||||
|
||||
// -- Set sprite to display
|
||||
if ( this.settings.sprites ) {
|
||||
this.lastSprite = this.lastSprite || 0 ;
|
||||
|
@ -152,7 +152,7 @@ Layout.prototype.createObj = function(opts) {
|
|||
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'}) ;
|
||||
}
|
||||
|
||||
|
||||
// -- Move div
|
||||
if ( ! this.settings.nomove ) {
|
||||
if ( this.settings.moveParent ) {
|
||||
|
@ -162,30 +162,30 @@ Layout.prototype.createObj = function(opts) {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
} ;
|
||||
|
||||
|
||||
// -- Animate the Framebuffer into the scene
|
||||
Obj.prototype.animate = function() {
|
||||
|
||||
Obj.prototype.animate = function() {
|
||||
|
||||
// -- Execute custom animate function if specified
|
||||
if ( $.isFunction(this.settings.animate) ) {
|
||||
this.parent = self ;
|
||||
this.settings.animate(this) ;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// -- Detect collision
|
||||
this.detectCollision() ;
|
||||
|
||||
|
||||
// -- Apply effects
|
||||
if ( ! this.nodraw ) this.draw() ;
|
||||
} ;
|
||||
|
||||
|
||||
// -- Detect collision
|
||||
Obj.prototype.detectCollision = function() {
|
||||
|
||||
|
||||
var obj = self ;
|
||||
|
||||
|
||||
// -- Detect collisions
|
||||
for ( var i in Layouts ) {
|
||||
var _layout = Layouts[i] ;
|
||||
|
@ -193,53 +193,53 @@ Layout.prototype.createObj = function(opts) {
|
|||
for ( var j in _layout.els ) {
|
||||
var el = _layout.els[j],
|
||||
type = el.name ;
|
||||
|
||||
|
||||
// -- Detect only defined types
|
||||
if (! el.deleteAfter && ! el.explosing && type != 'neutral' ) {
|
||||
|
||||
if (! el.deleteAfter && ! el.explosing && type != 'neutral' ) {
|
||||
|
||||
if ( (type == 'ennemy' || type == 'bullet' || type == 'ship') ) {
|
||||
|
||||
|
||||
var A = {
|
||||
x: this.x,
|
||||
y: this.y,
|
||||
xX: this.x+this.width,
|
||||
yY: this.y+this.height
|
||||
} ;
|
||||
|
||||
|
||||
var B = {
|
||||
x: el.x,
|
||||
y: el.y,
|
||||
xX: el.x + el.width,
|
||||
yY: el.y + el.height
|
||||
yY: el.y + el.height
|
||||
} ;
|
||||
|
||||
|
||||
// -- Test if in viewport
|
||||
if ( (type != this.name) && (this.name != 'default' && this.name != 'explosion') && (el.settings.type != this.settings.type) ) {
|
||||
|
||||
var touchTopRight = (
|
||||
( B.x <= A.xX && B.x >= A.x )
|
||||
&&
|
||||
( B.yY >= A.y) && ( B.yY <= A.yY )
|
||||
|
||||
var touchTopRight = (
|
||||
( B.x <= A.xX && B.x >= A.x )
|
||||
&&
|
||||
( B.yY >= A.y) && ( B.yY <= A.yY )
|
||||
) ? true : false ;
|
||||
|
||||
var touchTopLeft = (
|
||||
( B.x >= A.x && B.x <= A.xX )
|
||||
&&
|
||||
( B.yY >= A.y) && ( B.yY <= A.yY )
|
||||
|
||||
var touchTopLeft = (
|
||||
( B.x >= A.x && B.x <= A.xX )
|
||||
&&
|
||||
( B.yY >= A.y) && ( B.yY <= A.yY )
|
||||
) ? true : false ;
|
||||
|
||||
var touchBottomRight = (
|
||||
( B.x >= A.x && B.x <= A.xX )
|
||||
&&
|
||||
( B.y >= A.yY) && ( B.y <= A.y )
|
||||
|
||||
var touchBottomRight = (
|
||||
( B.x >= A.x && B.x <= A.xX )
|
||||
&&
|
||||
( B.y >= A.yY) && ( B.y <= A.y )
|
||||
) ? true : false ;
|
||||
|
||||
var touchBottomLeft = (
|
||||
( B.xX >= A.x && B.xX <= A.xX )
|
||||
&&
|
||||
( B.y >= A.yY) && ( B.y <= A.y )
|
||||
) ? true : false ;
|
||||
|
||||
|
||||
var touchBottomLeft = (
|
||||
( B.xX >= A.x && B.xX <= A.xX )
|
||||
&&
|
||||
( B.y >= A.yY) && ( B.y <= A.y )
|
||||
) ? true : false ;
|
||||
|
||||
if ( touchTopRight || touchTopLeft || touchBottomRight || touchBottomLeft ) {
|
||||
if ( typeof el.settings.explode == 'function' ) {
|
||||
el.settings.explode(el) ;
|
||||
|
@ -247,24 +247,24 @@ Layout.prototype.createObj = function(opts) {
|
|||
if ( typeof this.settings.explode == 'function' ) {
|
||||
this.settings.explode(this) ;
|
||||
}
|
||||
|
||||
|
||||
Game.log('█▬█ █ ▀█▀') ;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
} ;
|
||||
|
||||
|
||||
// -- Remove object
|
||||
Obj.prototype.deleteObj = function() {
|
||||
this.deleteAfter = true ;
|
||||
}
|
||||
|
||||
|
||||
return new Obj(opts) ;
|
||||
};
|
||||
};
|
||||
|
|
|
@ -15,14 +15,14 @@ Layouts.Player = new Layout({
|
|||
y: Game.height-220
|
||||
},
|
||||
fireInterval: 300,
|
||||
explode: function(obj) {
|
||||
explode: function(obj) {
|
||||
if ( ! obj ) return false ;
|
||||
obj.explosing = true ;
|
||||
Layouts.Ennemies.createExplosion(obj) ;
|
||||
Layouts.Player.running = false ;
|
||||
},
|
||||
animate: function(obj) {
|
||||
|
||||
animate: function(obj) {
|
||||
|
||||
// -- KEY up /down
|
||||
if ( Game.input.keyboard.up ) {
|
||||
if ( obj.y > 0 ) obj.y -= obj.parent.settings.speed ;
|
||||
|
@ -30,15 +30,15 @@ Layouts.Player = new Layout({
|
|||
if ( Game.input.keyboard.down && (obj.y < (Game.height-obj.height) ) ) {
|
||||
obj.y += obj.parent.settings.speed;
|
||||
}
|
||||
|
||||
|
||||
// -- Left/Right move : choose sprite sequence to display
|
||||
if ( Game.input.keyboard.left && (obj.x > 0)) {
|
||||
obj.x -= obj.parent.settings.speed;
|
||||
}
|
||||
}
|
||||
if ( Game.input.keyboard.right && (obj.x < Game.width-obj.width) ) {
|
||||
obj.x += obj.parent.settings.speed;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// -- Press Space : fire
|
||||
if ( Game.input.keyboard.space ) {
|
||||
obj.parent.fire(obj) ;
|
||||
|
@ -46,7 +46,7 @@ Layouts.Player = new Layout({
|
|||
|
||||
}
|
||||
}, {
|
||||
|
||||
|
||||
id: 'ship_reactor',
|
||||
width: 44,
|
||||
height: 68,
|
||||
|
@ -60,21 +60,21 @@ Layouts.Player = new Layout({
|
|||
obj.settings.sprites = [2,3,4] ;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}],
|
||||
|
||||
|
||||
// -- Define current Speed
|
||||
speed: 20,
|
||||
direction: 1,
|
||||
|
||||
|
||||
// -- Define canvas parent
|
||||
dom: $('div#game')
|
||||
|
||||
|
||||
}) ;
|
||||
|
||||
// -- Bullets types
|
||||
Layouts.Player.bulletLib = function(obj, bulletType) {
|
||||
|
||||
|
||||
var bulletConf = {
|
||||
power: 40,
|
||||
imageSrc: 'images/bullet-electric-sprite.png',
|
||||
|
@ -83,15 +83,15 @@ Layouts.Player.bulletLib = function(obj, bulletType) {
|
|||
direction: -1,
|
||||
type: 'human',
|
||||
name: 'bullet',
|
||||
explode: function(obj) {
|
||||
explode: function(obj) {
|
||||
if ( ! obj ) return false ;
|
||||
obj.explosing = true ;
|
||||
obj.deleteAfter = true ;
|
||||
},
|
||||
origin: {x:0, y:0}
|
||||
} ;
|
||||
|
||||
// -- Default Left
|
||||
|
||||
// -- Default Left
|
||||
if ( bulletType == 'weapon_pilot' ) {
|
||||
bulletConf.width = 16 ;
|
||||
bulletConf.height = 64 ;
|
||||
|
@ -100,7 +100,7 @@ Layouts.Player.bulletLib = function(obj, bulletType) {
|
|||
bulletConf.origin.x = obj.x-6+obj.width/2 ;
|
||||
bulletConf.origin.y = obj.y - bulletConf.height ;
|
||||
}
|
||||
|
||||
|
||||
// -- Big Left
|
||||
if ( bulletType == 'big_left' ) {
|
||||
bulletConf.width = 60 ;
|
||||
|
@ -109,7 +109,7 @@ Layouts.Player.bulletLib = function(obj, bulletType) {
|
|||
bulletConf.origin.x = obj.x+18+obj.width/2 ;
|
||||
bulletConf.origin.y = obj.y + 50 - bulletConf.height ;
|
||||
}
|
||||
|
||||
|
||||
// -- Big Left
|
||||
if ( bulletType == 'big_right' ) {
|
||||
bulletConf.width = 60 ;
|
||||
|
@ -118,12 +118,12 @@ Layouts.Player.bulletLib = function(obj, bulletType) {
|
|||
bulletConf.origin.x = obj.x-75+obj.width/2 ;
|
||||
bulletConf.origin.y = obj.y + 50 - bulletConf.height ;
|
||||
}
|
||||
|
||||
|
||||
// -- The animate function
|
||||
bulletConf.animate = function(obj) {
|
||||
if ( obj.deleteAfter ) return false;
|
||||
if ( obj.explosing ) {
|
||||
|
||||
|
||||
Game.log(obj) ;
|
||||
return false ;
|
||||
}
|
||||
|
@ -132,25 +132,25 @@ Layouts.Player.bulletLib = function(obj, bulletType) {
|
|||
obj.deleteObj() ;
|
||||
}
|
||||
} ;
|
||||
|
||||
|
||||
// Add the bullet to display
|
||||
return this.createObj(bulletConf) ;
|
||||
|
||||
|
||||
} ;
|
||||
|
||||
// -- Fire bullets on space bar
|
||||
Layouts.Player.fire = function(obj) {
|
||||
|
||||
|
||||
// Get now time and lastfired
|
||||
this.now = (new Date().getTime()) ;
|
||||
this.lastFired = this.lastFired || this.now ;
|
||||
|
||||
|
||||
// If firing, wait for next interval
|
||||
if ( (this.now-this.lastFired) < (obj.settings.fireInterval) ) return false;
|
||||
|
||||
|
||||
// Store now for last fired event
|
||||
this.lastFired = this.now ;
|
||||
|
||||
|
||||
// Create new bullets
|
||||
var bullets = [] ;
|
||||
bullets.push(this.bulletLib(obj, 'weapon_pilot')) ;
|
||||
|
@ -159,7 +159,7 @@ Layouts.Player.fire = function(obj) {
|
|||
for ( var i in bullets ) {
|
||||
this.els.push(bullets[i]) ;
|
||||
}
|
||||
|
||||
|
||||
// Play sound
|
||||
soundManager.play('shoot') ;
|
||||
}
|
||||
|
|
82
js/libs/jquery-1.5.js
vendored
82
js/libs/jquery-1.5.js
vendored
|
@ -2680,7 +2680,7 @@ jQuery.Event = function( src ) {
|
|||
|
||||
// Events bubbling up the document may have been marked as prevented
|
||||
// by a handler lower down the tree; reflect the correct value.
|
||||
this.isDefaultPrevented = (src.defaultPrevented || src.returnValue === false ||
|
||||
this.isDefaultPrevented = (src.defaultPrevented || src.returnValue === false ||
|
||||
src.getPreventDefault && src.getPreventDefault()) ? returnTrue : returnFalse;
|
||||
|
||||
// Event type
|
||||
|
@ -2954,8 +2954,8 @@ if ( document.addEventListener ) {
|
|||
jQuery.event.special[ fix ] = {
|
||||
setup: function() {
|
||||
this.addEventListener( orig, handler, true );
|
||||
},
|
||||
teardown: function() {
|
||||
},
|
||||
teardown: function() {
|
||||
this.removeEventListener( orig, handler, true );
|
||||
}
|
||||
};
|
||||
|
@ -3289,7 +3289,7 @@ var Sizzle = function( selector, context, results, seed ) {
|
|||
if ( context.nodeType !== 1 && context.nodeType !== 9 ) {
|
||||
return [];
|
||||
}
|
||||
|
||||
|
||||
if ( !selector || typeof selector !== "string" ) {
|
||||
return results;
|
||||
}
|
||||
|
@ -3299,7 +3299,7 @@ var Sizzle = function( selector, context, results, seed ) {
|
|||
contextXML = Sizzle.isXML( context ),
|
||||
parts = [],
|
||||
soFar = selector;
|
||||
|
||||
|
||||
// Reset the position of the chunker regexp (start from head)
|
||||
do {
|
||||
chunker.exec( "" );
|
||||
|
@ -3307,9 +3307,9 @@ var Sizzle = function( selector, context, results, seed ) {
|
|||
|
||||
if ( m ) {
|
||||
soFar = m[3];
|
||||
|
||||
|
||||
parts.push( m[1] );
|
||||
|
||||
|
||||
if ( m[2] ) {
|
||||
extra = m[3];
|
||||
break;
|
||||
|
@ -3333,7 +3333,7 @@ var Sizzle = function( selector, context, results, seed ) {
|
|||
if ( Expr.relative[ selector ] ) {
|
||||
selector += parts.shift();
|
||||
}
|
||||
|
||||
|
||||
set = posProcess( selector, set );
|
||||
}
|
||||
}
|
||||
|
@ -3462,7 +3462,7 @@ Sizzle.find = function( expr, context, isXML ) {
|
|||
for ( var i = 0, l = Expr.order.length; i < l; i++ ) {
|
||||
var match,
|
||||
type = Expr.order[i];
|
||||
|
||||
|
||||
if ( (match = Expr.leftMatch[ type ].exec( expr )) ) {
|
||||
var left = match[1];
|
||||
match.splice( 1, 1 );
|
||||
|
@ -3791,7 +3791,7 @@ var Expr = Sizzle.selectors = {
|
|||
|
||||
ATTR: function( match, curLoop, inplace, result, not, isXML ) {
|
||||
var name = match[1] = match[1].replace(/\\/g, "");
|
||||
|
||||
|
||||
if ( !isXML && Expr.attrMap[name] ) {
|
||||
match[1] = Expr.attrMap[name];
|
||||
}
|
||||
|
@ -3825,7 +3825,7 @@ var Expr = Sizzle.selectors = {
|
|||
} else if ( Expr.match.POS.test( match[0] ) || Expr.match.CHILD.test( match[0] ) ) {
|
||||
return true;
|
||||
}
|
||||
|
||||
|
||||
return match;
|
||||
},
|
||||
|
||||
|
@ -3835,7 +3835,7 @@ var Expr = Sizzle.selectors = {
|
|||
return match;
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
filters: {
|
||||
enabled: function( elem ) {
|
||||
return elem.disabled === false && elem.type !== "hidden";
|
||||
|
@ -3848,12 +3848,12 @@ var Expr = Sizzle.selectors = {
|
|||
checked: function( elem ) {
|
||||
return elem.checked === true;
|
||||
},
|
||||
|
||||
|
||||
selected: function( elem ) {
|
||||
// Accessing this property makes selected-by-default
|
||||
// options in Safari work properly
|
||||
elem.parentNode.selectedIndex;
|
||||
|
||||
|
||||
return elem.selected === true;
|
||||
},
|
||||
|
||||
|
@ -3979,21 +3979,21 @@ var Expr = Sizzle.selectors = {
|
|||
case "only":
|
||||
case "first":
|
||||
while ( (node = node.previousSibling) ) {
|
||||
if ( node.nodeType === 1 ) {
|
||||
return false;
|
||||
if ( node.nodeType === 1 ) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
if ( type === "first" ) {
|
||||
return true;
|
||||
if ( type === "first" ) {
|
||||
return true;
|
||||
}
|
||||
|
||||
node = elem;
|
||||
|
||||
case "last":
|
||||
while ( (node = node.nextSibling) ) {
|
||||
if ( node.nodeType === 1 ) {
|
||||
return false;
|
||||
if ( node.nodeType === 1 ) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -4006,22 +4006,22 @@ var Expr = Sizzle.selectors = {
|
|||
if ( first === 1 && last === 0 ) {
|
||||
return true;
|
||||
}
|
||||
|
||||
|
||||
var doneName = match[0],
|
||||
parent = elem.parentNode;
|
||||
|
||||
|
||||
if ( parent && (parent.sizcache !== doneName || !elem.nodeIndex) ) {
|
||||
var count = 0;
|
||||
|
||||
|
||||
for ( node = parent.firstChild; node; node = node.nextSibling ) {
|
||||
if ( node.nodeType === 1 ) {
|
||||
node.nodeIndex = ++count;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
parent.sizcache = doneName;
|
||||
}
|
||||
|
||||
|
||||
var diff = elem.nodeIndex - last;
|
||||
|
||||
if ( first === 0 ) {
|
||||
|
@ -4040,7 +4040,7 @@ var Expr = Sizzle.selectors = {
|
|||
TAG: function( elem, match ) {
|
||||
return (match === "*" && elem.nodeType === 1) || elem.nodeName.toLowerCase() === match;
|
||||
},
|
||||
|
||||
|
||||
CLASS: function( elem, match ) {
|
||||
return (" " + (elem.className || elem.getAttribute("class")) + " ")
|
||||
.indexOf( match ) > -1;
|
||||
|
@ -4106,7 +4106,7 @@ var makeArray = function( array, results ) {
|
|||
results.push.apply( results, array );
|
||||
return results;
|
||||
}
|
||||
|
||||
|
||||
return array;
|
||||
};
|
||||
|
||||
|
@ -4353,7 +4353,7 @@ if ( document.querySelectorAll ) {
|
|||
if ( div.querySelectorAll && div.querySelectorAll(".TEST").length === 0 ) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
Sizzle = function( query, context, extra, seed ) {
|
||||
context = context || document;
|
||||
|
||||
|
@ -4362,24 +4362,24 @@ if ( document.querySelectorAll ) {
|
|||
if ( !seed && !Sizzle.isXML(context) ) {
|
||||
// See if we find a selector to speed up
|
||||
var match = /^(\w+$)|^\.([\w\-]+$)|^#([\w\-]+$)/.exec( query );
|
||||
|
||||
|
||||
if ( match && (context.nodeType === 1 || context.nodeType === 9) ) {
|
||||
// Speed-up: Sizzle("TAG")
|
||||
if ( match[1] ) {
|
||||
return makeArray( context.getElementsByTagName( query ), extra );
|
||||
|
||||
|
||||
// Speed-up: Sizzle(".CLASS")
|
||||
} else if ( match[2] && Expr.find.CLASS && context.getElementsByClassName ) {
|
||||
return makeArray( context.getElementsByClassName( match[2] ), extra );
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
if ( context.nodeType === 9 ) {
|
||||
// Speed-up: Sizzle("body")
|
||||
// The body element only exists once, optimize finding it
|
||||
if ( query === "body" && context.body ) {
|
||||
return makeArray( [ context.body ], extra );
|
||||
|
||||
|
||||
// Speed-up: Sizzle("#ID")
|
||||
} else if ( match && match[3] ) {
|
||||
var elem = context.getElementById( match[3] );
|
||||
|
@ -4392,12 +4392,12 @@ if ( document.querySelectorAll ) {
|
|||
if ( elem.id === match[3] ) {
|
||||
return makeArray( [ elem ], extra );
|
||||
}
|
||||
|
||||
|
||||
} else {
|
||||
return makeArray( [], extra );
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
try {
|
||||
return makeArray( context.querySelectorAll(query), extra );
|
||||
} catch(qsaError) {}
|
||||
|
@ -4434,7 +4434,7 @@ if ( document.querySelectorAll ) {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
return oldSizzle(query, context, extra, seed);
|
||||
};
|
||||
|
||||
|
@ -4456,7 +4456,7 @@ if ( document.querySelectorAll ) {
|
|||
// This should fail with an exception
|
||||
// Gecko does not error, returns false instead
|
||||
matches.call( document.documentElement, "[test!='']:sizzle" );
|
||||
|
||||
|
||||
} catch( pseudoError ) {
|
||||
pseudoWorks = true;
|
||||
}
|
||||
|
@ -4467,7 +4467,7 @@ if ( document.querySelectorAll ) {
|
|||
expr = expr.replace(/\=\s*([^'"\]]*)\s*\]/g, "='$1']");
|
||||
|
||||
if ( !Sizzle.isXML( node ) ) {
|
||||
try {
|
||||
try {
|
||||
if ( pseudoWorks || !Expr.match.PSEUDO.test( expr ) && !/!=/.test( expr ) ) {
|
||||
return matches.call( node, expr );
|
||||
}
|
||||
|
@ -4496,7 +4496,7 @@ if ( document.querySelectorAll ) {
|
|||
if ( div.getElementsByClassName("e").length === 1 ) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
Expr.order.splice(1, 0, "CLASS");
|
||||
Expr.find.CLASS = function( match, context, isXML ) {
|
||||
if ( typeof context.getElementsByClassName !== "undefined" && !isXML ) {
|
||||
|
@ -4547,7 +4547,7 @@ function dirCheck( dir, cur, doneName, checkSet, nodeCheck, isXML ) {
|
|||
|
||||
if ( elem ) {
|
||||
var match = false;
|
||||
|
||||
|
||||
elem = elem[dir];
|
||||
|
||||
while ( elem ) {
|
||||
|
@ -4600,7 +4600,7 @@ if ( document.documentElement.contains ) {
|
|||
|
||||
Sizzle.isXML = function( elem ) {
|
||||
// documentElement is verified for cases where it doesn't yet exist
|
||||
// (such as loading iframes in IE - #4833)
|
||||
// (such as loading iframes in IE - #4833)
|
||||
var documentElement = (elem ? elem.ownerDocument || elem : 0).documentElement;
|
||||
|
||||
return documentElement ? documentElement.nodeName !== "HTML" : false;
|
||||
|
@ -5910,7 +5910,7 @@ if ( document.defaultView && document.defaultView.getComputedStyle ) {
|
|||
|
||||
if ( document.documentElement.currentStyle ) {
|
||||
currentStyle = function( elem, name ) {
|
||||
var left,
|
||||
var left,
|
||||
ret = elem.currentStyle && elem.currentStyle[ name ],
|
||||
rsLeft = elem.runtimeStyle && elem.runtimeStyle[ name ],
|
||||
style = elem.style;
|
||||
|
|
2
js/libs/jquery.transform-0.9.3.min.js
vendored
2
js/libs/jquery.transform-0.9.3.min.js
vendored
File diff suppressed because one or more lines are too long
|
@ -88,7 +88,7 @@ pre.block {
|
|||
<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>
|
||||
|
|
|
@ -101,7 +101,7 @@ pre.block {
|
|||
</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° Player Demo</a>: JS + Canvas Visualization</h1>
|
||||
|
@ -209,19 +209,19 @@ pre.block {
|
|||
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>
|
||||
|
@ -232,13 +232,13 @@ pre.block {
|
|||
</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>
|
||||
|
@ -253,7 +253,7 @@ pre.block {
|
|||
<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>
|
||||
|
@ -263,10 +263,10 @@ pre.block {
|
|||
<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>
|
||||
|
||||
|
||||
|
@ -316,15 +316,15 @@ pre.block {
|
|||
</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';
|
||||
document.getElementById('config-ui').style.display = 'block';
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
/*
|
||||
/*
|
||||
|
||||
-------------------------------------------------------------
|
||||
|
||||
|
@ -28,7 +28,7 @@ h1 {
|
|||
}
|
||||
|
||||
h1, h2 {
|
||||
letter-spacing:-1px; /* zomg web x.0! ;) */
|
||||
letter-spacing:-1px; /* zomg web x.0! ;) */
|
||||
}
|
||||
|
||||
h2 {
|
||||
|
|
|
@ -70,7 +70,7 @@ pre.block {
|
|||
<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>
|
||||
|
@ -96,17 +96,17 @@ pre.block {
|
|||
|
||||
<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><div class="<span>ui360</span>">
|
||||
<a href="/path/to/an.mp3">
|
||||
</div></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>
|
||||
|
@ -115,7 +115,7 @@ pre.block {
|
|||
<span><span><-- dynamically-inserted block --></span></span>
|
||||
<div class="<span>ui</span>">
|
||||
<canvas class="<span>sm2-canvas</span>"></canvas>
|
||||
<img class="<span>sm2-360btn</span>" />
|
||||
<img class="<span>sm2-360btn</span>" />
|
||||
<div class="<span>sm2-timing</span>"></div>
|
||||
<div class="<span>sm2-cover</span>"></div>
|
||||
</div>
|
||||
|
|
|
@ -9,7 +9,7 @@ h1, h2, h3 {
|
|||
}
|
||||
|
||||
h1, h2 {
|
||||
letter-spacing:-1px; /* zomg web x.0! ;) */
|
||||
letter-spacing:-1px; /* zomg web x.0! ;) */
|
||||
}
|
||||
|
||||
h1, h2, h3 {
|
||||
|
|
|
@ -10,7 +10,7 @@
|
|||
<body>
|
||||
|
||||
<div style="margin-right:43em">
|
||||
|
||||
|
||||
<h1>Interval-based animation (with sound)</h1>
|
||||
|
||||
<p>
|
||||
|
|
|
@ -28,7 +28,7 @@ h1 {
|
|||
}
|
||||
|
||||
h1, h2 {
|
||||
letter-spacing:-1px; /* zomg web x.0! ;) */
|
||||
letter-spacing:-1px; /* zomg web x.0! ;) */
|
||||
}
|
||||
|
||||
h2 {
|
||||
|
@ -226,7 +226,7 @@ function Cursor() {
|
|||
|
||||
window.onresize = this.refreshCoords;
|
||||
_id('overlay').onmousedown = this.mousedown;
|
||||
_id('overlay').onmouseup = this.mouseup;
|
||||
_id('overlay').onmouseup = this.mouseup;
|
||||
document.onmousemove = this.mousemove;
|
||||
|
||||
}
|
||||
|
|
|
@ -17,7 +17,7 @@ h1 {
|
|||
}
|
||||
|
||||
h1, h2 {
|
||||
letter-spacing:-1px; /* zomg web x.0! ;) */
|
||||
letter-spacing:-1px; /* zomg web x.0! ;) */
|
||||
}
|
||||
|
||||
h2 {
|
||||
|
|
|
@ -97,7 +97,7 @@ soundManager.consoleOnly = false;
|
|||
|
||||
soundManager.onready(function(oStatus) {
|
||||
if (!oStatus.success) {
|
||||
return false;
|
||||
return false;
|
||||
}
|
||||
// soundManager is initialised, ready to use. Create a sound for this demo page.
|
||||
|
||||
|
@ -211,7 +211,7 @@ soundManager.onerror = function() {
|
|||
<p>SoundManager first processes the <code>onready</code> or <code>ontimeout</code> queue in the order items were added, and then fires <code>soundManager.onload()</code> or <code>onerror()</code>. If you call <code>onready()</code> after SM2 has loaded, your callback will be fired immediately.</p>
|
||||
|
||||
<h2>A note about initialization</h2>
|
||||
|
||||
|
||||
<p class="compact">Keep in mind SoundManager's core methods (createSound, etc.) will not be available until soundManager.onload() fires. The initialization time for SM2 can vary across browsers/platforms, and should effectively be assumed to be "asynchronous." Because of this, it is recommended you write your code to handle soundManager.onload() being called either before or after window.onload().</p>
|
||||
<p class="compact">If you wish to have SM2 always wait for window.onload() before calling soundManager.onload()/onerror(), you can apply the following:</p>
|
||||
<pre>soundManager.waitForWindowLoad = true;</pre>
|
||||
|
@ -354,7 +354,7 @@ s.play({
|
|||
<button onclick="return doEval(document.getElementById('demo4e').innerHTML);return false">Do this</button>
|
||||
<p>onposition() allows you to add an event listener for a given time (in miliseconds, watching the position property); the event fires when that time has been reached while a sound is playing.</p>
|
||||
<p>Note that for multiShot cases, the listeners will only fire for the original (first) shot because its position is the only one that is tracked within Flash.</p>
|
||||
|
||||
|
||||
<h2>Demo 5a: Set sound parameters, then play</h2>
|
||||
<pre class="block"><code>var sound = soundManager.getSoundById('<span>chinaCymbal</span>'); <span><span>// predefined/preloaded sound</span></span>
|
||||
sound.setPosition(<span>500</span>); <span><span>// 500 msec into sound</span></span>
|
||||
|
|
|
@ -24,7 +24,7 @@ soundManager.url = '../../swf/';
|
|||
<body>
|
||||
|
||||
<div>
|
||||
|
||||
|
||||
<h1><a href="http://www.schillmania.com/projects/soundmanager2/">SoundManager 2</a>: Flashblock / "click to flash" handling: Basic Demo</h1>
|
||||
|
||||
<div id="sm2-container">
|
||||
|
|
|
@ -30,7 +30,7 @@
|
|||
#sm2-container.swf_timedout,
|
||||
#sm2-container.swf_timedout object,
|
||||
#sm2-container.swf_timedout embed {
|
||||
/*
|
||||
/*
|
||||
when SM2 didn't start normally, time-out case. flash blocked, missing SWF, no flash?
|
||||
48px square flash placeholder is typically used by blockers.
|
||||
*/
|
||||
|
|
|
@ -49,7 +49,7 @@ soundManager.onready(function(){
|
|||
<body>
|
||||
|
||||
<div style="margin:1em;max-width:60em;font-size:110%">
|
||||
|
||||
|
||||
<h1><a href="http://www.schillmania.com/projects/soundmanager2/">SoundManager 2</a>: Flashblock / "click to flash" handling demos</h1>
|
||||
|
||||
<h3>Show SWF inline, wait indefinitely for load (click-to-run or whitelist)</h3>
|
||||
|
@ -83,9 +83,9 @@ soundManager.onready(function(){
|
|||
<div id="sm2-container">
|
||||
<!-- flash is appended here -->
|
||||
</div>
|
||||
|
||||
|
||||
<h3 id="flashblock-css">Flash Block-related CSS</h3>
|
||||
|
||||
|
||||
<p>When <code>soundManager.useFlashBlock</code> is enabled, CSS is applied to <code>#sm2-container</code> depending on the progress of SM2's start-up.</p>
|
||||
<p>This page + demos use the rules below, fully-defined and commented in <a href="flashblock.css">flashblock.css</a>. Use it as a base for your own SM2 + flash block implementations.</p>
|
||||
|
||||
|
@ -116,7 +116,7 @@ soundManager.onready(function(){
|
|||
}</code></pre>
|
||||
|
||||
<h3>Basic Demo</h3>
|
||||
|
||||
|
||||
<p>For a more minimal example, see the <a href="basic.html" title="SoundManager 2: Basic Flashblock handling demo">basic flashblock demo</a>.</p>
|
||||
|
||||
|
||||
</div>
|
||||
|
|
|
@ -46,7 +46,7 @@ soundManager.ontimeout(function(){
|
|||
<body>
|
||||
|
||||
<div style="margin:1em;max-width:60em;font-size:110%">
|
||||
|
||||
|
||||
<h1><a href="http://www.schillmania.com/projects/soundmanager2/">SoundManager 2</a>: Flashblock / "click to flash" handling demos</h1>
|
||||
|
||||
<h3>Show SWF inline, wait indefinitely for load</h3>
|
||||
|
@ -64,13 +64,13 @@ soundManager.ontimeout(function(){
|
|||
#sm2-container.high_performance {<span><span>/* Additional modifier for "high performance" mode, should apply position:fixed and left/bottom 0 to stay on-screen at all times (better flash performance) */</span></span>}
|
||||
#sm2-container.flash_debug {<span><span>/* Additional modifier for flash debug output mode, should use width/height 100% so you can read debug messages */</span></span>}
|
||||
#sm2-container.swf_error {<span><span>/* Additional modifier, "something really broke" (fatal: security, missing SWF etc.) */</span></span>}</code></pre>
|
||||
|
||||
|
||||
<p>SoundManager 2 load status: <b id="sm2-status">Loading...</b></p>
|
||||
|
||||
|
||||
<p>Take a look at <a href="flashblock.css">flashblock.css</a> for implementation details.</p>
|
||||
|
||||
<div id="sm2-container">
|
||||
<!-- flash is appended here -->
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
|
|
@ -204,7 +204,7 @@ pre {
|
|||
pre span,
|
||||
code span,
|
||||
dt span {
|
||||
color:#339933;
|
||||
color:#339933;
|
||||
}
|
||||
|
||||
pre span span,
|
||||
|
@ -742,7 +742,7 @@ ul.standard ul {
|
|||
}
|
||||
|
||||
.c3 h2 .l.flat,
|
||||
.wedge .l.flat,
|
||||
.wedge .l.flat,
|
||||
.c3 h2 .r.flat,
|
||||
.wedge .r.flat {
|
||||
background-image:none;
|
||||
|
@ -810,7 +810,7 @@ ul.standard ul {
|
|||
height:1.67em;
|
||||
padding:0.25em 0.5em;
|
||||
padding:0px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.c3 h4 {
|
||||
|
|
|
@ -5,7 +5,7 @@
|
|||
<title>SoundManager 2 Demo: Basic MP3 Play Button (Simple Demo)</title>
|
||||
<style type="text/css">
|
||||
|
||||
/*
|
||||
/*
|
||||
|
||||
-------------------------------------------------------------
|
||||
|
||||
|
|
|
@ -6,7 +6,7 @@
|
|||
<meta name="robots" content="noindex" />
|
||||
<style type="text/css">
|
||||
|
||||
/*
|
||||
/*
|
||||
|
||||
-------------------------------------------------------------
|
||||
|
||||
|
@ -32,7 +32,7 @@ h1, h2, h3 {
|
|||
}
|
||||
|
||||
h1, h2 {
|
||||
letter-spacing:-1px; /* zomg web x.0! ;) */
|
||||
letter-spacing:-1px; /* zomg web x.0! ;) */
|
||||
margin-top:0.5em;
|
||||
}
|
||||
|
||||
|
@ -98,7 +98,7 @@ pre code {
|
|||
<body>
|
||||
|
||||
<div id="left">
|
||||
|
||||
|
||||
<h1><a href="http://www.schillmania.com/projects/soundmanager2/" title="Play MP3s inline with javascript using SoundManager 2">SoundManager 2</a> / Inline MP3 Player Button</h1>
|
||||
|
||||
<h2 style="display:inline">Basic MP3 Play Button Examples</h2> (also see <a title="MP3 Play Button, Basic Example demo" href="basic.html">basic demo</a>.)
|
||||
|
@ -164,9 +164,9 @@ pre code {
|
|||
</code></pre>
|
||||
|
||||
<h3>Other Options</h3>
|
||||
|
||||
|
||||
<p>By default, one sound will be played at a time; you can easily change a "config" object value to turn on playlist-like behaviour (i.e., play the next MP3 when the current one finishes.)</p>
|
||||
|
||||
|
||||
<pre>
|
||||
<code>
|
||||
// (within mp3-player-button.js)
|
||||
|
|
|
@ -5,7 +5,7 @@
|
|||
<title>SoundManager 2 Demo: Play MP3 links on a page, "page as playlist" style</title>
|
||||
<style type="text/css">
|
||||
|
||||
/*
|
||||
/*
|
||||
|
||||
-------------------------------------------------------------
|
||||
|
||||
|
@ -68,7 +68,7 @@ function setTheme(sTheme) {
|
|||
</ul>
|
||||
|
||||
<p>For alternate themes, add the class to the playlist UL - eg. <a href="#" onclick="return setTheme('dark')"><ul class="playlist dark"></a> or <a href="#" onclick="return setTheme('bubblegum')"><ul class="playlist bubblegum"></a>; the base default is <a href="#" onclick="return setTheme()"><ul class="playlist"></a>.</p>
|
||||
|
||||
|
||||
<p>A reminder that if loading from the local filesystem, Flash will deny access to remote (network/internet) URLs by default unless whitelisted via the <a href="http://www.macromedia.com/support/documentation/en/flashplayer/help/settings_manager04.html">Flash Player Global Security Settings Page</a>. Some URLs in this example are remote to demonstrate this.</p>
|
||||
|
||||
<p>Note that by default, the Flash 8 version is used and therefore Flash 9-only features such as the VU meter, waveform etc. are not available. Refer to the main "page player" demo for configuration examples, or view the source of page-player.js for the configuration object (similar to that used in SoundManager 2 itself.)</p>
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
/*
|
||||
/*
|
||||
-----------------------------------------------------------------
|
||||
In-page demo CSS for code, documentation etc.
|
||||
See page-player.css for actual playlist-relevant stuff.
|
||||
|
@ -20,7 +20,7 @@ h1, h2, h3 {
|
|||
}
|
||||
|
||||
h1, h2 {
|
||||
letter-spacing:-1px; /* zomg web x.0! ;) */
|
||||
letter-spacing:-1px; /* zomg web x.0! ;) */
|
||||
}
|
||||
|
||||
h1, h2, h3 {
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
/*
|
||||
/*
|
||||
---------------------------------
|
||||
-- alternate (optional) themes --
|
||||
---------------------------------
|
||||
|
|
|
@ -107,7 +107,7 @@ var PP_CONFIG = {
|
|||
<p>Clicking a title will start loading + playing, or pause, a sound.</p>
|
||||
<p>Once loading, click (or click and drag) on the loading/position bar to seek within the sound.</p>
|
||||
<p>The document title reflects the currently-playing sound, and by default the list will play sequentially if left alone. (This is configurable.)</p>
|
||||
|
||||
|
||||
<h3>Themes</h3>
|
||||
<p>Just for fun, a few color schemes (visible when playing/paused):</p>
|
||||
<ul class="themes">
|
||||
|
@ -116,7 +116,7 @@ var PP_CONFIG = {
|
|||
<li><a href="#" onclick="return setTheme('bubblegum')"><ul class="playlist bubblegum"></a> - ZOMG PONIES!!!ONEONEONE</li>
|
||||
<li><a href="#" onclick="return setTheme('')"><ul class="playlist"></a> (default)</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<form style="margin:0px;padding:0px" action="#" onsubmit="return false">
|
||||
<div>
|
||||
<input id="makeShiny" name="makeShiny" type="checkbox" onchange="setShiny(this.checked)" value="Shiny" /> <label for="makeShiny">Also add "shiny", eg. <ul class="shiny playlist">...</label>
|
||||
|
|
|
@ -5,7 +5,7 @@
|
|||
<title>SoundManager 2 Demo: Play MP3 Links on a page</title>
|
||||
<style type="text/css">
|
||||
|
||||
/*
|
||||
/*
|
||||
|
||||
-------------------------------------------------------------
|
||||
|
||||
|
|
|
@ -6,7 +6,7 @@
|
|||
<meta name="robots" content="noindex" />
|
||||
<style type="text/css">
|
||||
|
||||
/*
|
||||
/*
|
||||
|
||||
-------------------------------------------------------------
|
||||
|
||||
|
@ -32,7 +32,7 @@ h1, h2, h3 {
|
|||
}
|
||||
|
||||
h1, h2 {
|
||||
letter-spacing:-1px; /* zomg web x.0! ;) */
|
||||
letter-spacing:-1px; /* zomg web x.0! ;) */
|
||||
margin-top:0.5em;
|
||||
}
|
||||
|
||||
|
@ -99,7 +99,7 @@ p {
|
|||
<body>
|
||||
|
||||
<div id="left">
|
||||
|
||||
|
||||
<h1><a href="http://www.schillmania.com/projects/soundmanager2/" title="Play MP3s inline with javascript using SoundManager 2">SoundManager 2</a> / Make MP3 links play in-place</h1>
|
||||
|
||||
<h2>Inline MP3 Player Example: Fancy* CSS 3 version</h2>
|
||||
|
@ -209,9 +209,9 @@ p {
|
|||
</pre>
|
||||
|
||||
<h3>Other Options</h3>
|
||||
|
||||
|
||||
<p>By default, one sound will be played at a time; you can easily change a "config" object value to turn on playlist-like behaviour (i.e., play the next MP3 when the current one finishes.)</p>
|
||||
|
||||
|
||||
<pre>
|
||||
// (within inlineplayer.js)
|
||||
this.config = {
|
||||
|
|
|
@ -101,7 +101,7 @@ window.onload = function() {
|
|||
|
||||
<div style="margin-right:43em">
|
||||
<h1>SoundManager 2: Lazy Loading Example</h1>
|
||||
<p>This is an example of dynamically loading SoundManager 2 using JS, after window.onload() has fired.</p>
|
||||
<p>This is an example of dynamically loading SoundManager 2 using JS, after window.onload() has fired.</p>
|
||||
<h2>How it works</h2>
|
||||
<p>This page waits until window.onload(), delays 1 second and loads soundmanager2.js, which should then start up.</p>
|
||||
|
||||
|
@ -202,7 +202,7 @@ window.onload = function() {</span>
|
|||
<pre><code>window.SM2_DEFER = true;
|
||||
<span>// some time later, manually start SM2...</span>
|
||||
soundManager = new SoundManager();
|
||||
soundManager.beginDelayedInit(); <span>// ensure SM2 begins its init process, in the event dom ready / window.load() have already passed</span></code></pre>
|
||||
soundManager.beginDelayedInit(); <span>// ensure SM2 begins its init process, in the event dom ready / window.load() have already passed</span></code></pre>
|
||||
|
||||
<h2 style="margin-top:1em">Disabling debug output</h2>
|
||||
<p>SoundManager 2 will write to a debug <div> element or a javascript console if available, by default. To disable it, simply set the relevant property to false:</p>
|
||||
|
@ -212,7 +212,7 @@ soundManager.beginDelayedInit(); <span>// ensure SM2 begins its init process, in
|
|||
<p>If SM2 is failing to start and throwing errors due to flash security, timeouts or other issues, check out the <a href="../../doc/getstarted/#troubleshooting" title="SoundManager 2 troubleshooting tool" onclick="if (!document.domain) this.href=this.href.replace(/\#/,'index.html#')">troubleshooting tool</a> which can help you fix things.</p>
|
||||
<h2>No-debug, compressed version of soundmanager2.js</h2>
|
||||
<p>Once development is finished, you can also use the "minified" (60% smaller) version of SM2, which has debug output and comments removed for you: <a href="../../script/soundmanager2-nodebug-jsmin.js">soundmanager2-nodebug-jsmin.js</a>. If you can, serve this with gzip compression for even greater bandwidth savings!</p>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
|
|
@ -14,7 +14,7 @@
|
|||
// Previous notes, courtesy Jacob Seidelin ...
|
||||
|
||||
// This fails to load in Firefox 3.6 (Win7) but will load after one of the following changes:
|
||||
// 1. Remove the doctype or set it to eg.
|
||||
// 1. Remove the doctype or set it to eg.
|
||||
// <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
||||
// 2. Set soundManager.useHighPerformance = false
|
||||
// 3. Set soundManager.debugFlash = true
|
||||
|
|
|
@ -42,7 +42,7 @@ soundManager.onload = function() {
|
|||
|
||||
<div style="margin-right:43em">
|
||||
<h1>SoundManager 2 Template Example</h1>
|
||||
<p>This is a basic template for adding SoundManager to your page.</p>
|
||||
<p>This is a basic template for adding SoundManager to your page.</p>
|
||||
<h2>How it works</h2>
|
||||
<p>This page includes the SM2 script, which starts up on its own as appropriate. By default it will try to start as soon as possible.</p>
|
||||
<p>The minimal code needed to get SoundManager 2 going is below, with <em><em>configurable parts</em></em>:</p>
|
||||
|
@ -130,7 +130,7 @@ soundManager.ontimeout(function() {
|
|||
<p>If SM2 is failing to start and throwing errors due to flash security, timeouts or other issues, check out the <a href="../../doc/getstarted/#troubleshooting" title="SoundManager 2 troubleshooting tool" onclick="if (!document.domain) this.href=this.href.replace(/\#/,'index.html#')">troubleshooting tool</a> which can help you fix things.</p>
|
||||
<h2>No-debug, compressed version of soundmanager2.js</h2>
|
||||
<p>Once development is finished, you can also use the "minified" (down to 10% of original size with gzip!) version of SM2, which has debug output and comments removed for you: <a href="../../script/soundmanager2-nodebug-jsmin.js">soundmanager2-nodebug-jsmin.js</a>. Serve with gzip compression wherever possible for best bandwidth savings.</p>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
|
|
@ -24,7 +24,7 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<div id="content">
|
||||
|
||||
<div id="top">
|
||||
|
@ -72,7 +72,7 @@
|
|||
<li><a href="../#smsoundmethods">Sound Object (SMSound) API</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
|
||||
<li>
|
||||
<strong><a href="#">Download</a></strong>
|
||||
<ul>
|
||||
|
@ -80,7 +80,7 @@
|
|||
<li><a href="#revision-history">Revision History</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
|
||||
<li>
|
||||
<a href="../technotes/">Technical Notes</a>
|
||||
<ul>
|
||||
|
@ -102,7 +102,7 @@
|
|||
</ul>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div id="main" class="triple">
|
||||
|
@ -121,38 +121,38 @@
|
|||
</div>
|
||||
|
||||
<div id="newest" class="columnar">
|
||||
|
||||
|
||||
<div class="c1">
|
||||
<h2>Get SoundManager 2</h2>
|
||||
<p>Get the latest and greatest.</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="c2">
|
||||
<h3>Download SoundManager 2</h3>
|
||||
<p><b>Latest changes:</b> Simplified <code>onready()</code> behaviour (see <a href="#sm2-20110101-api" class="warning">potential <code>onready()</code> regression note</a>), new <code>ontimeout()</code> handler, Webkit + MovieStar 30-second-pause fix. See <a href="#history">revision history</a> for details.</p>
|
||||
|
||||
|
||||
<p style="padding-top:0.5em"><a href="../../download/soundmanagerv297a-20110101.zip" title="Download SoundManager 2" class="norewrite feature">Download SoundManager 2.97a.20110101</a></p>
|
||||
<p style="padding-top:0.5em">Also on Github (dev branches, forks etc.): <a href="http://github.com/scottschiller/SoundManager2">http://github.com/scottschiller/SoundManager2</a> - Related: <a href="http://www.flickr.com/photos/schill/5305386425/">A year of commits</a> (Gource visualization)</p>
|
||||
<p><b>Performance tip:</b> SM2's code size varies from 90 KB (debug) down to 10 KB (optimized) over HTTP; check the <a href="../getstarted/#basic-inclusion" title="Including SoundManager 2 on your site: Script build options">pre-optimized builds</a> for details.</p>
|
||||
<p><b>Side reading:</b> <a href="http://24ways.org/2010/the-state-of-html5-audio">"Probably, Maybe, No": The State of HTML5 Audio</a>, an article written for 24ways.org touching on some of the current issues and future promise of audio in HTML.</p>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div id="history" class="columnar">
|
||||
|
||||
|
||||
<div class="c1">
|
||||
<h2>Revision History</h2>
|
||||
<p>Latest changes and archived notes from bug fixes, API updates, feature development etc.</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="c2">
|
||||
|
||||
|
||||
<div class="f-block c-revision-history">
|
||||
|
||||
<h3 id="revision-history">Revision History</h3>
|
||||
|
||||
|
||||
<p>A changelog of sorts.</p>
|
||||
|
||||
<ul id="revision-list" class="standard">
|
||||
|
@ -160,9 +160,9 @@
|
|||
<li class="in">
|
||||
<h3><b>V2.97a.20110101</b> - Simplified <code>onready()</code> behaviour (see <a href="#sm2-20110101-api" class="warning">potential <code>onready()</code> regression note</a>), new <code>ontimeout()</code> handler, Webkit + MovieStar 30-second-pause fix</h3>
|
||||
<p><code>onready()</code> is now called only for SM2 init success (makes default case easier, no need for "supported" check) - new <code>ontimeout()</code> is called only for failure case, ie., flash blocked/missing. Special Webkit/MovieStar won't-resume-after-30-seconds-paused fix. <code>soundManager.supported()</code> renamed to <code>soundManager.ok()</code> (old method aliased for the time being.)</p>
|
||||
|
||||
|
||||
<ul class="double">
|
||||
|
||||
|
||||
<li class="in">
|
||||
<p class="compact">Bug fixes</p>
|
||||
<ul class="nested compact flat">
|
||||
|
@ -210,7 +210,7 @@ soundManager.ontimeout(function(){
|
|||
<li>Code cleanup: Took the unsupported "jsAMP" demo (2007 prototype) out back and shot it.</li>
|
||||
<li>360° UI demo: New "allowMultiple" config option, let 2+ sounds play at once etc. (Default: false, one at a time.)</li>
|
||||
<li>360° UI, canvas visualization demo: Minor layout, UI, code tweaks</li>
|
||||
<li>API/docs/demos reference and use updated onready()/ontimeout() methods.</li>
|
||||
<li>API/docs/demos reference and use updated onready()/ontimeout() methods.</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
|
@ -220,9 +220,9 @@ soundManager.ontimeout(function(){
|
|||
<li class="in">
|
||||
<h3><b>V2.97a.20101221</b> - HTML5 loading/progress and RTMP tweaks, <code>onready()</code> double-firing fix, <code>hasPriority</code> for mobile flash, Muxtape-style player now AJAX-friendly (<a href="../../download/soundmanagerv297a-20101221.zip" title="Download SoundManager 2" class="norewrite">Download archived version</a>)</h3>
|
||||
<p>Improved HTML5 <code>whileloading()</code> / <code>whileplaying()</code>, <code>unload</code> and event handling. <code>hasPriority</code> for off-screen SWF loading on mobile, replaces old mobileFlash positioning tricks. Effectively re-wrote page player (Muxtape-style) demo to use event delegation + read live DOM, so should not break in AJAX cases. RTMP <code>onplay()</code> / <code>play()</code> / <code>buffering</code> fixes, <code>setPosition()</code> regression fix.</p>
|
||||
|
||||
|
||||
<ul class="double">
|
||||
|
||||
|
||||
<li class="in">
|
||||
<p class="compact">Bug fixes</p>
|
||||
<ul class="nested compact flat">
|
||||
|
@ -265,9 +265,9 @@ soundManager.ontimeout(function(){
|
|||
<li class="in">
|
||||
<h3><b>V2.97a.20101010</b> - Code cleanup, HTML5 audio tweaks, merged RTMP fork, removal of experimental video, optional usePolicyFile crossdomain.xml feature (<a href="../../download/soundmanagerv297a-20101010.zip">Download archived version</a>)</h3>
|
||||
<p>Shuffling of SoundManager 2 core, approximately 5% shaved off full debug-enabled file size after bug fixes, additional comments, new features and so on. Internal event handling code cleaned up. .SWF builds optimized, Flash 9 non-debug version now under 10 KB. Debug version now flash debugger-enabled. Merged GitHub user kjvarga's RTMP fork including improvements for Red5 + Flash Media Server streaming cases - buffering, event and state handling. Experimental video feature is toast, createVideo() no longer implemented. iPhone + iPad touch events on page player + 360° player UI demos; tap and drag to seek, etc.</p>
|
||||
|
||||
|
||||
<ul class="double">
|
||||
|
||||
|
||||
<li class="in">
|
||||
<p class="compact">Bug fixes</p>
|
||||
<ul class="nested compact flat">
|
||||
|
@ -313,9 +313,9 @@ soundManager.ontimeout(function(){
|
|||
<li class="in">
|
||||
<h3><b>V2.96a.20100822</b> - HTML5 audio support no longer alpha, Safari 5.0.1/SL HTML5 audio issues continue, iPad/iPhone "play through", Flash tweak for Android (<a href="../../download/soundmanagerv296a-20100822.zip">Download archived version</a>)</h3>
|
||||
<p><code>useHTML5Audio</code> feature now considered beta-worthy, though disabled by default to be safe (with the exception of iPhone + iPad.) iPhone/iPad will now play a sequence of sounds, user interaction only required to start first one. Flash on-screen positioning tweak for Android devices that run Flash. Safari 5.0.1 on Snow Leopard exhibits same buggy HTML5 audio issue, disabled by default; Apple have been notified. IE 9 "Platform Preview 4" has <code><audio></code> but no <code>Audio()</code> support (yet?) See <a href="https://connect.microsoft.com/IE/feedback/details/586311/audio-but-no-audio-support">bug #586311</a> (may require connect.microsoft.com / Windows Live ID, login first etc.)</p>
|
||||
|
||||
|
||||
<ul class="double">
|
||||
|
||||
|
||||
<li class="in">
|
||||
<p class="compact">Bug fixes</p>
|
||||
<ul class="nested compact flat">
|
||||
|
@ -346,11 +346,11 @@ soundManager.ontimeout(function(){
|
|||
|
||||
<li class="in">
|
||||
<h3><b>V2.96a.20100624</b> - Safari 5/Snow Leopard 10.6.3/10.6.4 HTML5 Audio() issue, X-domain SWF build fixes (<a href="../../download/soundmanagerv296a-20100624.zip">Download archived version</a>)</h3>
|
||||
|
||||
|
||||
<p>Disabling HTML5 Audio for Safari 5 on Snow Leopard 10.6.3 + 10.6.4 (current release) only, as it is broken similar to Safari 4.x (also on Snow Leopard only.) Related bug: <a href="https://bugs.webkit.org/show_bug.cgi?id=32159#c14">#32519</a>. Also, version info in SWFs and fixed X-domain SWF build.</p>
|
||||
|
||||
|
||||
<ul class="double">
|
||||
|
||||
|
||||
<li class="in">
|
||||
<p class="compact">Bug fixes</p>
|
||||
<ul class="nested compact flat">
|
||||
|
@ -371,16 +371,16 @@ soundManager.ontimeout(function(){
|
|||
|
||||
<li class="in">
|
||||
<h3><b>V2.96a.20100606</b> - RTMP (Flash Media Server) Support, HTML5 Updates (<a href="../../download/soundmanagerv295b-20100606.zip">Download archived version</a>)</h3>
|
||||
|
||||
|
||||
<p>HTML5 update, new RTMP feature: Experimental Flash Media Server support, <code>onposition()</code> event listener, SMSound <code>type</code> option and code cleanup.</p>
|
||||
|
||||
|
||||
<ul class="double">
|
||||
|
||||
|
||||
<li class="in">
|
||||
<p class="compact">API Updates</p>
|
||||
<ul class="nested compact flat">
|
||||
<li>New experimental <a href="../#smsound-serverurl" title="SMSound serverURL property">RTMP support</a> via kjvarga's fork at <a href="http://github.com/kjvarga/SoundManager2/">http://github.com/kjvarga/SoundManager2/</a> while maintaining existing NetStream-based behaviour for non-RTMP MPEG4 audio, etc. Uses new <code>serverURL</code> parameter for FMS (I used Red5 for dev/testing,) eg. <code>soundManager.createSound({id:'rtmpTest',serverURL:'rtmp://localhost/oflaDemo',url:'oh-alberta.mp3'}).play();</code></li>
|
||||
<li>New SMSound option for createSound(), load(), play(): '<a href="../#smsound-type" title="SMSound type option">type</a>', for specifying MIME type alongside URL to help with detecting playability. eg.
|
||||
<li>New SMSound option for createSound(), load(), play(): '<a href="../#smsound-type" title="SMSound type option">type</a>', for specifying MIME type alongside URL to help with detecting playability. eg.
|
||||
<code>soundManager.createSound({id:'foo', url:'/player.php?stream=1', type:'audio/mp3'}).play();</code> and so on. Hat tip: <a href="http://sylvinus.org">sylvinus.org</a></li>
|
||||
<li>New SMSound event: <a href="../#smsound-onposition" title="SMSound onposition() event">onposition()</a>, for attaching listeners to specific times within a sound.</li>
|
||||
</ul>
|
||||
|
@ -408,11 +408,11 @@ soundManager.ontimeout(function(){
|
|||
|
||||
<li class="in">
|
||||
<h3><b>V2.96a.20100520</b> - HTML5 Edition (<a href="../../download/soundmanagerv295b-20100520.zip">Download archived version</a>)</h3>
|
||||
|
||||
|
||||
<p>Experimental HTML5 support, lots of code shuffling and performance tweaks.</p>
|
||||
|
||||
|
||||
<ul class="double">
|
||||
|
||||
|
||||
<li class="in">
|
||||
<p class="compact">API Updates</p>
|
||||
<ul class="nested compact flat">
|
||||
|
@ -480,7 +480,7 @@ soundManager.ontimeout(function(){
|
|||
</ul>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li class="in">
|
||||
<h3><b>V2.95b.20100101</b> (<a href="../../download/soundmanagerv295b-20100101.zip">Download archived version</a>)</h3>
|
||||
<p>New features: Flash movie debugging in SWF via <code>debugFlash</code> (default:false), <code>SMSound.eqData = { left:[], right:[] }</code>, code tidying and debug output clean-up</p>
|
||||
|
@ -510,7 +510,7 @@ soundManager.ontimeout(function(){
|
|||
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
|
||||
<li class="in">
|
||||
<h3><b>V2.95a.20090717</b> (<a href="../../download/soundmanagerv295a-20090717.zip">Download archived version</a>)</h3>
|
||||
<p>New features: onready(), fast polling, flash blocking demos etc.</p>
|
||||
|
@ -545,7 +545,7 @@ soundManager.ontimeout(function(){
|
|||
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
|
||||
<li class="in">
|
||||
<h3><b>V2.95a.20090501</b> (<a href="../../download/soundmanagerv295a-20090501.zip">Download archived version</a>)</h3>
|
||||
<p>Lots of updates.</p>
|
||||
|
@ -562,7 +562,7 @@ soundManager.ontimeout(function(){
|
|||
<li>New <code>bufferTime</code> property for MovieStream content. Defines seconds of data to buffer before playback begins (null = flash default of 0.1 seconds; if AAC playback is gappy, try up to 3 seconds.)</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
|
||||
<li>
|
||||
<p class="compact">Bug fixes</p>
|
||||
<ul class="nested compact flat">
|
||||
|
@ -582,7 +582,7 @@ soundManager.ontimeout(function(){
|
|||
<li>Better code/feature separation and clean-up on inline player, Muxtape-style demos</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
|
@ -599,7 +599,7 @@ soundManager.ontimeout(function(){
|
|||
<li>New <code class="in">soundManager.flashLoadTimeout</code> property, milliseconds SM2 will wait for flash movie callback before failing and calling soundManager.onerror() during start-up/init. If set to 0, SM2 will wait indefinitely for flash (good for reboot/flashblock-type scenarios.)</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
|
||||
<li>
|
||||
<p class="compact">Bug fixes</p>
|
||||
<ul class="nested compact flat">
|
||||
|
@ -618,7 +618,7 @@ soundManager.ontimeout(function(){
|
|||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
@ -636,7 +636,7 @@ soundManager.ontimeout(function(){
|
|||
<li>Updated API demo testcases (<a href="../../demo/api/">API Demo page</a>)</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
|
||||
<li>
|
||||
<p class="compact">Bug fixes</p>
|
||||
<ul class="nested compact flat">
|
||||
|
@ -649,7 +649,7 @@ soundManager.ontimeout(function(){
|
|||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
@ -665,7 +665,7 @@ soundManager.ontimeout(function(){
|
|||
<li>Updated design on API demo page, new <a href="../../demo/api/#looping">looping example</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
|
||||
<li>
|
||||
<p class="compact">Bug fixes</p>
|
||||
<ul class="nested compact flat">
|
||||
|
@ -678,10 +678,10 @@ soundManager.ontimeout(function(){
|
|||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li class="in">
|
||||
<h3><b>V2.91a.20081205</b> (<a href="../../download/soundmanagerv291a-20081205.zip">Download archived version</a>)</h3>
|
||||
|
||||
|
@ -694,7 +694,7 @@ soundManager.ontimeout(function(){
|
|||
<li>Code verified with <a href="http://jslint.com">jslint</a>. 0 errors reported with default settings, Edition 2008-11-26</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
|
||||
<li>
|
||||
<p class="compact">Bug fixes</p>
|
||||
<ul class="nested compact flat">
|
||||
|
@ -705,7 +705,7 @@ soundManager.ontimeout(function(){
|
|||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
<li class="in">
|
||||
|
@ -1070,19 +1070,19 @@ soundManager.ontimeout(function(){
|
|||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<!-- <script type="text/javascript">document.getElementById('revision-list').className += ' hide-old';</script> -->
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div id="col3" class="c3">
|
||||
|
||||
|
||||
|
||||
<div id="get-satisfaction" class="box">
|
||||
<div id="gsfn_list_widget">
|
||||
<h2><a href="http://getsatisfaction.com/schillmania/products/schillmania_soundmanager_2/" title="User discussion, FAQs and support for SoundManager 2" rel="nofollow">Discussion / Support</a><span class="l"></span><span class="r"></span></h2>
|
||||
|
@ -1128,7 +1128,7 @@ soundManager.ontimeout(function(){
|
|||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="clear"></div>
|
||||
|
||||
<!-- /main -->
|
||||
|
@ -1140,7 +1140,7 @@ soundManager.ontimeout(function(){
|
|||
<script type="text/javascript">
|
||||
init();
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
@ -27,7 +27,7 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<div id="content">
|
||||
|
||||
<div id="top">
|
||||
|
@ -75,7 +75,7 @@
|
|||
<li><a href="../#smsoundmethods">Sound Object (SMSound) API</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
|
||||
<li>
|
||||
<a href="../download/">Download</a>
|
||||
<ul>
|
||||
|
@ -83,7 +83,7 @@
|
|||
<li><a href="../download/#revision-history">Revision History</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
|
||||
<li>
|
||||
<a href="../technotes/">Technical Notes</a>
|
||||
<ul>
|
||||
|
@ -105,7 +105,7 @@
|
|||
</ul>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div id="main" class="triple">
|
||||
|
@ -115,17 +115,17 @@
|
|||
<h2>How SoundManager Works</h2>
|
||||
<p>It starts out easy, but you can go down the rabbit hole if you want.</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="c2">
|
||||
|
||||
|
||||
<div class="f-block">
|
||||
|
||||
<!--
|
||||
<p style="margin-top:1px"><strong><strong>SoundManager 2 makes it easier to play MP3 audio cross browser / platform, using Javascript.</strong></strong></p>
|
||||
-->
|
||||
|
||||
|
||||
<h3>SoundManager 2 Tutorial: What, Why, How</h3>
|
||||
|
||||
|
||||
<p><strong>Problem:</strong> Browsers lack good, consistent native audio support. (HTML 5's <code>Audio()</code> is the future, but does not have majority support yet.)</p>
|
||||
<p><strong>Solution:</strong> Javascript API via Flash + ExternalInterface, works almost everywhere. If HTML5 audio support is enabled, flash fallback used for browsers that don't support "non-free" MP3 + MP4 formats.</p>
|
||||
<p>SoundManager 2 wraps and extends both the Flash and HTML Audio Sound APIs, providing a single, unified sound API to Javascript; the API is the same, whether HTML or Flash is ultimately used to play sound. (The flash portion is hidden, transparent to both developers and end users.)</p>
|
||||
|
@ -139,7 +139,7 @@
|
|||
|
||||
<p>The soundmanager2.js core can get down to 10 KB over the wire, depending on what version you use. A few versions of the SM2 script are available, balancing code size between commented, debug-enabled and production-optimized builds.</p>
|
||||
<p>Regardless of which build you use, take advantage of <a href="http://developer.yahoo.com/performance/rules.html#gzip" title="Best Practices for Speeding Up Your Web Site (Yahoo Developer Network)">gzip compression</a> on your server for big savings. As shown below, SoundManager 2 compresses quite well with gzip; the full debug-enabled version served <i>with</i> gzip is smaller than even the minified, no-debug version served without it.</p>
|
||||
|
||||
|
||||
<table id="sm2-filesizes" cellpadding="0" cellspacing="0">
|
||||
|
||||
<tr>
|
||||
|
@ -180,7 +180,7 @@
|
|||
</tr>
|
||||
|
||||
</table>
|
||||
|
||||
|
||||
<p>You then need to tell SM2 where to find the flash .SWF it will need (if no HTML5 support), and optionally what version of Flash (~3 KB for flash 8, ~10 KB for flash 9) depending on what API features you want, as well as other features:</p>
|
||||
|
||||
<pre>
|
||||
|
@ -202,7 +202,7 @@ soundManager.onready(function() {
|
|||
<h4 id="basic-template">Basic SoundManager Template</h4>
|
||||
|
||||
<p>For a live example of a page including SoundManager 2, check the <a href="../../demo/template/" title="SoundManager 2 template example" onclick="checkDomain(this)">bare-bones template</a>.</p>
|
||||
|
||||
|
||||
<h4 id="file-structure">SoundManager File Structure</h4>
|
||||
<p>Or, "What you get when you download SM2."</p>
|
||||
<p>The core audio API bits require <code>script/soundmanager2.js</code> and the SWF files <code>swf/soundmanager2.swf</code> and <code>swf/soundmanager2_flash9.swf</code>, as well as the <code>_debug</code> versions of the SWFs. The flash 9 SWF enables some extra API features, and is only used if you set <code>soundManager.flashVersion = 9</code> (the default is 8.)</p>
|
||||
|
@ -251,11 +251,11 @@ soundManager.onready(function() {
|
|||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="f-block f-onload">
|
||||
|
||||
<h4>Startup / Initialization</h4>
|
||||
|
||||
|
||||
<p>In brief, here is now SM2 starts up:</p>
|
||||
<ul>
|
||||
<li>soundmanager2.js loads</li>
|
||||
|
@ -265,15 +265,15 @@ soundManager.onready(function() {
|
|||
<li>JS -> Flash test (JS calls Flash function): "Hello, Flash!"</li>
|
||||
<li>-- startup is complete, soundManager.onready() fires --</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<p class="in">A single Javascript include will link in all of the required code for the library, which will automatically begin loading either at <code>onDOMContentLoaded()</code> if supported, or alternately, after <code>window.onload()</code> (eg., IE 6 and others.) The default behaviour is to start "as soon as possible", but the library can be configured to wait for <code>window.onload()</code> in all cases as well. Loading and initialisation are separate events.</p>
|
||||
|
||||
<p class="in">Once initialised, SM2 will call event handlers/listeners registered via <code>soundManager.onready()</code>. There are also "old-skool" onload()/onerror() event handlers which you can define just as you would with <code>window.onload()</code>.</p>
|
||||
|
||||
|
||||
<p>If you want to lazy-load or defer SM2, see <a href="#lazy-loading" title="Lazy-loading SM2 and SM2_DEFER object">Lazy-loading and SM2_DEFER</a>.</p>
|
||||
|
||||
|
||||
<h4>SoundManager onready() / ontimeout() and onload() / onerror() Event Handlers</h4>
|
||||
|
||||
|
||||
<p><code>onready()</code> is a flexible method that can be used to queue numerous listeners for SM2's successful start-up. Simply pass a callback function, which will be called when SM2 has successfully started:</p>
|
||||
|
||||
<pre class="block"><code>soundManager.onready(function() {
|
||||
|
@ -290,7 +290,7 @@ soundManager.onready(function() {
|
|||
<h4>SoundManager onload() + onerror()</h4>
|
||||
|
||||
<p>A more traditional, less-flexible style of event handling is to assign single onload() / onerror() handlers. You should use <code>onready()</code> as it can be assigned at any time once soundManager has been defined, and is more robust.</p>
|
||||
|
||||
|
||||
<pre class="block"><code>soundManager.onload = function() {
|
||||
<span><span>// SM2 is ready to go!</span></span>
|
||||
makeSomeNoise(); <span><span>// soundManager.createSound(), etc.</span></span>
|
||||
|
@ -305,7 +305,7 @@ soundManager.onerror = function() {
|
|||
|
||||
<p>Let's say you wanted to load and start SM2 after your page has loaded, using Javascript to insert a script node etc., or otherwise only start SM2 conditionally. You can edit soundmanager2.js and take out the SoundManager() constructor call at the bottom, <i>or</i> set the global variable SM2_DEFER = true which will have the same effect.</p>
|
||||
<p>Example:</p>
|
||||
|
||||
|
||||
<pre class="block"><code>function lazy_load_sm2() {
|
||||
window.SM2_DEFER = true;
|
||||
<span><span>// -- load soundmanager2.js via <script>, createElement('script') or XHR etc. --
|
||||
|
@ -321,9 +321,9 @@ soundManager.onerror = function() {
|
|||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="columnar">
|
||||
|
@ -362,15 +362,15 @@ soundManager.onerror = function() {
|
|||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="columnar">
|
||||
<div class="c1">
|
||||
<h2>"Use Responsibly"</h2>
|
||||
<p>Only you can prevent audio pollution?</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="c2">
|
||||
|
||||
|
||||
<div class="f-block">
|
||||
|
||||
<h3>A Word Of Vice</h3>
|
||||
|
@ -378,18 +378,18 @@ soundManager.onerror = function() {
|
|||
<p>Sites which automatically start playing background sound, and/or don't have volume or mute controls are the kind of things you should avoid building. As a developer, gentle reader, you may eventually find yourself in such a situation. Please do your part in enhancing the web with sound if you use SM2, while at the same time keeping it audibly usable. :)</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div id="troubleshooting" class="columnar">
|
||||
|
||||
<div id="troubleshooting-flash8" class="c1">
|
||||
<h2 id="troubleshooting-flash9">Troubleshooting</h2>
|
||||
<p>Console-style messaging, useful for troubleshooting start-up and runtime issues.</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="troubleshooting-flash9-highperformance" class="c2">
|
||||
|
||||
<h3>SoundManager 2 Start-up and Debug Tools</h3>
|
||||
|
@ -433,7 +433,7 @@ soundManager.onerror = function() {
|
|||
</li>
|
||||
<li>
|
||||
First time opening SM2 after downloading it? Is your browser URL at file:// or c:/path/ or otherwise not using HTTP? Flash security "whitelisting" is required to allow Flash + JS to work when offline, placing it in the "LocalTrusted" Flash security sandbox rather than "localWithFile".
|
||||
|
||||
|
||||
<div id="d-flashtojs-offline" style="padding-bottom:1em">
|
||||
<h4>Offline viewing: Adding a "trusted location" to the Flash Security Settings Panel</h4>
|
||||
<p>The Flash Player Global Security Settings Panel is a web-based control panel which allows you to configure Flash security. You will need to add the path of the SoundManager 2 project in order for it to work "offline" (ie., when viewing via file:// or c:/)</p>
|
||||
|
@ -446,7 +446,7 @@ soundManager.onerror = function() {
|
|||
</div>
|
||||
<p><a href="http://www.macromedia.com/support/documentation/en/flashplayer/help/settings_manager04.html" target="_blank" class="feature">Launch the Flash Security Settings Panel</a></p>
|
||||
</div>
|
||||
|
||||
|
||||
</li>
|
||||
<li style="margin-top:0.5em">Flash blockers (FlashBlock, "click to flash" etc.) preventing flash load and start-up - need whitelisting/"allow this domain" to work smoothly. If you suspect blocking is the issue, try the <a href="../../demo/flashblock/">SoundManager 2 Flashblock demo</a>.</li>
|
||||
<li style="margin-top:0.5em">Online viewing (HTTP/S): Same-domain security rules apply to HTML + Flash content by default (crossdomain.xml/allowDomain() in .AS source required to override.)</li>
|
||||
|
@ -471,7 +471,7 @@ soundManager.onerror = function() {
|
|||
<div class="details">
|
||||
<p>At this point, Javascript attempts to respond to Flash's initial outgoing Flash -> JS call, completing the test for JS/flash communication. If SM2 does not receive a response from flash, it will eventually fail.</p>
|
||||
<p>Offline viewing conditions and cross-domain security rules will prevent Flash <-> JS communication. See the details of Flash -> JS for information.</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li id="d-soundtest" class="default">
|
||||
|
@ -483,7 +483,7 @@ soundManager.onerror = function() {
|
|||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<p>Flash detection code from <a href="http://www.featureblend.com/javascript-flash-detection-library.html" title="Javascript flash detection library">Flash Detect</a> (featureblend.com)</p>
|
||||
|
||||
<h3 id="flashdebug">Flash Movie Debug Output</h3>
|
||||
|
@ -510,12 +510,12 @@ soundManager.onerror = function() {
|
|||
<p class="in">For debugging your development/production environment with this widget, see the <a href="../../troubleshoot/" title="SoundManager 2: Standalone debug widget">troubleshooting</a> subdirectory of the SoundManager 2 package.</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div id="col3" class="c3">
|
||||
|
||||
|
||||
|
||||
<div id="get-satisfaction" class="box">
|
||||
<div id="gsfn_list_widget">
|
||||
<h2><a href="http://getsatisfaction.com/schillmania/products/schillmania_soundmanager_2/" title="User discussion, FAQs and support for SoundManager 2" rel="nofollow">Discussion / Support</a><span class="l"></span><span class="r"></span></h2>
|
||||
|
@ -533,7 +533,7 @@ soundManager.onerror = function() {
|
|||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="clear"></div>
|
||||
|
||||
<!-- /main -->
|
||||
|
@ -546,7 +546,7 @@ soundManager.onerror = function() {
|
|||
init();
|
||||
sm2DebugInit();
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
@ -25,7 +25,7 @@
|
|||
</head>
|
||||
|
||||
<body id="doc">
|
||||
|
||||
|
||||
<div id="content">
|
||||
|
||||
<div id="top">
|
||||
|
@ -73,7 +73,7 @@
|
|||
<li><a href="#smsoundmethods">Sound Object (SMSound) API</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
|
||||
<li>
|
||||
<a href="download/">Download</a>
|
||||
<ul>
|
||||
|
@ -81,7 +81,7 @@
|
|||
<li><a href="download/#revision-history">Revision History</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
|
||||
<li>
|
||||
<a href="technotes/">Technical Notes</a>
|
||||
<ul>
|
||||
|
@ -103,7 +103,7 @@
|
|||
</ul>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div id="main" class="triple">
|
||||
|
@ -127,9 +127,9 @@
|
|||
<p>Flash URLs, version + performance options</p>
|
||||
</div>
|
||||
<div class="c2">
|
||||
|
||||
|
||||
<h3>SoundManager Properties</h3>
|
||||
|
||||
|
||||
<div class="f-block f-useconsole f-consoleonly f-waitforwindowload f-allowpolling f-nullurl f-usemoviestar f-allowscriptaccess">
|
||||
|
||||
<p class="in">SoundManager has properties which configure debug mode, flash movie path and other behaviours. At minimum, the <code>soundManager.url</code> property must be assigned a path used to look for the necessary flash movie.</p>
|
||||
|
@ -205,7 +205,7 @@ soundManager.defaultOptions.volume = 33; <span>// set global default volume for
|
|||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="f-block f-flashversion">
|
||||
|
||||
<p>New Flash 9-only features:</p>
|
||||
|
@ -217,7 +217,7 @@ soundManager.defaultOptions.volume = 33; <span>// set global default volume for
|
|||
<li class="in"><code>eqData</code> array: 256 EQ spectrum data values available while playing sound</li>
|
||||
<li class="in"><code>peakData</code> object: Left and right channel peak/volume data available while playing sound</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
@ -238,7 +238,7 @@ soundManager.defaultOptions.volume = 33; <span>// set global default volume for
|
|||
<h4 id="soundmanager-flashpollinginterval">soundManager.flashPollingInterval</h4>
|
||||
<p>Setting this will override <code>useFastPolling</code>. E.g. set this to 200 to have 200ms intervals. This is useful in case your callbacks are CPU intensive.</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="f-block f-usehighperformance f-usefastpolling f-flashpollinginterval">
|
||||
<h4 id="soundmanager-highperformance">soundManager.useHighPerformance</h4>
|
||||
<p>Perhaps intuitively, Flash is given higher priority when positioned within the viewable area of the browser, at least 6px in height (oddly), fully-opaque, visible and displayed on the screen. By default, <code class="in">soundManager.useHighPerformance</code> is enabled and should noticeably reduce JS/flash lag and increase the frequency of callbacks such as <code class="in">whileplaying()</code> in some circumstances.</p>
|
||||
|
@ -246,7 +246,7 @@ soundManager.defaultOptions.volume = 33; <span>// set global default volume for
|
|||
<p>This has made a noticeable impact in responsiveness on Mac OS X, and Safari on Windows; animation lag is practically non-existent (see <a href="../demo/animation-2b/" title="SoundManager JS + DOM + sound demo 2b" style="display:inline" onclick="checkDomain(this)">demo</a>). Because setting wmode=transparent and fixed position has been reported to cause some issues, the feature is disabled by default.</p>
|
||||
<p>To be least-obtrusive, SM2 attempts to set position:fixed, and uses bottom/left:0px to stay within view (though using wmode=transparent where possible, to be hidden from view.) It occupies an 8x8px square. If you wish to position the movie yourself or show it inline, have a DIV element with the ID of <code class="in">sm2-container</code> present in the DOM for SM2 to reference and it will write the movie there without positioning.</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="f-block f-useflashblock">
|
||||
<h4 id="soundmanager-useflashblock" title="Recently-added feature" class="recent">soundManager.useFlashBlock</h4>
|
||||
<p>Flash blockers (eg. FlashBlock, "Click To Flash") can prevent the flash portion of SM2 from loading, which will cause a start-up error with a time-out.</p>
|
||||
|
@ -286,7 +286,7 @@ soundManager.defaultOptions.volume = 33; <span>// set global default volume for
|
|||
<div class="f-block f-usehtml5audio">
|
||||
|
||||
<h4 id="soundmanager-usehtml5audio">soundManager.useHTML5Audio</h4>
|
||||
|
||||
|
||||
<p><em><b style="color:#993333">Warning: Beta-ish, in-progress feature</b>; subject to bugs, API changes etc. By default, special check to enable feature for the Apple iPad 3.2+ (which does not support Flash) and Palm Pre, otherwise currently disabled by default. Works on iPhone OS 4.0 / iOS 4.0+.</em></p>
|
||||
<p>Determines whether HTML5 <code>Audio()</code> support is used to play sound, if available, with Flash as the fallback for playing MP3/MP4 (AAC) formats. Browser support for HTML5 Audio varies, and format support (eg. MP3, MP4/AAC, OGG, WAV) can vary by browser/platform.</p>
|
||||
<p>The SM2 API is effectively transparent, consistent whether using Flash or HTML5 <code>Audio()</code> for sound playback behind the scenes. The HTML5 Audio API is roughly equivalent to the Flash 8 feature set, minus ID3 tag support and a few other items. (Flash 9 features like waveform data etc. are not available.)</p>
|
||||
|
@ -296,30 +296,30 @@ soundManager.defaultOptions.volume = 33; <span>// set global default volume for
|
|||
<p>At DOM ready (if useHTML5Audio = true), a test for <code>Audio()</code> is done followed by a series of <code>canPlayType()</code> tests to see if MP3, MP4, WAV and OGG formats are supported. If none of the "required" formats (MP3 + MP4, by default) are supported natively, then Flash is also added as a requirement for SM2 to start.</p>
|
||||
<p><code>soundManager.audioFormats</code> currently defines the list of formats to check (MP3, MP4 and so on), their possible <code>canPlayType()</code> strings (long story short, it's complicated) and whether or not they are "required" - that is, whether Flash should be loaded if they don't work under HTML5. (Again, only MP3 + MP4 are supported by Flash.) If you had a page solely using OGG, you could make MP3/MP4 non-required, but many browsers would not play them inline.</p>
|
||||
<p>SM2 will indicate its state (HTML 5 support or not, using Flash or not) in <code>console.log()</code>-style debug output messages when <code>debugMode = true</code>.</p>
|
||||
|
||||
|
||||
<h5>"My browser does HTML5, why not MP3"?</h5>
|
||||
|
||||
<p>Despite best efforts, some browsers eg. Chrome on Windows may only return "maybe" for <code>Audio().canPlayType('audio/mpeg; codecs=mp3')</code> and variants; by default, SoundManager 2 will only assume a format is supported if a "probably" response is given. You can modify <code>soundManager.html5Test</code> to something like <code>/(probably|maybe)/i</code> if you want to be a bit riskier, but you should consider potential false positives.</p>
|
||||
|
||||
|
||||
<p>At this time, only Safari and Chrome (excluding Chromium?) support MP3 and MP4 formats. Other browsers have excluded them because MP3 and MP4 are not "free" formats. For these cases, Flash is used as the fallback support for MP3/MP4 as needed.</p>
|
||||
|
||||
|
||||
<h5>Bonus HTML5 formats: OGG, WAV</h5>
|
||||
|
||||
|
||||
<p>WAVe (an old standard) and OGG (a MP3-like codec, except free) are both supported in a majority of browsers via HTML5, so SoundManager 2 will also test for support for these formats. A Flash fallback for these formats has not been implemented.</p>
|
||||
|
||||
|
||||
<h5>Testing audio format support</h5>
|
||||
|
||||
|
||||
<p>Once <code>soundManager.onready()</code> has fired and SM2 has started, you can check for support via a number of methods. Namely, <a href="#soundmanager-canplaylink">soundManager.canPlayLink()</a> will take an <code><a></code> element and check its <code>href</code> and <code>type</code> attributes, if available, for hints as to its format or type. You can also pass arbitrary URLs to <a href="#soundmanager-canplayurl">soundManager.canPlayURL()</a>, which will make a "best guess" based on the extension it finds. In any event, SM2 will return a true/false value from canPlay methods based on HTML and/or flash capabilities.</p>
|
||||
|
||||
|
||||
<p>To see what formats are supported by HTML5, watch SM2's debug/console output when debug is enabled, or dump the contents of <code>soundManager.html5</code> to the console; it will show the results of tests for simple items like "mp3", as well as <code>canPlayType()</code> strings such as 'mpeg; codecs=mp3'</p>
|
||||
|
||||
|
||||
<h5>Apple iPad, iPhone, Palm Pre: Special Cases</h5>
|
||||
<p>The "Big iPhone" doesn't do Flash, and does support HTML5 <code>Audio()</code> pretty decently - so SM2 makes a special exception to enable <code>useHTML5Audio</code> when it detects an iPad, iPhone or Palm Pre user agent string by default. Feel free to disable this if you wish.</p>
|
||||
<p>iPad and iPhone require user interaction to start a sound, eg. the createSound() and play() call should happen within an onclick() handler on a link, etc. The "security" model here seems to be implemented similarly to the way pop-up blockers work. You may "chain" sounds (eg. create and play a new one) provided it is done via the onfinish() event of a sound initiated by a user, however. The Muxtape-style demo on the SM2 homepage uses this, and will advance the playlist on the iPad/iPhone if allowed.</p>
|
||||
<p>iPad 3.2 gets hung up on the "BC quail" HE-AAC example sound for some reason, and endlessly loops it rather than finishing and moving on to the next item. May be an iPad playback bug, as other formats are fine. iPhone OS 4 (iOS 4) does not show this issue.</p>
|
||||
<p>iPhone OS version < 3.1 doesn't work, but 3.1 (and possibly earlier versions, not verified) have a native <code>Audio()</code> object. However, they seem to simply not play sound when <code>play()</code> is called, so SM2 looks for and ignores the iPhone with these OS revisions.</p>
|
||||
<p>The Palm Pre <a href="http://developer.palm.com/index.php?option=com_content&view=article&id=1741&Itemid=265#using_html_5_audio_objects" title="Palm Developer Center: Audio">supports</a> a number of MP3, MP4 and WAV formats (WebOS 1.4.1 was tested; it didn't seem to like MP3s at 192kbps, but 128kbps was fine.)</p>
|
||||
|
||||
|
||||
|
||||
<div id="html5-knownissues">
|
||||
|
||||
|
@ -343,12 +343,12 @@ soundManager.defaultOptions.volume = 33; <span>// set global default volume for
|
|||
<li>Safari 5.0.1 (533.17.18) on Snow Leopard (10.6.x) continues to show buggy HTML5 audio load/playback behaviour. Apple are aware of the regression, which began with Safari 4.0 on Snow Leopard (perhaps with the new QuickTime.) See <a href="https://bugs.webkit.org/show_bug.cgi?id=32159#c9" title="Safari Snow Leopard HTML5 Audio Bug">Webkit #32159</a>.</li>
|
||||
<li>iPad/iPhone iOS4 will now play a sequence of sounds if using <code>onfinish()</code> to create/start the next (eg., the Muxtape-style playlist on the SM2 homepage will play through once the user starts it.) In any event, user interaction is always required to start the first sound.</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<p>As of the June, 2010 release of SM2 (V2.96a.20100624):</p>
|
||||
<ul>
|
||||
<li>Safari 5.0 (533.16) on OS X Snow Leopard (10.6.x) continues to show buggy HTML5 audio load/playback behaviour, same as with Safari 4.0.5 on Snow Leopard only - may be related to underlying QuickTime implementation (a guess, at this point.) SM2 will disable HTML5 audio support by default for this specific browser + OS combo. See <a href="https://bugs.webkit.org/show_bug.cgi?id=32159#c9" title="Safari Snow Leopard HTML5 Audio Bug">Webkit #32159</a> for discussion + testcases.</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<p>As of the May, 2010 release of SM2 (V2.96a.20100520):</p>
|
||||
<ul>
|
||||
<li>Safari 4.0.5 on OS X Snow Leopard (10.6.x) appears to have an annoying bug where audio inconsistently fails to load / play; SM2 will currently disable or ignore the HTML5 feature on this exact browser + OS version. See <a href="https://bugs.webkit.org/show_bug.cgi?id=32159#c9" title="Safari Snow Leopard HTML5 Audio Bug">Webkit #32159</a> for discussion + testcases. Note that Safari on OS X 10.5 "Leopard" and on Windows <i>do not</i> appear to have this bug; it seems to be limited to Snow Leopard, seen on OS X 10.6.3.</li>
|
||||
|
@ -378,12 +378,12 @@ soundManager.defaultOptions.volume = 33; <span>// set global default volume for
|
|||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div id="api" class="columnar">
|
||||
|
||||
|
||||
<div class="c1">
|
||||
<h2>SoundManager Core API</h2>
|
||||
<p>Methods for the soundManager object.</p>
|
||||
|
@ -392,7 +392,7 @@ soundManager.defaultOptions.volume = 33; <span>// set global default volume for
|
|||
<div class="c2">
|
||||
|
||||
<div class="f-block">
|
||||
|
||||
|
||||
<h3>SoundManager Global Object</h3>
|
||||
|
||||
<p>This is a collection of methods, collections, properties and event handlers available via the <span class="code">soundManager</span> Javascript object. Sound properties and methods can be set on a global (inherited) default, or per-sound basis.</p>
|
||||
|
@ -495,7 +495,7 @@ mySoundObject.play(); <span><span>// SMSound object reference, same as soundMana
|
|||
<dd title="callback:function">Queues an event callback/handler for successful initialization and "ready to use" state of SoundManager 2. An optional scope parameter can be specified; if none, the callback is scoped to the window. If <code>onready()</code> is called after successful initialization, the callback will be executed immediately. The <code>onready()</code> queue is processed before <code>soundManager.onload()</code>.</dd>
|
||||
<dd>Example:
|
||||
<pre class="block"><code>soundManager.onready(<span>function() {
|
||||
alert('Yay, SM2 loaded OK!');
|
||||
alert('Yay, SM2 loaded OK!');
|
||||
}</span>);</code></pre>
|
||||
</dd>
|
||||
<dd>Queueing multiple handlers: <code>soundManager.onready(<span>myOnReadyHandler</span>); soundManager.onready(<span>myOtherHandler</span>);</code></dd>
|
||||
|
@ -508,7 +508,7 @@ mySoundObject.play(); <span><span>// SMSound object reference, same as soundMana
|
|||
<dd title="callback:function">Queues an event callback/handler for SM2 init failure, processed at (or immediately, if added after) SM2 initialization has failed, just before <code>soundManager.onerror()</code> is called. An optional scope parameter can be specified; if none, the callback is scoped to the window.</dd>
|
||||
<dd>Example:
|
||||
<pre class="block"><code>soundManager.ontimeout(<span>function() {
|
||||
alert('SM2 failed to start. Flash missing, blocked or security error?');
|
||||
alert('SM2 failed to start. Flash missing, blocked or security error?');
|
||||
}</span>);</code></pre>
|
||||
</dd>
|
||||
<dd>Queueing multiple handlers: <code>soundManager.ontimeout(<span>myOnTimeoutHandler</span>); soundManager.ontimeout(<span>myOtherHandler</span>);</code></dd>
|
||||
|
@ -541,7 +541,7 @@ mySoundObject.play(); <span><span>// SMSound object reference, same as soundMana
|
|||
<dl id="soundmanager-reboot" class="f-block f-reboot">
|
||||
<dt>reboot()</dt>
|
||||
<dd title="soundID:string">Destroys any created SMSound objects, unloads the flash movie (removing it from the DOM) and restarts the SM2 init process, retaining all currently-set properties.</dd>
|
||||
<dd>Example:
|
||||
<dd>Example:
|
||||
<pre class="block"><code>soundManager.onerror = function() {<span>
|
||||
<span>// Something went wrong during init - in this example, we *assume* flashblock etc.</span>
|
||||
soundManager.flashLoadTimeout = 0; <span>// When restarting, wait indefinitely for flash</span>
|
||||
|
@ -633,7 +633,7 @@ mySoundObject.play(); <span><span>// SMSound object reference, same as soundMana
|
|||
<dd title="id:string">Returns an <code>SMSound</code> object specified by ID, or null if a sound with that ID is not found.</dd>
|
||||
<dd>Example: <code>var mySMSound = soundManager.getSoundById('<span>mySound</span>');</code></dd>
|
||||
</dl>
|
||||
|
||||
|
||||
<dl id="soundmanager-getmemoryuse" class="f-block f-getmemoryuse">
|
||||
<dt class="flash9" title="Requires Flash 9.0+"><span>number:bytesUsed </span>getMemoryUse()</dt>
|
||||
<dd>Returns the total number of bytes allocated to the Adobe Flash player or Adobe AIR, or 0 if unsupported (Flash 9+ only.) This number may include memory use across all tabs, browsers etc. See <a href="http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/system/System.html#totalMemory" title="System.totalMemory property documentation">system.totalMemory</a> (livedocs.adobe.com)</dd>
|
||||
|
@ -647,7 +647,7 @@ mySoundObject.play(); <span><span>// SMSound object reference, same as soundMana
|
|||
</dl>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div id="smsoundmethods" class="columnar">
|
||||
|
@ -663,9 +663,9 @@ mySoundObject.play(); <span><span>// SMSound object reference, same as soundMana
|
|||
<div class="c2">
|
||||
|
||||
<div>
|
||||
|
||||
|
||||
<h3>Sound Object Methods</h3>
|
||||
|
||||
|
||||
<p class="in">Each sound under SoundManager 2 is given a <code>SMSound</code> object instance which includes the following events, methods and properties. Note that most methods will return the sound object instance, allowing for method chaining if desired.</p>
|
||||
|
||||
<dl id="smsound-destruct" class="f-block s-destruct">
|
||||
|
@ -731,7 +731,7 @@ mySoundObject.play(); <span><span>// SMSound object reference, same as soundMana
|
|||
<dd title="volume:integer">Sets the volume of the given sound. Accepted values: 0-100. Affects <span>volume</span> property.</dd>
|
||||
<dd>Example: <code>mySound.setVolume(<span>50</span>);</code></dd>
|
||||
</dl>
|
||||
|
||||
|
||||
<dl id="smsound-togglemute" class="f-block s-togglemute">
|
||||
<dt><span>object:SMSound</span> toggleMute()</dt>
|
||||
<dd>Mutes/unmutes the given sound. Affected <span>muted</span> property (boolean.)</dd>
|
||||
|
@ -771,16 +771,16 @@ mySoundObject.play(); <span><span>// SMSound object reference, same as soundMana
|
|||
</div>
|
||||
|
||||
<div id="smsoundevents" class="columnar">
|
||||
|
||||
|
||||
<div class="c1">
|
||||
<h2 id="soundmanager-sound-events">SMSound Events</h2>
|
||||
<p>Event handlers for SMSound objects.</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="c2">
|
||||
|
||||
|
||||
<div>
|
||||
|
||||
|
||||
<h3>Sound Object Events</h3>
|
||||
|
||||
<p class="in">Like native javascript objects, each SoundManager <code>SMSound</code> (sound instance) object can fire a number of <code>onload</code>-like events. Handlers cannot be "directly" assigned (eg. someSound.onload), but can be passed as option parameters to several sound methods.</p>
|
||||
|
@ -796,13 +796,13 @@ mySoundObject.play(); <span><span>// SMSound object reference, same as soundMana
|
|||
</div>
|
||||
|
||||
<div style="margin-top:2em">
|
||||
|
||||
|
||||
<dl id="smsound-onbufferchange" class="f-block s-onbufferchange">
|
||||
<dt class="flash9">onbufferchange()</dt>
|
||||
<dd>Fires when a sound's reported buffering state has changed while playing and/or loading. The current state is reflected in the boolean <code>isBuffering</code> property.</dd>
|
||||
<dd>Flash 9+ only. Related information on Adobe, <a href="http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/media/Sound.html#isBuffering">Sound.isBuffering</a>.</dd>
|
||||
</dl>
|
||||
|
||||
|
||||
<dl id="smsound-ondataerror" class="f-block s-ondataerror s-waveformdata s-eqdata">
|
||||
<dt title="Flash 9+ only" class="flash9">ondataerror()</dt>
|
||||
<dd>Fires at least once per sound play instance when Flash encounters a security error when trying to call computeSpectrum() internally. This typically happens when sounds are 'inaccessible' due to another Flash movie (eg. YouTube) in another tab which has loaded, and may (or may not be) playing sound. Flash attempts to read the "combined" output to the sound card, and must have security permissions for all sounds as a result. See <a href="http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/media/SoundMixer.html#areSoundsInaccessible()">areSoundsInaccessible()</a> on Adobe for more info.</dd>
|
||||
|
@ -913,11 +913,11 @@ for (prop in this.id3) {
|
|||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div id="sound-object-properties" class="columnar">
|
||||
|
||||
|
@ -957,7 +957,7 @@ for (prop in this.id3) {
|
|||
<dt>url</dt>
|
||||
<dd>The specified URL from which the sound is loaded, typically over HTTP. Can be referenced as <code>this.url</code> from within sound object event handlers such as <code>onload()</code> or <code>whileplaying()</code>, etc.</dd>
|
||||
</dl>
|
||||
|
||||
|
||||
<dl id="smsound-serverurl" class="f-block s-serverurl">
|
||||
<dt>serverURL</dt>
|
||||
<dd><b>Note: <em>Experimental feature.</em></b> Only for use with RTMP streaming, ie., Flash Media Server and similar servers.</dd>
|
||||
|
@ -999,7 +999,7 @@ for (prop in this.id3) {
|
|||
<dt>bytesTotal</dt>
|
||||
<dd>The total number of bytes to be downloaded, while loading a sound.</dd>
|
||||
</dl>
|
||||
|
||||
|
||||
<dl id="smsound-didbeforefinish" class="f-block s-didbeforefinish">
|
||||
<dt>didBeforeFinish</dt>
|
||||
<dd>Boolean indicating whether <code>beforeFinish()</code> condition was reached.</dd>
|
||||
|
@ -1009,7 +1009,7 @@ for (prop in this.id3) {
|
|||
<dt>didJustBeforeFinish</dt>
|
||||
<dd>Boolean indicating whether <code>justBeforeFinish()</code> condition was reached.</dd>
|
||||
</dl>
|
||||
|
||||
|
||||
<dl id="smsound-duration" class="f-block s-duration">
|
||||
<dt>duration</dt>
|
||||
<dd>The current length of the sound, specified in milliseconds.</dd>
|
||||
|
@ -1023,7 +1023,7 @@ for (prop in this.id3) {
|
|||
<dd>Once the sound has fully loaded, <code>duration</code> should be referenced as it will contain the final and accurate value.</dd>
|
||||
<dd>Note that this method works only with Constant Bitrate (CBR)-encoded MP3s due to the consistent data/time assumption. VBR-encoded MP3s will give inaccurate results.</dd>
|
||||
</dl>
|
||||
|
||||
|
||||
<dl id="smsound-eqdata" class="f-block s-eqdata">
|
||||
<dt title="Flash 9+ only" class="flash9">eqData = {<span>left:[], right: []</span>}</dt>
|
||||
<dd>Object containing two arrays of 256 floating-point (three decimal place) values from 0 to 1, the result of an FFT on the waveform data. Can be used to draw a spectrum (frequency range) graph while playing a sound. See <a href="../demo/page-player/#debug=1" title="Muxtape.com-style page-as-playlist, with debug output" onclick="checkDomain(this,true)">Page-as-playlist demo</a> for example implementation. Requires Flash 9+.</dd>
|
||||
|
@ -1044,13 +1044,13 @@ for (prop in this.id3) {
|
|||
<dd><strong>Warning:</strong> This feature can eat up a lot of CPU in some cases. The amount of data passed from Flash to JS is not terribly large, but the JS-DOM updates and browser reflow can be expensive. Use with caution.</dd>
|
||||
<dd><strong>Backward compatibility note:</strong> Up to SoundManager 2.95a.20090717, eqData was a single array containing one channel of data. In newer versions this is unchanged, except the array now has .left[] and .right[] objects attached to it. To ensure future compatibility, use eqData.left[0] instead of eqData[0] and so on.</dd>
|
||||
</dl>
|
||||
|
||||
|
||||
<dl id="smsound-id3" class="f-block s-id3">
|
||||
<dt>id3</dt>
|
||||
<dd>An object literal populated, if applicable, when ID3 data is received (related handler: <code>onid3()</code>)</dd>
|
||||
<dd>For property details, see <a href="#onid3" title="onid3() documentation" onclick="resetFilter()">onid3()</a>.</dd>
|
||||
</dl>
|
||||
|
||||
|
||||
<dl id="smsound-isbuffering" class="f-block s-isbuffering">
|
||||
<dt class="flash9">isBuffering</dt>
|
||||
<dd>Boolean value reflecting the buffering state of a playing or loading object. To be notified when this property changes, see <a href="#smsound-onbufferchange" onclick="resetFilter()">onbufferchange()</a>.</dd>
|
||||
|
@ -1080,7 +1080,7 @@ for (prop in this.id3) {
|
|||
<dd>Boolean indicating pause status. True/False.</dd>
|
||||
<dd>Treat as read-only; use <code>pause()</code>, <code>resume()</code> and <code>togglePause()</code> methods to affect state.</dd>
|
||||
</dl>
|
||||
|
||||
|
||||
<dl id="smsound-peakdata" class="f-block s-peakdata">
|
||||
<dt title="Flash 9+ only" class="flash9">peakData = {<span>left:0.0, right:0.0</span>}</dt>
|
||||
<dd>Object literal format including <code>left</code> and <code>right</code> properties with floating-point values ranging from 0 to 1, indicating "peak" (volume) level. Updated during <code>whileplaying()</code>. See <a href="../demo/page-player/#debug=1" title="Muxtape.com-style page-as-playlist, with debug output" onclick="checkDomain(this,true)">Page-as-playlist demo</a> as one example. Requires Flash 9+.</dd>
|
||||
|
@ -1158,7 +1158,7 @@ for (prop in this.id3) {
|
|||
<p>Functions which may be called directly on sound objects.</p>
|
||||
</div>
|
||||
<div class="c2">
|
||||
|
||||
|
||||
<div class="f-block">
|
||||
<h3>SMSound Object Methods</h3>
|
||||
<p class="in">SoundManager provides wrappers for most SMSound methods - eg. <code>soundManager.play('<span>mySound</span>')</code> checks for a valid sound object, and then calls <code>soundManager.sounds['<span>mySound</span>'].play()</code> on that particular object; thus, it is the same as <code>var sound = soundManager.getSoundById('mySound'); mySound.play();</code></p>
|
||||
|
@ -1189,18 +1189,18 @@ for (prop in this.id3) {
|
|||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- options -->
|
||||
<div id="smdefaults" class="columnar">
|
||||
|
||||
|
||||
<div class="c1">
|
||||
<h2>SoundManager Default Options</h2>
|
||||
<p>An optional object specifying event handlers etc., passed to <code>createSound()</code> and <code>play()</code>.</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="c2">
|
||||
|
||||
|
||||
<div class="f-block f-defaultoptions s-autoload s-loops s-stream s-onbeforefinish s-onbeforefinishtime s-onjustbeforefinishtime s-multishot s-multishotevents s-pan s-volume s-ismoviestar s-flash9options s-moviestaroptions s-buffertime s-serverurl s-onconnect">
|
||||
|
||||
<h3 id="sound-properties">SoundManager Global Sound Object Defaults</h3>
|
||||
|
@ -1259,12 +1259,12 @@ for (prop in this.id3) {
|
|||
autoPlay: true,
|
||||
pan: -75,
|
||||
volume: 50</span>
|
||||
});</code></pre>
|
||||
});</code></pre>
|
||||
|
||||
<p class="alternate"><em>Note</em>: For live examples, see the code behind the "<a href="../demo/page-player/" title="muxtape-style page as playlist demo" onclick="checkDomain(this)">page as playlist</a>" demo which uses much of this functionality.</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="f-block f-defaultoptions f-flash9options f-moviestaroptions s-ismoviestar s-usepeakdata s-usewaveformdata s-useeqdata">
|
||||
|
||||
<h3 id="sound-properties-flash9" title="Flash 9-only" class="flash9">Sound Properties Object: Version-specific Options (Merging)</h3>
|
||||
|
@ -1293,14 +1293,14 @@ soundManager.movieStarOptions = {<span>
|
|||
<p>Note that <code class="in">soundManager.defaultOptions.peakData</code> will be undefined until SoundManager 2 has self-initialized, at which point it determines the flash version to use and creates the .SWF, etc. Only then will defaultOptions be populated with optional option parameters, if applicable.</p>
|
||||
|
||||
<p class="in">Once SM2 has written out the .SWF, it is safe to modify <code>soundManager.defaultOptions.usePeakData</code> directly, for example - but if making changes <em>before</em> initialization, eg., at the time when you are setting <code>soundManager.flashVersion</code>, it is best to modify the source objects as they haven't yet been merged. ie., <code>soundManager.flash9Options.usePeakData = true;</code></p>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div id="soundmanager2-dynamic-properties" class="columnar">
|
||||
<div class="c1">
|
||||
<h2>SoundManager Runtime Properties</h2>
|
||||
|
@ -1308,7 +1308,7 @@ soundManager.movieStarOptions = {<span>
|
|||
</div>
|
||||
|
||||
<div class="c2">
|
||||
|
||||
|
||||
<div class="f-block f-features f-waveformdata f-peakdata">
|
||||
|
||||
<h3 id="soundmanager-dynamic">SoundManager Dynamic (Runtime) Properties</h3>
|
||||
|
@ -1337,17 +1337,17 @@ soundManager.movieStarOptions = {<span>
|
|||
<p class="in">The features object is populated at initialisation time; the current feature support tests simply check the value of <code>soundManager.flashVersion</code> being >= 9. This object has been added in anticipation of additional features with future versions of Flash.</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="soundmanager-events" class="columnar">
|
||||
<div class="c1">
|
||||
<h2>SoundManager Core Events</h2>
|
||||
<p>Events fired by SoundManager at start-up</p>
|
||||
</div>
|
||||
<div class="c2">
|
||||
|
||||
|
||||
<div class="f-block f-onload f-onerror f-oninitmovie">
|
||||
|
||||
<p class="in">The following events are attached to the <code>soundManager</code> global object and are useful for detecting the success/failure of the API's initialisation.</p>
|
||||
|
@ -1382,18 +1382,18 @@ soundManager.movieStarOptions = {<span>
|
|||
</dl>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="columnar">
|
||||
<div class="c1">
|
||||
<h2>SoundManager Collections</h2>
|
||||
<p>Object collections which SoundManager maintains during runtime.</p>
|
||||
</div>
|
||||
<div class="c2">
|
||||
|
||||
|
||||
<div class="f-block">
|
||||
|
||||
<h3>SoundManager Object Collections</h3>
|
||||
|
@ -1406,19 +1406,19 @@ soundManager.movieStarOptions = {<span>
|
|||
</dl>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="sound-options-object" class="columnar">
|
||||
|
||||
<div class="c1">
|
||||
<h2>Sound Options Object Format</h2>
|
||||
<p>Object Literal, JSON-style form passed to <code>createSound()</code> and <code>play()</code></p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="c2">
|
||||
|
||||
|
||||
<div class="f-block s-onload"> <!-- f-createsound s-sid s-url s-autoload s-autoplay s-onload -->
|
||||
|
||||
<h3 id="object-literal-format">Object Literal Format</h3>
|
||||
|
@ -1442,14 +1442,14 @@ soundManager.movieStarOptions = {<span>
|
|||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div id="col3" class="c3">
|
||||
|
||||
|
||||
|
||||
<!--
|
||||
<div id="get-satisfaction" class="box">
|
||||
<div id="gsfn_list_widget">
|
||||
|
@ -1489,7 +1489,7 @@ soundManager.movieStarOptions = {<span>
|
|||
|
||||
</div>
|
||||
-->
|
||||
|
||||
|
||||
<div class="box">
|
||||
|
||||
<h2>API Elements<span class="l"></span><span class="r"></span></h2>
|
||||
|
@ -1500,7 +1500,7 @@ soundManager.movieStarOptions = {<span>
|
|||
<li onclick="return setFilter(event,'f-')" class="ignore">
|
||||
|
||||
<h3 class="wedge">SoundManager<span class="l"></span><span class="r"></span></h3>
|
||||
|
||||
|
||||
<h4>Properties</h4>
|
||||
<ul>
|
||||
|
||||
|
@ -1661,14 +1661,14 @@ soundManager.movieStarOptions = {<span>
|
|||
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<!-- /.box -->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="clear"></div>
|
||||
|
||||
<!-- /main -->
|
||||
|
@ -1681,7 +1681,7 @@ soundManager.movieStarOptions = {<span>
|
|||
init();
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
@ -24,7 +24,7 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<div id="content">
|
||||
|
||||
<div id="top">
|
||||
|
@ -72,7 +72,7 @@
|
|||
<li><a href="../#smsoundmethods">Sound Object (SMSound) API</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
|
||||
<li>
|
||||
<a href="../download/">Download</a>
|
||||
<ul>
|
||||
|
@ -80,7 +80,7 @@
|
|||
<li><a href="../download/#revision-history">Revision History</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
|
||||
<li>
|
||||
<a href="../technotes/">Technical Notes</a>
|
||||
<ul>
|
||||
|
@ -102,13 +102,13 @@
|
|||
</ul>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div id="main" class="triple">
|
||||
|
||||
|
||||
<div class="columnar">
|
||||
|
||||
|
||||
<div class="columnar">
|
||||
|
||||
<div class="c1">
|
||||
<h2>Licensing</h2>
|
||||
|
@ -122,15 +122,15 @@
|
|||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div id="related" class="columnar">
|
||||
<div class="c1">
|
||||
<h2>General + Related</h2>
|
||||
<p>Other information about SoundManager 2.</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="c2">
|
||||
|
||||
|
||||
<div class="f-block c-about">
|
||||
<h3 id="general">General</h3>
|
||||
<p>SoundManager was written to meet a desire to have Javascript-driven sound for interactive web-based projects, and "to make it easy to play MP3s in the browser." It is free for use in both personal and commercial projects (see <a href="#licensing" title="SoundManager 2 licensing information" onclick="resetFilter()">Licensing</a>.) It was originally developed for personal use and has been packaged with the hopes of being useful to others.</p>
|
||||
|
@ -158,7 +158,7 @@
|
|||
<ul>
|
||||
<li><a href="http://www.schillmania.com/projects/soundmanager2/" title="SoundManager 2 Web Home">SoundManager 2 Project Page</a> (schillmania.com)</li>
|
||||
<li><a href="http://livedocs.adobe.com/flash/8/" title="Info on Flash 8's sound object">Flash 8 / AS2 documentation</a> (livedocs.macromedia.com) - download, open index.html under "main" subdirectory, use navigation: ActionScript 2.0 Language Reference -> ActionScript Classes -> Sound</li>
|
||||
<li id="fpgss"><a href="http://www.macromedia.com/support/documentation/en/flashplayer/help/settings_manager04.html" title="Configure Flash security settings">Flash Player Global Security Settings Panel</a> - Configure your Flash Player security, eg., allow SM2 .swf on your local filesystem to have internet access for testing by whitelisting its location eg. file://Users/Administrator/Desktop/soundmanager... etc. Alternately, view the page over HTTP and access internet resources that way.</li>
|
||||
<li id="fpgss"><a href="http://www.macromedia.com/support/documentation/en/flashplayer/help/settings_manager04.html" title="Configure Flash security settings">Flash Player Global Security Settings Panel</a> - Configure your Flash Player security, eg., allow SM2 .swf on your local filesystem to have internet access for testing by whitelisting its location eg. file://Users/Administrator/Desktop/soundmanager... etc. Alternately, view the page over HTTP and access internet resources that way.</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
@ -171,11 +171,11 @@
|
|||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div id="col3" class="c3">
|
||||
|
||||
|
||||
|
||||
<div id="get-satisfaction" class="box">
|
||||
<div id="gsfn_list_widget">
|
||||
<h2><a href="http://getsatisfaction.com/schillmania/products/schillmania_soundmanager_2/" title="User discussion, FAQs and support for SoundManager 2">Discussion / Support</a><span class="l"></span><span class="r"></span></h2>
|
||||
|
@ -221,7 +221,7 @@
|
|||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="clear"></div>
|
||||
|
||||
<!-- /main -->
|
||||
|
@ -233,7 +233,7 @@
|
|||
<script type="text/javascript">
|
||||
init();
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
@ -24,7 +24,7 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<div id="content">
|
||||
|
||||
<div id="top">
|
||||
|
@ -72,7 +72,7 @@
|
|||
<li><a href="../#smsoundmethods">Sound Object (SMSound) API</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
|
||||
<li>
|
||||
<a href="../download/">Download</a>
|
||||
<ul>
|
||||
|
@ -80,7 +80,7 @@
|
|||
<li><a href="../download/#revision-history">Revision History</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
|
||||
<li>
|
||||
<strong><a href="../technotes/">Technical Notes</a></strong>
|
||||
<ul>
|
||||
|
@ -102,7 +102,7 @@
|
|||
</ul>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div id="main" class="triple">
|
||||
|
@ -119,14 +119,14 @@
|
|||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="columnar">
|
||||
|
||||
|
||||
<div class="c1">
|
||||
<h2>Requirements + Specifications</h2>
|
||||
<p>What SM2 needs, and how it works.</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="c2">
|
||||
|
||||
<div class="f-block c-requirements">
|
||||
|
@ -204,22 +204,22 @@
|
|||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div id="debug-output" class="columnar">
|
||||
<div class="c1">
|
||||
<h2>Debug + Console Output</h2>
|
||||
<p>Console-style messaging, useful for troubleshooting start-up and runtime issues.</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="c2">
|
||||
<h3>Live Debug Output</h3>
|
||||
<p class="in">With debug mode enabled via <code>soundManager.debugMode = true</code>, SM2 can write helpful troubleshooting information to javascript <code>console.log()</code>-style interfaces. Additionally, output can be written to an optional DIV element with the ID of "<code>soundmanager-debug</code>".</p>
|
||||
<p class="in"><code>soundManager.consoleOnly</code> can be set to true to disable HTML output (using <code>console.log()</code>-only methods) as well.</p>
|
||||
<p>Additionally, debugging within the Flash portion of SM2 is also available and set using <code>soundManager.debugFlash = true</code>. Debug messages are written to the flash movie itself.</p>
|
||||
<p>For info on SoundManager 2 loading/initialization failures and how to fix them, see <a href="../getstarted/#troubleshooting">troubleshooting</a>.</p>
|
||||
|
||||
|
||||
<p>Below is a live example of debug output from SM2:</p>
|
||||
|
||||
<div id="live-debug" class="block">
|
||||
|
@ -227,7 +227,7 @@
|
|||
<!-- live debug goes here -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<p>And, Flash debug output:</p>
|
||||
|
||||
<div id="sm2-container">
|
||||
|
@ -238,10 +238,10 @@
|
|||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div id="col3" class="c3">
|
||||
|
||||
|
||||
|
||||
<div id="get-satisfaction" class="box">
|
||||
<div id="gsfn_list_widget">
|
||||
<h2><a href="http://getsatisfaction.com/schillmania/products/schillmania_soundmanager_2/" title="User discussion, FAQs and support for SoundManager 2" rel="nofollow">Discussion / Support</a><span class="l"></span><span class="r"></span></h2>
|
||||
|
@ -287,7 +287,7 @@
|
|||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="clear"></div>
|
||||
|
||||
<!-- /main -->
|
||||
|
@ -299,7 +299,7 @@
|
|||
<script type="text/javascript">
|
||||
init();
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
@ -179,7 +179,7 @@ body #sm2-container embed {
|
|||
</head>
|
||||
|
||||
<body class="home">
|
||||
|
||||
|
||||
<div id="content">
|
||||
|
||||
<div id="top">
|
||||
|
@ -229,7 +229,7 @@ body #sm2-container embed {
|
|||
<li><a href="doc/#smsoundmethods">Sound Object (SMSound) API</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
|
||||
<li>
|
||||
<a href="doc/download/">Download</a>
|
||||
<ul>
|
||||
|
@ -238,7 +238,7 @@ body #sm2-container embed {
|
|||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li>
|
||||
<a href="doc/technotes/">Technical Notes</a>
|
||||
<ul>
|
||||
|
@ -260,11 +260,11 @@ body #sm2-container embed {
|
|||
</ul>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div id="main" class="triple">
|
||||
|
||||
|
||||
<div id="live-demos" class="columnar">
|
||||
|
||||
<div class="c1">
|
||||
|
@ -273,7 +273,7 @@ body #sm2-container embed {
|
|||
</div>
|
||||
|
||||
<div class="c2">
|
||||
|
||||
|
||||
<h3>About SoundManager 2, Features and Live Demos</h3>
|
||||
|
||||
<div style="position:relative;padding-top:0.5em;padding-bottom:0.75em">
|
||||
|
@ -281,11 +281,11 @@ body #sm2-container embed {
|
|||
<img src="demo/_image/speaker.png" alt="speaker icon" style="float:left;display:inline;width:68px;height:68px;margin:1em 1em 0px 0px" />
|
||||
|
||||
<h2 class="special" style="margin-top:0.33em">SoundManager 2 makes it easier to play audio using JavaScript.</h2>
|
||||
|
||||
|
||||
<p style="margin-top:0.5em">By wrapping and extending HTML5 and Flash Audio APIs, SoundManager 2 brings reliable cross-platform audio to JavaScript. <a href="doc/getstarted/#intro" class="cta" style="white-space:nowrap">How it works <span>»</span></a></p>
|
||||
|
||||
<div class="clear"> </div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div id="demo-box">
|
||||
|
@ -343,9 +343,9 @@ body #sm2-container embed {
|
|||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<h4 style="clear:left;margin-top:0.5em">HTML5 Audio Support <span style="color:#888">(Beta-ish)</span></h4>
|
||||
<ul id="html5-audio-notes" class="standard">
|
||||
<li>100% Flash-free MP3 + MP4/AAC where supported. Works on iPad, iPhone iOS 4</li>
|
||||
|
@ -355,7 +355,7 @@ body #sm2-container embed {
|
|||
<li>Some other formats (WAV/OGG) supported via HTML5, depending on browser</li>
|
||||
<li>See <a href="doc/#soundmanager-usehtml5audio" title="soundManager.useHTML5Audio HTML5 Audio() support feature documentation">soundManager<wbr>.useHTML5Audio</a> for implementation details</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<h4>Basic API Features (Flash 8)</h4>
|
||||
<ul class="standard">
|
||||
<li>Load, stop, play, pause, mute, seek, pan, volume control from JavaScript</li>
|
||||
|
@ -380,14 +380,14 @@ body #sm2-container embed {
|
|||
<li>Peak (L/R channel volume) data</li>
|
||||
<li>Audio buffering state/event handling</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<h4>General Tech Stuff</h4>
|
||||
<ul class="standard">
|
||||
<li>Full <a href="doc/" title="SoundManager 2 documentation">API Documentation</a> with examples and notes</li>
|
||||
<li>console.log()-style <a href="doc/technotes/#debug-output" title="SoundManager 2 debug output">debug output</a> and <a href="doc/getstarted/#troubleshooting" title="SoundManager 2 troubleshooting tool">troubleshooting tools</a></li>
|
||||
<li>Community-based <a href="http://getsatisfaction.com/schillmania/products/schillmania_soundmanager_2" title="discussion/support for SoundManager 2 on Get Satisfaction">discussion/support</a></li>
|
||||
</ul>
|
||||
|
||||
|
||||
<h4>As Heard On <span class="scratched-out">TV</span> The Internets</h4>
|
||||
<p class="tight compact">A few nifty places SoundManager 2 has been seen in use on the Wild World Web:</p>
|
||||
<div class="inthewild">
|
||||
|
@ -405,7 +405,7 @@ body #sm2-container embed {
|
|||
</div>
|
||||
|
||||
<div class="clear"> </div>
|
||||
|
||||
|
||||
<div class="columnar">
|
||||
|
||||
<div class="c1">
|
||||
|
@ -429,16 +429,16 @@ body #sm2-container embed {
|
|||
mySound.play();</code></pre>
|
||||
<p><a href="demo/api/">See API Demos</a></p>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="columnar">
|
||||
|
||||
|
||||
<div class="c1">
|
||||
<h2>Using SM2 on your site</h2>
|
||||
<p>How to include SoundManager 2 from HTML, and some basic event handlers.</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="c2">
|
||||
<p>Include the SoundManager 2 core script, tell it where to look for the flash .SWF and provide an onload() handler.</p>
|
||||
<pre class="block"><code><script type="text/javascript" src="<span>/path/to/soundmanager2.js</span>"></script>
|
||||
|
@ -453,16 +453,16 @@ soundManager.onload = function() {
|
|||
<p><a href="demo/template/">See a basic template demo</a></p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div id="licensing" class="columnar">
|
||||
<div id="licensing" class="columnar">
|
||||
|
||||
<div class="c1">
|
||||
<h2>Licensing</h2>
|
||||
<p>BSD licensed.</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="c2">
|
||||
<p>SoundManager 2 is provided under a <a href="license.txt" title="SoundManager 2 BSD license" class="norewrite">BSD license</a>.</p>
|
||||
</div>
|
||||
|
@ -471,7 +471,7 @@ soundManager.onload = function() {
|
|||
|
||||
<!-- columnar -->
|
||||
</div>
|
||||
|
||||
|
||||
<div class="clear"></div>
|
||||
|
||||
<div id="col3" class="c3">
|
||||
|
@ -522,7 +522,7 @@ init();
|
|||
</script>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
@ -6,7 +6,7 @@ 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
|
||||
* 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
|
||||
|
|
|
@ -56,7 +56,7 @@
|
|||
}
|
||||
|
||||
#sm2-test ul.items li div.details {
|
||||
display:none;
|
||||
display:none;
|
||||
}
|
||||
|
||||
#sm2-test ul.items li.open div.details,
|
||||
|
|
|
@ -30,7 +30,7 @@
|
|||
<script type="text/javascript" src="../script/soundmanager2.js"></script>
|
||||
<script type="text/javascript">
|
||||
// optional
|
||||
soundManager.url = '../swf/';
|
||||
soundManager.url = '../swf/';
|
||||
soundManager.onload = function() {}
|
||||
|
||||
</script>
|
||||
|
@ -82,7 +82,7 @@ soundManager.onload = function() {}
|
|||
</li>
|
||||
<li>
|
||||
Is your browser URL at file:// or c:/path/ or otherwise not using HTTP? Flash security "whitelisting" is required to allow Flash + JS to work when offline, placing it in the "LocalTrusted" Flash security sandbox rather than "localWithFile".
|
||||
|
||||
|
||||
<div id="d-flashtojs-offline" style="padding-bottom:1em">
|
||||
<h4>Offline viewing: Adding a "trusted location" to the Flash Security Settings Panel</h4>
|
||||
<p>The Flash Player Global Security Settings Panel is a web-based control panel which allows you to configure Flash security. You will need to add the path of the SoundManager 2 project in order for it to work "offline" (ie., when viewing via file:// or c:/)</p>
|
||||
|
@ -95,7 +95,7 @@ soundManager.onload = function() {}
|
|||
</div>
|
||||
<p><a href="http://www.macromedia.com/support/documentation/en/flashplayer/help/settings_manager04.html" target="_blank" class="feature">Launch the Flash Security Settings Panel</a></p>
|
||||
</div>
|
||||
|
||||
|
||||
</li>
|
||||
<li style="margin-top:0.5em">Flash blockers (FlashBlock, "click to flash" etc.) preventing flash load and start-up - need whitelisting/"allow this domain" to work smoothly. If you suspect blocking is the issue, try the <a href="../demo/flashblock/">SoundManager 2 Flashblock demo</a>.</li>
|
||||
<li style="margin-top:0.5em">Online viewing (HTTP/S): Same-domain security rules apply to HTML + Flash content by default (crossdomain.xml/allowDomain() in .AS source required to override.)</li>
|
||||
|
@ -120,7 +120,7 @@ soundManager.onload = function() {}
|
|||
<div class="details">
|
||||
<p>At this point, Javascript attempts to respond to Flash's initial outgoing Flash -> JS call, completing the test for JS/flash communication. If SM2 does not receive a response from flash, it will eventually fail.</p>
|
||||
<p>Offline viewing conditions and cross-domain security rules will prevent Flash <-> JS communication. See the details of Flash -> JS for information.</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li id="d-soundtest" class="default">
|
||||
|
|
68
js/main.js
68
js/main.js
|
@ -4,13 +4,13 @@ var Game = new app({
|
|||
'order!layouts/PlayerLayer',
|
||||
'order!layouts/Ennemies'
|
||||
],
|
||||
'wrapper': $('#GameContainer')
|
||||
'wrapper': $('#GameContainer')
|
||||
}),
|
||||
GameVersion = 0 ;
|
||||
|
||||
|
||||
// Init Application and bind all games events
|
||||
jQuery(document).ready(function() {
|
||||
|
||||
|
||||
/**************************************************************************
|
||||
* Load Dependencies & Create Application
|
||||
***************************************************************************/
|
||||
|
@ -18,42 +18,42 @@ jQuery(document).ready(function() {
|
|||
var baseLibs = [
|
||||
'order!libs/jquery.transform-0.9.3.min',
|
||||
'order!layouts/LayoutClass'
|
||||
] ;
|
||||
|
||||
] ;
|
||||
|
||||
require({
|
||||
baseUrl: "js/",
|
||||
urlArgs: "bust=" + GameVersion
|
||||
},
|
||||
},
|
||||
baseLibs,
|
||||
|
||||
|
||||
// -- All objects are loaded => can run
|
||||
function() {
|
||||
|
||||
|
||||
// -- Init Stage or show IE popup
|
||||
if ( ! $.browser.msie || ( $.browser.msie && $.browser.version >= 9 ) ) {
|
||||
Game.init() ;
|
||||
} else {
|
||||
alert('Sorry but this game only works in good navigators. Please download Google Chrome or Firefox' ) ;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
);
|
||||
|
||||
|
||||
);
|
||||
|
||||
|
||||
/**************************************************************************
|
||||
* Game Controls Events
|
||||
***************************************************************************/
|
||||
|
||||
|
||||
// -- Game is loaded
|
||||
$(document).bind('gameLoaded', function(e, res) {
|
||||
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
|
||||
// -- Init Game
|
||||
$(document).bind('gameInit', function(e, res) {
|
||||
$(document).trigger('gameReset') ;
|
||||
}) ;
|
||||
|
||||
}) ;
|
||||
|
||||
// -- Game Reset
|
||||
$(document).bind('gameReset', function(e, res) {
|
||||
Game.score = 0 ;
|
||||
|
@ -69,43 +69,43 @@ jQuery(document).ready(function() {
|
|||
}
|
||||
}) ;
|
||||
}) ;
|
||||
|
||||
|
||||
$('#ground, #ship').fadeTo(500, 1) ;
|
||||
|
||||
|
||||
if ( timers.loopGame ) clearInterval(timers.loopGame) ;
|
||||
timers.loopGame = setInterval(Game.loopAnimation, 1000/FPS) ;
|
||||
}) ;
|
||||
|
||||
|
||||
// -- Start Animation
|
||||
$(document).bind('gameStart', function(e, res) {
|
||||
|
||||
|
||||
$('#hud').fadeIn(500) ;
|
||||
|
||||
|
||||
if ( timers.loopGame ) clearInterval(timers.loopGame) ;
|
||||
timers.loopGame = setInterval(Game.loopAnimation, 1000/FPS) ;
|
||||
}) ;
|
||||
|
||||
|
||||
// -- 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) ;
|
||||
$('#ground, #ship').fadeTo(500, 0.2) ;
|
||||
|
||||
|
||||
// -- Play Sound
|
||||
soundManager.play('gameOver') ;
|
||||
|
||||
|
||||
// -- Stop loopAnimation
|
||||
if ( timers.loopGame ) clearInterval(timers.loopGame) ;
|
||||
|
||||
|
||||
}) ;
|
||||
|
||||
|
||||
|
||||
|
||||
// -- Bind Start Button
|
||||
$('#start-game').click(function() {
|
||||
soundManager.play('click') ;
|
||||
|
@ -117,8 +117,8 @@ jQuery(document).ready(function() {
|
|||
}, function() {
|
||||
$(this).removeClass('hover') ;
|
||||
}) ;
|
||||
|
||||
|
||||
|
||||
|
||||
// -- Bind Restart Screen controls
|
||||
$('#restart-game').click(function() {
|
||||
soundManager.play('click') ;
|
||||
|
@ -130,6 +130,6 @@ jQuery(document).ready(function() {
|
|||
}, function() {
|
||||
$(this).removeClass('hover') ;
|
||||
}) ;
|
||||
|
||||
|
||||
|
||||
}) ;
|
|
@ -1,4 +1,4 @@
|
|||
|
||||
|
||||
/**************************************************************************
|
||||
* SOUNDMANAGER CONFIG
|
||||
***************************************************************************/
|
||||
|
@ -6,13 +6,13 @@
|
|||
soundManager.bgColor = '#ffffff';
|
||||
soundManager.debugMode = false;
|
||||
soundManager.url = 'js/libs/soundmanager/swf/';
|
||||
soundManager.wmode = 'transparent'; // hide initial flash of white on everything except firefox/win32
|
||||
soundManager.allowScriptAccess = 'always';
|
||||
soundManager.useFastPolling = true;
|
||||
soundManager.flashVersion = 9;
|
||||
soundManager.flashLoadTimeout = 3000;
|
||||
soundManager.wmode = 'transparent'; // hide initial flash of white on everything except firefox/win32
|
||||
soundManager.allowScriptAccess = 'always';
|
||||
soundManager.useFastPolling = true;
|
||||
soundManager.flashVersion = 9;
|
||||
soundManager.flashLoadTimeout = 3000;
|
||||
soundManager.useHTML5Audio = true;
|
||||
|
||||
|
||||
// -- when ready, preload sounds
|
||||
soundManager.onready(function() {
|
||||
|
||||
|
@ -35,8 +35,8 @@
|
|||
this.play();
|
||||
}
|
||||
});
|
||||
|
||||
// -- Click
|
||||
|
||||
// -- Click
|
||||
soundManager.createSound({
|
||||
id: 'click',
|
||||
url: 'audio/click.ogg',
|
||||
|
@ -45,7 +45,7 @@
|
|||
multiShot: false,
|
||||
volume: 50
|
||||
});
|
||||
|
||||
|
||||
// -- Fire
|
||||
soundManager.createSound({
|
||||
id: 'shoot',
|
||||
|
@ -55,7 +55,7 @@
|
|||
multiShot: true,
|
||||
volume: 30
|
||||
});
|
||||
|
||||
|
||||
// -- Explode
|
||||
soundManager.createSound({
|
||||
id: 'explode',
|
||||
|
@ -65,7 +65,7 @@
|
|||
multiShot: true,
|
||||
volume: 10
|
||||
});
|
||||
|
||||
|
||||
// -- Game Over
|
||||
soundManager.createSound({
|
||||
id: 'gameOver',
|
||||
|
@ -75,12 +75,11 @@
|
|||
multiShot: true,
|
||||
volume: 10
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
});
|
||||
|
||||
|
||||
soundManager.ontimeout(function() {
|
||||
var smLoadFailWarning = 'Oh snap! : ' + (soundManager.hasHTML5 ? 'The flash portion of ' : '') + 'SoundManager 2 was unable to start. ';
|
||||
_log(smLoadFailWarning) ;
|
||||
});
|
||||
|
Loading…
Reference in a new issue