Merge pull request #1 from GunioRobot/clean

Hi! I cleaned up your code for you!
This commit is contained in:
Glenn Y. Rolland 2011-12-26 09:35:39 -08:00
commit b35bbab15c
45 changed files with 562 additions and 563 deletions

View file

@ -37,7 +37,7 @@
#background { #background {
background: transparent url(../images/debug-bg.jpg) repeat 0 0; background: transparent url(../images/debug-bg.jpg) repeat 0 0;
z-index: 0; z-index: 0;
} }
#ground { z-index: 30; } #ground { z-index: 30; }
@ -45,7 +45,7 @@
/* The Ship */ /* The Ship */
#game #ship { #game #ship {
position: absolute; position: absolute;
display: none; display: none;
top:0; top:0;
@ -53,7 +53,7 @@
background: transparent; background: transparent;
} }
#ship .wing { #ship .wing {
position: absolute; position: absolute;
top:33px; top:33px;
left:6px; left:6px;
@ -240,7 +240,7 @@
#game-over #share-buttons { #game-over #share-buttons {
position: relative; position: relative;
display: block; display: block;
text-align: center; text-align: center;
padding: 10px 0; padding: 10px 0;
} }
@ -255,7 +255,7 @@
position: relative; position: relative;
display: block; display: block;
opacity: 0.1; opacity: 0.1;
outline: none; outline: none;
} }
#game-over #share-buttons a img { border:none; outline: none; } #game-over #share-buttons a img { border:none; outline: none; }

View file

@ -2,28 +2,28 @@
<html xmlns="http://www.w3.org/1999/xhtml" <html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://opengraphprotocol.org/schema/" xmlns:og="http://opengraphprotocol.org/schema/"
xmlns:fb="http://www.facebook.com/2008/fbml"> xmlns:fb="http://www.facebook.com/2008/fbml">
<head> <head>
<!-- Google Chrome Frame Compatibility --> <!-- Google Chrome Frame Compatibility -->
<meta http-equiv="X-UA-Compatible" content="chrome=1" /> <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 --> <!-- SEO Friendly -->
<title>Wyrian - A clone Game of Tyrian in HTML5</title> <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 --> <!-- Facebook Meta Tags -->
<meta property="og:type" content="game" /> <meta property="og:type" content="game" />
<meta property="og:title" content="Wyrian - An awesome clone Game of Tyrian in HTML5" /> <meta property="og:title" content="Wyrian - An awesome clone Game of Tyrian in HTML5" />
<meta property="og:site_name" content="Wyrian" /> <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: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."/> <meta property="og:description" content="Wyrian : An awesome clone Game of Tyrian. Developed during the HTML5 Game Jam 2011 at Paris."/>
<!-- Stylesheets --> <!-- Stylesheets -->
<link rel="stylesheet" media="all" href="css/style.css" /> <link rel="stylesheet" media="all" href="css/style.css" />
<link href="http://fonts.googleapis.com/css?family=Orbitron:400,500,700,900" rel="stylesheet" type="text/css" > <link href="http://fonts.googleapis.com/css?family=Orbitron:400,500,700,900" rel="stylesheet" type="text/css" >
</head> </head>
<body> <body>
<!-- Game Intro --> <!-- Game Intro -->
@ -31,7 +31,7 @@
<div class="text orbitron">Wyrian</div> <div class="text orbitron">Wyrian</div>
<div id="start-game" class="orbitron">Play</div> <div id="start-game" class="orbitron">Play</div>
</div> </div>
<!-- Game Over --> <!-- Game Over -->
<div id="game-over"> <div id="game-over">
<div class="text orbitron">GAME OVER</div> <div class="text orbitron">GAME OVER</div>
@ -45,7 +45,7 @@
</div> </div>
</div> </div>
</div> </div>
<!-- Scene --> <!-- Scene -->
<div class="container" id="GameContainer"> <div class="container" id="GameContainer">
<div id="background" class="layout"></div> <div id="background" class="layout"></div>
@ -68,40 +68,40 @@
<div class="orbitron" id="fpsCounter">FPS : <span>0</span></div> <div class="orbitron" id="fpsCounter">FPS : <span>0</span></div>
</div> </div>
</div> </div>
<div id="soundManager" class=""></div> <div id="soundManager" class=""></div>
<!-- The footer... --> <!-- The footer... -->
<footer id="credits" class=""> <footer id="credits" class="">
<strong>HTML5 Game Jam 2011</strong><br> <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 :) <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> </footer>
<!-- Main JS Libs --> <!-- Main JS Libs -->
<script type="text/javascript" src="js/libs/jquery-1.5.js"></script> <script type="text/javascript" src="js/libs/jquery-1.5.js"></script>
<script type="text/javascript" src="js/libs/require.js"></script> <script type="text/javascript" src="js/libs/require.js"></script>
<!-- Sound Library --> <!-- Sound Library -->
<script type="text/javascript" src="js/libs/soundmanager/script/soundmanager2.js"></script> <script type="text/javascript" src="js/libs/soundmanager/script/soundmanager2.js"></script>
<script type="text/javascript" src="js/sounds.load.js"></script> <script type="text/javascript" src="js/sounds.load.js"></script>
<!-- Game Libs --> <!-- Game Libs -->
<script type="text/javascript" src="js/GameClass.js"></script> <script type="text/javascript" src="js/GameClass.js"></script>
<script type="text/javascript" src="js/main.js"></script> <script type="text/javascript" src="js/main.js"></script>
<!-- ANalytics Tracking --> <!-- ANalytics Tracking -->
<script type="text/javascript"> <script type="text/javascript">
var _gaq = _gaq || []; var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-12891268-4']); _gaq.push(['_setAccount', 'UA-12891268-4']);
_gaq.push(['_trackPageview']); _gaq.push(['_trackPageview']);
(function() { (function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; 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'; 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); var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})(); })();
</script> </script>
<!-- 1x1 stat pixel --> <!-- 1x1 stat pixel -->
<img src="/t/?action=WyrianGame&u=http%3A%2F%2Fwww.html5place.com%2Flab%2Fwyrian%2F" /> <img src="/t/?action=WyrianGame&u=http%3A%2F%2Fwww.html5place.com%2Flab%2Fwyrian%2F" />

View file

@ -8,50 +8,50 @@ var Game = null ;
// -- Init scene prototype // -- Init scene prototype
var app = function(opts) { var app = function(opts) {
this.name = "Wyrian - A Tyrian Arcade Game Clone" ; this.name = "Wyrian - A Tyrian Arcade Game Clone" ;
this.version = '0.2a' ; this.version = '0.2a' ;
// Init uniqId // Init uniqId
this.uniqId = 0 ; this.uniqId = 0 ;
// Default settings // Default settings
var settings = { var settings = {
libs: {} libs: {}
} ; } ;
$.extend(true, settings, opts); $.extend(true, settings, opts);
this.settings = settings ; this.settings = settings ;
// Set Scene size // Set Scene size
this.width = $(document).width() ; this.width = $(document).width() ;
this.height = $(document).height() ; this.height = $(document).height() ;
// Listen for inputs // Listen for inputs
this.input = new this.Input() ; this.input = new this.Input() ;
// Return object // Return object
return this; return this;
} ; } ;
// -- Bind init call // -- Bind init call
app.prototype.init = function() { app.prototype.init = function() {
var self = this ; var self = this ;
require({ require({
baseUrl: "js/", baseUrl: "js/",
urlArgs: "bust=" + GameVersion urlArgs: "bust=" + GameVersion
}, },
// -- Layout to load // -- Layout to load
self.settings.layers, self.settings.layers,
// -- All objects are loaded => can run // -- All objects are loaded => can run
function() { function() {
$(document).trigger('gameLoaded') ; $(document).trigger('gameLoaded') ;
} }
); );
if ( typeof this.settings.init == 'function') { if ( typeof this.settings.init == 'function') {
this.settings.init() ; this.settings.init() ;
} }
@ -65,8 +65,8 @@ app.prototype.log = function(txt) {
} }
// -- Call all canvas updates if declared as 'running' // -- Call all canvas updates if declared as 'running'
app.prototype.loopAnimation = function() { app.prototype.loopAnimation = function() {
// -- Search for elements that have to be updated // -- Search for elements that have to be updated
Game.activeElements = 0 ; Game.activeElements = 0 ;
for ( var i in Layouts ) { for ( var i in Layouts ) {
@ -75,10 +75,10 @@ app.prototype.loopAnimation = function() {
_layout.update() ; _layout.update() ;
} }
} }
// -- Get level // -- Get level
Level = Math.floor((Game.score||0)/1000) ; Level = Math.floor((Game.score||0)/1000) ;
// -- Create ennemies if needed // -- Create ennemies if needed
var numEnnemies = 0 ; var numEnnemies = 0 ;
if ( Layouts.Ennemies ) { if ( Layouts.Ennemies ) {
@ -90,10 +90,10 @@ app.prototype.loopAnimation = function() {
Layouts.Ennemies.createRandom() ; Layouts.Ennemies.createRandom() ;
} }
} }
// -- Init loops counter // -- Init loops counter
Game.loops = Game.loops||0 ; Game.loops = Game.loops||0 ;
// -- Init vars // -- Init vars
if ( Game.loops == 0 ) { if ( Game.loops == 0 ) {
this.frameCount = 0; this.frameCount = 0;
@ -101,7 +101,7 @@ app.prototype.loopAnimation = function() {
this.maxfps = 1 / (FPS / 1000); this.maxfps = 1 / (FPS / 1000);
this.lastTime = new Date(); this.lastTime = new Date();
} }
// -- Calculate time deltas and find fps value // -- Calculate time deltas and find fps value
var nowTime = new Date(); var nowTime = new Date();
var diffTime = Math.ceil((nowTime.getTime() - this.lastTime.getTime())); var diffTime = Math.ceil((nowTime.getTime() - this.lastTime.getTime()));
@ -111,10 +111,10 @@ app.prototype.loopAnimation = function() {
this.lastTime = nowTime; this.lastTime = nowTime;
} }
this.frameCount++; this.frameCount++;
// -- Increase loop counter // -- Increase loop counter
Game.loops++ ; Game.loops++ ;
// -- Refresh Scores and HUD informations // -- Refresh Scores and HUD informations
$('#score span').html(Game.score) ; $('#score span').html(Game.score) ;
$('#activeElements span').html(Game.activeElements) ; $('#activeElements span').html(Game.activeElements) ;
@ -142,7 +142,7 @@ app.prototype.Input = function() {
if(e.keyCode==32) { if(e.keyCode==32) {
that.keyboard['space'] = val; that.keyboard['space'] = val;
e.preventDefault() ; e.preventDefault() ;
e.stopPropagation() ; e.stopPropagation() ;
} }
if(e.keyCode==17) if(e.keyCode==17)
that.keyboard['ctrl'] = val; that.keyboard['ctrl'] = val;

View file

@ -5,20 +5,20 @@ Layouts.Background = new Layout({
// -- Define elements to draw with options // -- Define elements to draw with options
el: [{ el: [{
id: 'ground', id: 'ground',
animate: function(obj) { animate: function(obj) {
obj.y -= obj.parent.settings.speed*obj.parent.settings.direction; obj.y -= obj.parent.settings.speed*obj.parent.settings.direction;
obj.parent.settings.dom.css({backgroundPosition: '0 '+obj.y+'px'}) ; obj.parent.settings.dom.css({backgroundPosition: '0 '+obj.y+'px'}) ;
obj.nodraw = true ; obj.nodraw = true ;
} }
}], }],
// -- Define current Speed // -- Define current Speed
speed: 5, speed: 5,
direction: -1, direction: -1,
nomove: true, nomove: true,
// -- Define canvas parent // -- Define canvas parent
dom: $('div#background') dom: $('div#background')
}) ; }) ;

View file

@ -5,14 +5,14 @@ Layouts.Ennemies = new Layout({
// -- Define elements to draw with options // -- Define elements to draw with options
el: [], el: [],
images: ['images/sprites/alien_1.png?_=1', 'images/sprites/alien_2.png?_=1', 'images/sprites/explosion-sprite.png' ], images: ['images/sprites/alien_1.png?_=1', 'images/sprites/alien_2.png?_=1', 'images/sprites/explosion-sprite.png' ],
// -- Define current Speed // -- Define current Speed
speed: 7, speed: 7,
direction: 1, direction: 1,
// -- Define canvas parent // -- Define canvas parent
dom: $('div#ground') dom: $('div#ground')
}) ; }) ;
// -- Restart enemy // -- Restart enemy
@ -28,7 +28,7 @@ Layouts.Ennemies.reinitObj = function(obj) {
// -- Create a random ennemy // -- Create a random ennemy
Layouts.Ennemies.createRandom = function(opts) { Layouts.Ennemies.createRandom = function(opts) {
var self = this ; var self = this ;
var libsAlien = [ var libsAlien = [
{ {
width: 80, width: 80,
@ -43,10 +43,10 @@ Layouts.Ennemies.createRandom = function(opts) {
sprites: [0] sprites: [0]
} }
] ; ] ;
// Choose one in the lib // Choose one in the lib
var alien = libsAlien[Math.floor(Math.random()*libsAlien.length)] ; var alien = libsAlien[Math.floor(Math.random()*libsAlien.length)] ;
// Construct global properties // Construct global properties
alien.name = 'ennemy' ; alien.name = 'ennemy' ;
alien.type = 'alien' ; alien.type = 'alien' ;
@ -60,7 +60,7 @@ Layouts.Ennemies.createRandom = function(opts) {
obj.explosing = true ; obj.explosing = true ;
obj.box.hide(0); obj.box.hide(0);
obj = self.reinitObj(obj); obj = self.reinitObj(obj);
Game.score = Game.score || 0 ; Game.score = Game.score || 0 ;
Game.score += obj.settings.power ; Game.score += obj.settings.power ;
} ; } ;
@ -84,8 +84,8 @@ Layouts.Ennemies.createExplosion = function(object) {
var self = this ; var self = this ;
var explosion = { var explosion = {
name: 'explosion', name: 'explosion',
type: 'neutral', type: 'neutral',
width:330, width:330,
height:330, height:330,
imageSrc: self.settings.images[2], imageSrc: self.settings.images[2],
@ -95,19 +95,19 @@ Layouts.Ennemies.createExplosion = function(object) {
obj.settings.spriteMod = 5 ; obj.settings.spriteMod = 5 ;
} }
} }
var newObj = this.createObj(explosion) ; var newObj = this.createObj(explosion) ;
self.els.push(newObj) ; self.els.push(newObj) ;
if ( timers.playSoundExplode ) clearTimeout(timers.playSoundExplode) ; if ( timers.playSoundExplode ) clearTimeout(timers.playSoundExplode) ;
timers.playSoundExplode = setTimeout(function() { timers.playSoundExplode = setTimeout(function() {
soundManager.play('explode') ; soundManager.play('explode') ;
}, 1000/FPS) ; }, 1000/FPS) ;
setTimeout(function() { setTimeout(function() {
newObj.deleteObj() ; newObj.deleteObj() ;
if ( ! Layouts.Player.running ) if ( ! Layouts.Player.running )
$(document).trigger('gameComplete') ; $(document).trigger('gameComplete') ;
}, 500) ; }, 500) ;
} ; } ;

View file

@ -9,20 +9,20 @@ var Layout = function(opts) {
dom: null dom: null
} ; } ;
$.extend(settings, opts) ; $.extend(settings, opts) ;
// -- Set running or not // -- Set running or not
this.running = true ; this.running = true ;
// -- Store settings // -- Store settings
this.settings = settings ; this.settings = settings ;
// -- Declare Scene here // -- Declare Scene here
this.dom = this.settings.dom.get(0) ; this.dom = this.settings.dom.get(0) ;
// -- Set width and height shortcuts // -- Set width and height shortcuts
this.width = this.settings.dom.width() ; this.width = this.settings.dom.width() ;
this.height = this.settings.dom.height() ; this.height = this.settings.dom.height() ;
// -- Create objects in scene // -- Create objects in scene
this.els = [] ; this.els = [] ;
if ( typeof settings.el == 'object' ) { if ( typeof settings.el == 'object' ) {
@ -30,9 +30,9 @@ var Layout = function(opts) {
this.els.push(this.createObj(settings.el[i])) ; this.els.push(this.createObj(settings.el[i])) ;
} }
} }
return this; return this;
}; };
// -- Update elements into layout // -- Update elements into layout
Layout.prototype.update = function() { Layout.prototype.update = function() {
@ -42,8 +42,8 @@ Layout.prototype.update = function() {
if( ! _el.deleteAfter ) { if( ! _el.deleteAfter ) {
_el.animate() ; _el.animate() ;
} }
else { else {
_el.box.addClass('removed').remove() ; _el.box.addClass('removed').remove() ;
delete this.els[j] ; delete this.els[j] ;
} }
} }
@ -52,23 +52,23 @@ Layout.prototype.update = function() {
// -- Create an object // -- Create an object
Layout.prototype.createObj = function(opts) { Layout.prototype.createObj = function(opts) {
var self = this ; var self = this ;
// -- Init and build Framebuffer object // -- Init and build Framebuffer object
var Obj = function (optsObj) { var Obj = function (optsObj) {
// -- Parse options // -- Parse options
var settingsObj = { var settingsObj = {
origin: { x: 0, y: 0}, origin: { x: 0, y: 0},
imageSrc: false, imageSrc: false,
backgroundColor: 'transparent', backgroundColor: 'transparent',
backgroundRepeat: 'no-repeat', backgroundRepeat: 'no-repeat',
backgroundPosition: '0 0', backgroundPosition: '0 0',
imageOrigin: { x:0, y:0 } imageOrigin: { x:0, y:0 }
} ; } ;
$.extend(true, settingsObj, optsObj) ; $.extend(true, settingsObj, optsObj) ;
// -- Store options // -- Store options
this.parent = self ; this.parent = self ;
this.name = settingsObj.name || 'default' ; this.name = settingsObj.name || 'default' ;
@ -76,7 +76,7 @@ Layout.prototype.createObj = function(opts) {
this.width = settingsObj.width ? settingsObj.width : self.width ; this.width = settingsObj.width ? settingsObj.width : self.width ;
this.height = settingsObj.height ? settingsObj.height : self.height ; this.height = settingsObj.height ? settingsObj.height : self.height ;
this.settings = settingsObj ; this.settings = settingsObj ;
// -- Find backgroundImage in CSS if specified // -- Find backgroundImage in CSS if specified
if ( ! settingsObj.imageSrc ) { if ( ! settingsObj.imageSrc ) {
var bgImg = self.settings.dom.css('backgroundImage') ; var bgImg = self.settings.dom.css('backgroundImage') ;
@ -84,67 +84,67 @@ Layout.prototype.createObj = function(opts) {
settingsObj.imageSrc = bgImg ; settingsObj.imageSrc = bgImg ;
} }
} }
// -- Init position // -- Init position
this.init() ; this.init() ;
// -- Create a DOM object // -- Create a DOM object
this.box = $('#'+this.id) ; this.box = $('#'+this.id) ;
this.dynamic = false ; this.dynamic = false ;
this.cssObj = {} ; this.cssObj = {} ;
if ( ! this.box.length ) { if ( ! this.box.length ) {
this.box = $('<div>', { this.box = $('<div>', {
'class':'sprite '+this.name, 'class':'sprite '+this.name,
'id': this.id 'id': this.id
}) ; }) ;
this.cssObj = { this.cssObj = {
position: 'absolute', position: 'absolute',
top: 0, top: 0,
left: 0, left: 0,
display: 'block', display: 'block',
backgroundColor: settingsObj.backgroundColor, backgroundColor: settingsObj.backgroundColor,
backgroundRepeat: settingsObj.backgroundRepeat, backgroundRepeat: settingsObj.backgroundRepeat,
backgroundPosition: settingsObj.backgroundPosition, backgroundPosition: settingsObj.backgroundPosition,
backgroundImage: settingsObj.imageSrc ? 'url('+settingsObj.imageSrc+')' : '' backgroundImage: settingsObj.imageSrc ? 'url('+settingsObj.imageSrc+')' : ''
} ; } ;
this.dynamic = true ; this.dynamic = true ;
} }
// -- Apply CSS // -- Apply CSS
this.cssObj.width = this.width ; this.cssObj.width = this.width ;
this.cssObj.height = this.height ; this.cssObj.height = this.height ;
// -- Move // -- Move
if ( ! this.settings.nomove ) { if ( ! this.settings.nomove ) {
this.cssObj.translate = this.x+'px, '+this.y+'px' ; this.cssObj.translate = this.x+'px, '+this.y+'px' ;
} }
// -- Apply CSS Append and display // -- Apply CSS Append and display
this.box.css(this.cssObj) ; this.box.css(this.cssObj) ;
if ( this.dynamic ) this.box.appendTo(self.dom) ; if ( this.dynamic ) this.box.appendTo(self.dom) ;
} ; } ;
// -- Init // -- Init
Obj.prototype.init = function() { Obj.prototype.init = function() {
this.x = this.settings.origin.x ; this.x = this.settings.origin.x ;
this.y = this.settings.origin.y ; this.y = this.settings.origin.y ;
} ; } ;
// -- Return instance // -- Return instance
Obj.prototype.getInstance = function() { Obj.prototype.getInstance = function() {
return this; return this;
} ; } ;
// -- Draw object into scene // -- Draw object into scene
Obj.prototype.draw = function() { 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) ) { if ( (this.y >= -2*this.height) && (this.y <= (Game.height+this.height)) && this.x >= -this.width && this.x <= (Game.width+this.width) ) {
Game.activeElements++ ; Game.activeElements++ ;
// -- Set sprite to display // -- Set sprite to display
if ( this.settings.sprites ) { if ( this.settings.sprites ) {
this.lastSprite = this.lastSprite || 0 ; this.lastSprite = this.lastSprite || 0 ;
@ -152,7 +152,7 @@ Layout.prototype.createObj = function(opts) {
if ( typeof this.settings.sprites[this.lastSprite] == 'undefined' ) this.lastSprite = 0 ; if ( typeof this.settings.sprites[this.lastSprite] == 'undefined' ) this.lastSprite = 0 ;
this.box.css({'backgroundPosition': -1*this.settings.sprites[this.lastSprite]*this.settings.width+'px 0'}) ; this.box.css({'backgroundPosition': -1*this.settings.sprites[this.lastSprite]*this.settings.width+'px 0'}) ;
} }
// -- Move div // -- Move div
if ( ! this.settings.nomove ) { if ( ! this.settings.nomove ) {
if ( this.settings.moveParent ) { if ( this.settings.moveParent ) {
@ -162,30 +162,30 @@ Layout.prototype.createObj = function(opts) {
} }
} }
} }
} ; } ;
// -- Animate the Framebuffer into the scene // -- Animate the Framebuffer into the scene
Obj.prototype.animate = function() { Obj.prototype.animate = function() {
// -- Execute custom animate function if specified // -- Execute custom animate function if specified
if ( $.isFunction(this.settings.animate) ) { if ( $.isFunction(this.settings.animate) ) {
this.parent = self ; this.parent = self ;
this.settings.animate(this) ; this.settings.animate(this) ;
} }
// -- Detect collision // -- Detect collision
this.detectCollision() ; this.detectCollision() ;
// -- Apply effects // -- Apply effects
if ( ! this.nodraw ) this.draw() ; if ( ! this.nodraw ) this.draw() ;
} ; } ;
// -- Detect collision // -- Detect collision
Obj.prototype.detectCollision = function() { Obj.prototype.detectCollision = function() {
var obj = self ; var obj = self ;
// -- Detect collisions // -- Detect collisions
for ( var i in Layouts ) { for ( var i in Layouts ) {
var _layout = Layouts[i] ; var _layout = Layouts[i] ;
@ -193,53 +193,53 @@ Layout.prototype.createObj = function(opts) {
for ( var j in _layout.els ) { for ( var j in _layout.els ) {
var el = _layout.els[j], var el = _layout.els[j],
type = el.name ; type = el.name ;
// -- Detect only defined types // -- 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') ) { if ( (type == 'ennemy' || type == 'bullet' || type == 'ship') ) {
var A = { var A = {
x: this.x, x: this.x,
y: this.y, y: this.y,
xX: this.x+this.width, xX: this.x+this.width,
yY: this.y+this.height yY: this.y+this.height
} ; } ;
var B = { var B = {
x: el.x, x: el.x,
y: el.y, y: el.y,
xX: el.x + el.width, xX: el.x + el.width,
yY: el.y + el.height yY: el.y + el.height
} ; } ;
// -- Test if in viewport // -- Test if in viewport
if ( (type != this.name) && (this.name != 'default' && this.name != 'explosion') && (el.settings.type != this.settings.type) ) { if ( (type != this.name) && (this.name != 'default' && this.name != 'explosion') && (el.settings.type != this.settings.type) ) {
var touchTopRight = ( var touchTopRight = (
( B.x <= A.xX && B.x >= A.x ) ( B.x <= A.xX && B.x >= A.x )
&& &&
( B.yY >= A.y) && ( B.yY <= A.yY ) ( B.yY >= A.y) && ( B.yY <= A.yY )
) ? true : false ; ) ? true : false ;
var touchTopLeft = ( var touchTopLeft = (
( B.x >= A.x && B.x <= A.xX ) ( B.x >= A.x && B.x <= A.xX )
&& &&
( B.yY >= A.y) && ( B.yY <= A.yY ) ( B.yY >= A.y) && ( B.yY <= A.yY )
) ? true : false ; ) ? true : false ;
var touchBottomRight = ( var touchBottomRight = (
( B.x >= A.x && B.x <= A.xX ) ( B.x >= A.x && B.x <= A.xX )
&& &&
( B.y >= A.yY) && ( B.y <= A.y ) ( B.y >= A.yY) && ( B.y <= A.y )
) ? true : false ; ) ? true : false ;
var touchBottomLeft = ( var touchBottomLeft = (
( B.xX >= A.x && B.xX <= A.xX ) ( B.xX >= A.x && B.xX <= A.xX )
&& &&
( B.y >= A.yY) && ( B.y <= A.y ) ( B.y >= A.yY) && ( B.y <= A.y )
) ? true : false ; ) ? true : false ;
if ( touchTopRight || touchTopLeft || touchBottomRight || touchBottomLeft ) { if ( touchTopRight || touchTopLeft || touchBottomRight || touchBottomLeft ) {
if ( typeof el.settings.explode == 'function' ) { if ( typeof el.settings.explode == 'function' ) {
el.settings.explode(el) ; el.settings.explode(el) ;
@ -247,24 +247,24 @@ Layout.prototype.createObj = function(opts) {
if ( typeof this.settings.explode == 'function' ) { if ( typeof this.settings.explode == 'function' ) {
this.settings.explode(this) ; this.settings.explode(this) ;
} }
Game.log('█▬█ █ ▀█▀') ; Game.log('█▬█ █ ▀█▀') ;
} }
} }
} }
} }
} }
} }
} }
} ; } ;
// -- Remove object // -- Remove object
Obj.prototype.deleteObj = function() { Obj.prototype.deleteObj = function() {
this.deleteAfter = true ; this.deleteAfter = true ;
} }
return new Obj(opts) ; return new Obj(opts) ;
}; };

View file

@ -15,14 +15,14 @@ Layouts.Player = new Layout({
y: Game.height-220 y: Game.height-220
}, },
fireInterval: 300, fireInterval: 300,
explode: function(obj) { explode: function(obj) {
if ( ! obj ) return false ; if ( ! obj ) return false ;
obj.explosing = true ; obj.explosing = true ;
Layouts.Ennemies.createExplosion(obj) ; Layouts.Ennemies.createExplosion(obj) ;
Layouts.Player.running = false ; Layouts.Player.running = false ;
}, },
animate: function(obj) { animate: function(obj) {
// -- KEY up /down // -- KEY up /down
if ( Game.input.keyboard.up ) { if ( Game.input.keyboard.up ) {
if ( obj.y > 0 ) obj.y -= obj.parent.settings.speed ; if ( obj.y > 0 ) obj.y -= obj.parent.settings.speed ;
@ -30,15 +30,15 @@ Layouts.Player = new Layout({
if ( Game.input.keyboard.down && (obj.y < (Game.height-obj.height) ) ) { if ( Game.input.keyboard.down && (obj.y < (Game.height-obj.height) ) ) {
obj.y += obj.parent.settings.speed; obj.y += obj.parent.settings.speed;
} }
// -- Left/Right move : choose sprite sequence to display // -- Left/Right move : choose sprite sequence to display
if ( Game.input.keyboard.left && (obj.x > 0)) { if ( Game.input.keyboard.left && (obj.x > 0)) {
obj.x -= obj.parent.settings.speed; obj.x -= obj.parent.settings.speed;
} }
if ( Game.input.keyboard.right && (obj.x < Game.width-obj.width) ) { if ( Game.input.keyboard.right && (obj.x < Game.width-obj.width) ) {
obj.x += obj.parent.settings.speed; obj.x += obj.parent.settings.speed;
} }
// -- Press Space : fire // -- Press Space : fire
if ( Game.input.keyboard.space ) { if ( Game.input.keyboard.space ) {
obj.parent.fire(obj) ; obj.parent.fire(obj) ;
@ -46,7 +46,7 @@ Layouts.Player = new Layout({
} }
}, { }, {
id: 'ship_reactor', id: 'ship_reactor',
width: 44, width: 44,
height: 68, height: 68,
@ -60,21 +60,21 @@ Layouts.Player = new Layout({
obj.settings.sprites = [2,3,4] ; obj.settings.sprites = [2,3,4] ;
} }
} }
}], }],
// -- Define current Speed // -- Define current Speed
speed: 20, speed: 20,
direction: 1, direction: 1,
// -- Define canvas parent // -- Define canvas parent
dom: $('div#game') dom: $('div#game')
}) ; }) ;
// -- Bullets types // -- Bullets types
Layouts.Player.bulletLib = function(obj, bulletType) { Layouts.Player.bulletLib = function(obj, bulletType) {
var bulletConf = { var bulletConf = {
power: 40, power: 40,
imageSrc: 'images/bullet-electric-sprite.png', imageSrc: 'images/bullet-electric-sprite.png',
@ -83,15 +83,15 @@ Layouts.Player.bulletLib = function(obj, bulletType) {
direction: -1, direction: -1,
type: 'human', type: 'human',
name: 'bullet', name: 'bullet',
explode: function(obj) { explode: function(obj) {
if ( ! obj ) return false ; if ( ! obj ) return false ;
obj.explosing = true ; obj.explosing = true ;
obj.deleteAfter = true ; obj.deleteAfter = true ;
}, },
origin: {x:0, y:0} origin: {x:0, y:0}
} ; } ;
// -- Default Left // -- Default Left
if ( bulletType == 'weapon_pilot' ) { if ( bulletType == 'weapon_pilot' ) {
bulletConf.width = 16 ; bulletConf.width = 16 ;
bulletConf.height = 64 ; bulletConf.height = 64 ;
@ -100,7 +100,7 @@ Layouts.Player.bulletLib = function(obj, bulletType) {
bulletConf.origin.x = obj.x-6+obj.width/2 ; bulletConf.origin.x = obj.x-6+obj.width/2 ;
bulletConf.origin.y = obj.y - bulletConf.height ; bulletConf.origin.y = obj.y - bulletConf.height ;
} }
// -- Big Left // -- Big Left
if ( bulletType == 'big_left' ) { if ( bulletType == 'big_left' ) {
bulletConf.width = 60 ; bulletConf.width = 60 ;
@ -109,7 +109,7 @@ Layouts.Player.bulletLib = function(obj, bulletType) {
bulletConf.origin.x = obj.x+18+obj.width/2 ; bulletConf.origin.x = obj.x+18+obj.width/2 ;
bulletConf.origin.y = obj.y + 50 - bulletConf.height ; bulletConf.origin.y = obj.y + 50 - bulletConf.height ;
} }
// -- Big Left // -- Big Left
if ( bulletType == 'big_right' ) { if ( bulletType == 'big_right' ) {
bulletConf.width = 60 ; bulletConf.width = 60 ;
@ -118,12 +118,12 @@ Layouts.Player.bulletLib = function(obj, bulletType) {
bulletConf.origin.x = obj.x-75+obj.width/2 ; bulletConf.origin.x = obj.x-75+obj.width/2 ;
bulletConf.origin.y = obj.y + 50 - bulletConf.height ; bulletConf.origin.y = obj.y + 50 - bulletConf.height ;
} }
// -- The animate function // -- The animate function
bulletConf.animate = function(obj) { bulletConf.animate = function(obj) {
if ( obj.deleteAfter ) return false; if ( obj.deleteAfter ) return false;
if ( obj.explosing ) { if ( obj.explosing ) {
Game.log(obj) ; Game.log(obj) ;
return false ; return false ;
} }
@ -132,25 +132,25 @@ Layouts.Player.bulletLib = function(obj, bulletType) {
obj.deleteObj() ; obj.deleteObj() ;
} }
} ; } ;
// Add the bullet to display // Add the bullet to display
return this.createObj(bulletConf) ; return this.createObj(bulletConf) ;
} ; } ;
// -- Fire bullets on space bar // -- Fire bullets on space bar
Layouts.Player.fire = function(obj) { Layouts.Player.fire = function(obj) {
// Get now time and lastfired // Get now time and lastfired
this.now = (new Date().getTime()) ; this.now = (new Date().getTime()) ;
this.lastFired = this.lastFired || this.now ; this.lastFired = this.lastFired || this.now ;
// If firing, wait for next interval // If firing, wait for next interval
if ( (this.now-this.lastFired) < (obj.settings.fireInterval) ) return false; if ( (this.now-this.lastFired) < (obj.settings.fireInterval) ) return false;
// Store now for last fired event // Store now for last fired event
this.lastFired = this.now ; this.lastFired = this.now ;
// Create new bullets // Create new bullets
var bullets = [] ; var bullets = [] ;
bullets.push(this.bulletLib(obj, 'weapon_pilot')) ; bullets.push(this.bulletLib(obj, 'weapon_pilot')) ;
@ -159,7 +159,7 @@ Layouts.Player.fire = function(obj) {
for ( var i in bullets ) { for ( var i in bullets ) {
this.els.push(bullets[i]) ; this.els.push(bullets[i]) ;
} }
// Play sound // Play sound
soundManager.play('shoot') ; soundManager.play('shoot') ;
} }

82
js/libs/jquery-1.5.js vendored
View file

@ -2680,7 +2680,7 @@ jQuery.Event = function( src ) {
// Events bubbling up the document may have been marked as prevented // Events bubbling up the document may have been marked as prevented
// by a handler lower down the tree; reflect the correct value. // 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; src.getPreventDefault && src.getPreventDefault()) ? returnTrue : returnFalse;
// Event type // Event type
@ -2954,8 +2954,8 @@ if ( document.addEventListener ) {
jQuery.event.special[ fix ] = { jQuery.event.special[ fix ] = {
setup: function() { setup: function() {
this.addEventListener( orig, handler, true ); this.addEventListener( orig, handler, true );
}, },
teardown: function() { teardown: function() {
this.removeEventListener( orig, handler, true ); this.removeEventListener( orig, handler, true );
} }
}; };
@ -3289,7 +3289,7 @@ var Sizzle = function( selector, context, results, seed ) {
if ( context.nodeType !== 1 && context.nodeType !== 9 ) { if ( context.nodeType !== 1 && context.nodeType !== 9 ) {
return []; return [];
} }
if ( !selector || typeof selector !== "string" ) { if ( !selector || typeof selector !== "string" ) {
return results; return results;
} }
@ -3299,7 +3299,7 @@ var Sizzle = function( selector, context, results, seed ) {
contextXML = Sizzle.isXML( context ), contextXML = Sizzle.isXML( context ),
parts = [], parts = [],
soFar = selector; soFar = selector;
// Reset the position of the chunker regexp (start from head) // Reset the position of the chunker regexp (start from head)
do { do {
chunker.exec( "" ); chunker.exec( "" );
@ -3307,9 +3307,9 @@ var Sizzle = function( selector, context, results, seed ) {
if ( m ) { if ( m ) {
soFar = m[3]; soFar = m[3];
parts.push( m[1] ); parts.push( m[1] );
if ( m[2] ) { if ( m[2] ) {
extra = m[3]; extra = m[3];
break; break;
@ -3333,7 +3333,7 @@ var Sizzle = function( selector, context, results, seed ) {
if ( Expr.relative[ selector ] ) { if ( Expr.relative[ selector ] ) {
selector += parts.shift(); selector += parts.shift();
} }
set = posProcess( selector, set ); 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++ ) { for ( var i = 0, l = Expr.order.length; i < l; i++ ) {
var match, var match,
type = Expr.order[i]; type = Expr.order[i];
if ( (match = Expr.leftMatch[ type ].exec( expr )) ) { if ( (match = Expr.leftMatch[ type ].exec( expr )) ) {
var left = match[1]; var left = match[1];
match.splice( 1, 1 ); match.splice( 1, 1 );
@ -3791,7 +3791,7 @@ var Expr = Sizzle.selectors = {
ATTR: function( match, curLoop, inplace, result, not, isXML ) { ATTR: function( match, curLoop, inplace, result, not, isXML ) {
var name = match[1] = match[1].replace(/\\/g, ""); var name = match[1] = match[1].replace(/\\/g, "");
if ( !isXML && Expr.attrMap[name] ) { if ( !isXML && Expr.attrMap[name] ) {
match[1] = 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] ) ) { } else if ( Expr.match.POS.test( match[0] ) || Expr.match.CHILD.test( match[0] ) ) {
return true; return true;
} }
return match; return match;
}, },
@ -3835,7 +3835,7 @@ var Expr = Sizzle.selectors = {
return match; return match;
} }
}, },
filters: { filters: {
enabled: function( elem ) { enabled: function( elem ) {
return elem.disabled === false && elem.type !== "hidden"; return elem.disabled === false && elem.type !== "hidden";
@ -3848,12 +3848,12 @@ var Expr = Sizzle.selectors = {
checked: function( elem ) { checked: function( elem ) {
return elem.checked === true; return elem.checked === true;
}, },
selected: function( elem ) { selected: function( elem ) {
// Accessing this property makes selected-by-default // Accessing this property makes selected-by-default
// options in Safari work properly // options in Safari work properly
elem.parentNode.selectedIndex; elem.parentNode.selectedIndex;
return elem.selected === true; return elem.selected === true;
}, },
@ -3979,21 +3979,21 @@ var Expr = Sizzle.selectors = {
case "only": case "only":
case "first": case "first":
while ( (node = node.previousSibling) ) { while ( (node = node.previousSibling) ) {
if ( node.nodeType === 1 ) { if ( node.nodeType === 1 ) {
return false; return false;
} }
} }
if ( type === "first" ) { if ( type === "first" ) {
return true; return true;
} }
node = elem; node = elem;
case "last": case "last":
while ( (node = node.nextSibling) ) { while ( (node = node.nextSibling) ) {
if ( node.nodeType === 1 ) { if ( node.nodeType === 1 ) {
return false; return false;
} }
} }
@ -4006,22 +4006,22 @@ var Expr = Sizzle.selectors = {
if ( first === 1 && last === 0 ) { if ( first === 1 && last === 0 ) {
return true; return true;
} }
var doneName = match[0], var doneName = match[0],
parent = elem.parentNode; parent = elem.parentNode;
if ( parent && (parent.sizcache !== doneName || !elem.nodeIndex) ) { if ( parent && (parent.sizcache !== doneName || !elem.nodeIndex) ) {
var count = 0; var count = 0;
for ( node = parent.firstChild; node; node = node.nextSibling ) { for ( node = parent.firstChild; node; node = node.nextSibling ) {
if ( node.nodeType === 1 ) { if ( node.nodeType === 1 ) {
node.nodeIndex = ++count; node.nodeIndex = ++count;
} }
} }
parent.sizcache = doneName; parent.sizcache = doneName;
} }
var diff = elem.nodeIndex - last; var diff = elem.nodeIndex - last;
if ( first === 0 ) { if ( first === 0 ) {
@ -4040,7 +4040,7 @@ var Expr = Sizzle.selectors = {
TAG: function( elem, match ) { TAG: function( elem, match ) {
return (match === "*" && elem.nodeType === 1) || elem.nodeName.toLowerCase() === match; return (match === "*" && elem.nodeType === 1) || elem.nodeName.toLowerCase() === match;
}, },
CLASS: function( elem, match ) { CLASS: function( elem, match ) {
return (" " + (elem.className || elem.getAttribute("class")) + " ") return (" " + (elem.className || elem.getAttribute("class")) + " ")
.indexOf( match ) > -1; .indexOf( match ) > -1;
@ -4106,7 +4106,7 @@ var makeArray = function( array, results ) {
results.push.apply( results, array ); results.push.apply( results, array );
return results; return results;
} }
return array; return array;
}; };
@ -4353,7 +4353,7 @@ if ( document.querySelectorAll ) {
if ( div.querySelectorAll && div.querySelectorAll(".TEST").length === 0 ) { if ( div.querySelectorAll && div.querySelectorAll(".TEST").length === 0 ) {
return; return;
} }
Sizzle = function( query, context, extra, seed ) { Sizzle = function( query, context, extra, seed ) {
context = context || document; context = context || document;
@ -4362,24 +4362,24 @@ if ( document.querySelectorAll ) {
if ( !seed && !Sizzle.isXML(context) ) { if ( !seed && !Sizzle.isXML(context) ) {
// See if we find a selector to speed up // See if we find a selector to speed up
var match = /^(\w+$)|^\.([\w\-]+$)|^#([\w\-]+$)/.exec( query ); var match = /^(\w+$)|^\.([\w\-]+$)|^#([\w\-]+$)/.exec( query );
if ( match && (context.nodeType === 1 || context.nodeType === 9) ) { if ( match && (context.nodeType === 1 || context.nodeType === 9) ) {
// Speed-up: Sizzle("TAG") // Speed-up: Sizzle("TAG")
if ( match[1] ) { if ( match[1] ) {
return makeArray( context.getElementsByTagName( query ), extra ); return makeArray( context.getElementsByTagName( query ), extra );
// Speed-up: Sizzle(".CLASS") // Speed-up: Sizzle(".CLASS")
} else if ( match[2] && Expr.find.CLASS && context.getElementsByClassName ) { } else if ( match[2] && Expr.find.CLASS && context.getElementsByClassName ) {
return makeArray( context.getElementsByClassName( match[2] ), extra ); return makeArray( context.getElementsByClassName( match[2] ), extra );
} }
} }
if ( context.nodeType === 9 ) { if ( context.nodeType === 9 ) {
// Speed-up: Sizzle("body") // Speed-up: Sizzle("body")
// The body element only exists once, optimize finding it // The body element only exists once, optimize finding it
if ( query === "body" && context.body ) { if ( query === "body" && context.body ) {
return makeArray( [ context.body ], extra ); return makeArray( [ context.body ], extra );
// Speed-up: Sizzle("#ID") // Speed-up: Sizzle("#ID")
} else if ( match && match[3] ) { } else if ( match && match[3] ) {
var elem = context.getElementById( match[3] ); var elem = context.getElementById( match[3] );
@ -4392,12 +4392,12 @@ if ( document.querySelectorAll ) {
if ( elem.id === match[3] ) { if ( elem.id === match[3] ) {
return makeArray( [ elem ], extra ); return makeArray( [ elem ], extra );
} }
} else { } else {
return makeArray( [], extra ); return makeArray( [], extra );
} }
} }
try { try {
return makeArray( context.querySelectorAll(query), extra ); return makeArray( context.querySelectorAll(query), extra );
} catch(qsaError) {} } catch(qsaError) {}
@ -4434,7 +4434,7 @@ if ( document.querySelectorAll ) {
} }
} }
} }
return oldSizzle(query, context, extra, seed); return oldSizzle(query, context, extra, seed);
}; };
@ -4456,7 +4456,7 @@ if ( document.querySelectorAll ) {
// This should fail with an exception // This should fail with an exception
// Gecko does not error, returns false instead // Gecko does not error, returns false instead
matches.call( document.documentElement, "[test!='']:sizzle" ); matches.call( document.documentElement, "[test!='']:sizzle" );
} catch( pseudoError ) { } catch( pseudoError ) {
pseudoWorks = true; pseudoWorks = true;
} }
@ -4467,7 +4467,7 @@ if ( document.querySelectorAll ) {
expr = expr.replace(/\=\s*([^'"\]]*)\s*\]/g, "='$1']"); expr = expr.replace(/\=\s*([^'"\]]*)\s*\]/g, "='$1']");
if ( !Sizzle.isXML( node ) ) { if ( !Sizzle.isXML( node ) ) {
try { try {
if ( pseudoWorks || !Expr.match.PSEUDO.test( expr ) && !/!=/.test( expr ) ) { if ( pseudoWorks || !Expr.match.PSEUDO.test( expr ) && !/!=/.test( expr ) ) {
return matches.call( node, expr ); return matches.call( node, expr );
} }
@ -4496,7 +4496,7 @@ if ( document.querySelectorAll ) {
if ( div.getElementsByClassName("e").length === 1 ) { if ( div.getElementsByClassName("e").length === 1 ) {
return; return;
} }
Expr.order.splice(1, 0, "CLASS"); Expr.order.splice(1, 0, "CLASS");
Expr.find.CLASS = function( match, context, isXML ) { Expr.find.CLASS = function( match, context, isXML ) {
if ( typeof context.getElementsByClassName !== "undefined" && !isXML ) { if ( typeof context.getElementsByClassName !== "undefined" && !isXML ) {
@ -4547,7 +4547,7 @@ function dirCheck( dir, cur, doneName, checkSet, nodeCheck, isXML ) {
if ( elem ) { if ( elem ) {
var match = false; var match = false;
elem = elem[dir]; elem = elem[dir];
while ( elem ) { while ( elem ) {
@ -4600,7 +4600,7 @@ if ( document.documentElement.contains ) {
Sizzle.isXML = function( elem ) { Sizzle.isXML = function( elem ) {
// documentElement is verified for cases where it doesn't yet exist // 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; var documentElement = (elem ? elem.ownerDocument || elem : 0).documentElement;
return documentElement ? documentElement.nodeName !== "HTML" : false; return documentElement ? documentElement.nodeName !== "HTML" : false;
@ -5910,7 +5910,7 @@ if ( document.defaultView && document.defaultView.getComputedStyle ) {
if ( document.documentElement.currentStyle ) { if ( document.documentElement.currentStyle ) {
currentStyle = function( elem, name ) { currentStyle = function( elem, name ) {
var left, var left,
ret = elem.currentStyle && elem.currentStyle[ name ], ret = elem.currentStyle && elem.currentStyle[ name ],
rsLeft = elem.runtimeStyle && elem.runtimeStyle[ name ], rsLeft = elem.runtimeStyle && elem.runtimeStyle[ name ],
style = elem.style; style = elem.style;

File diff suppressed because one or more lines are too long

View file

@ -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> <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 style="clear:left"></div>
<div id="sm2-container"> <div id="sm2-container">
<!-- sm2 flash goes here --> <!-- sm2 flash goes here -->
</div> </div>

View file

@ -101,7 +101,7 @@ pre.block {
</head> </head>
<body> <body>
<div id="left"> <div id="left">
<h1><a href="http://www.schillmania.com/projects/soundmanager2/" title="Javascript MP3 player project home">SoundManager 2</a> / <a href="http://schillmania.com/projects/soundmanager2/demo/360-player/">360&deg; Player Demo</a>: JS + Canvas Visualization</h1> <h1><a href="http://www.schillmania.com/projects/soundmanager2/" title="Javascript MP3 player project home">SoundManager 2</a> / <a href="http://schillmania.com/projects/soundmanager2/demo/360-player/">360&deg; Player Demo</a>: JS + Canvas Visualization</h1>
@ -209,19 +209,19 @@ pre.block {
Background ring color: Background ring color:
<input type="text" name="bg-ring-color" id="bg-ring-color" value="#000000" onclick="createCP(this,setBackgroundRingColor)" /> <input type="text" name="bg-ring-color" id="bg-ring-color" value="#000000" onclick="createCP(this,setBackgroundRingColor)" />
</div> </div>
<p class="compact"> <p class="compact">
<input type="button" onclick="controller.randomize()" value="Randomize controls" title="Assign random control values" style="font-size:x-small" /> <input type="button" onclick="controller.randomize()" value="Randomize controls" title="Assign random control values" style="font-size:x-small" />
</p> </p>
</form> </form>
</div> </div>
<div id="cp-container"> <div id="cp-container">
<!-- color picker stuff goes here --> <!-- color picker stuff goes here -->
</div> </div>
<div id="config-code-block" style="float:right;display:inline;margin-left:1em;margin-top:-0.7em"> <div id="config-code-block" style="float:right;display:inline;margin-left:1em;margin-top:-0.7em">
<!-- <!--
<pre id="config-link" class="block"><code style="cursor:pointer" onclick="document.getElementById('config-link').style.display='none';document.getElementById('config-pre-block').style.display='block';return false"> [click to show code] </code></pre> <pre id="config-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>
</div> </div>
<p style="clear:left">Get a sound playing, then adjust the values to see real-time updates.</p> <p style="clear:left">Get a sound playing, then adjust the values to see real-time updates.</p>
</div> </div>
<!-- here are the MP3 links, which are decorated with the 360 canvas element/UI etc. --> <!-- here are the MP3 links, which are decorated with the 360 canvas element/UI etc. -->
<div id="sm2-container"> <div id="sm2-container">
<!-- sm2 flash goes here --> <!-- sm2 flash goes here -->
</div> </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 class="ui360"><a href="http://freshly-ground.com/data/audio/mpc/20060826%20-%20Armstrong.mp3">20060826 - Armstrong Groove</a></div>
</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> <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> <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/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 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>
<div style="clear:left"></div> <div style="clear:left"></div>
<h2 style="clear:left;padding-top:1em">Variant: Annotations/meta-data</h2> <h2 style="clear:left;padding-top:1em">Variant: Annotations/meta-data</h2>
@ -316,15 +316,15 @@ pre.block {
</ul> </ul>
<div style="clear:both"></div> <div style="clear:both"></div>
<p style="margin-left:1em"> <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) <a href="http://www.schillmania.com/projects/soundmanager2/" title="SoundManager 2 home">SoundManager 2 project page</a> (not an MP3 link)
</p> </p>
<script type="text/javascript"> <script type="text/javascript">
if (window.location.toString().match(/#customize/i)) { if (window.location.toString().match(/#customize/i)) {
document.getElementById('config-link').style.display = 'none'; document.getElementById('config-link').style.display = 'none';
document.getElementById('config-ui').style.display = 'block'; document.getElementById('config-ui').style.display = 'block';
} }
</script> </script>

View file

@ -1,4 +1,4 @@
/* /*
------------------------------------------------------------- -------------------------------------------------------------
@ -28,7 +28,7 @@ h1 {
} }
h1, h2 { h1, h2 {
letter-spacing:-1px; /* zomg web x.0! ;) */ letter-spacing:-1px; /* zomg web x.0! ;) */
} }
h2 { h2 {

View file

@ -70,7 +70,7 @@ pre.block {
<div style="margin-top:1.25em"> <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 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" style="margin-top:-0.55em"><a href="../_mp3/rain.mp3">Rain</a></div>
<div class="ui360"><a href="http://freshly-ground.com/data/audio/mpc/20090119%20-%20Untitled%20Groove.mp3">20090119 - Untitled Groove</a></div> <div 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> <div style="clear:both"></div>
<h3>How This Works</h3> <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> <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> <div>
<pre class="block"><code>&lt;div class="<span>ui360</span>"&gt; <pre class="block"><code>&lt;div class="<span>ui360</span>"&gt;
&lt;a href="/path/to/an.mp3"&gt; &lt;a href="/path/to/an.mp3"&gt;
&lt;/div&gt;</code></pre> &lt;/div&gt;</code></pre>
</div> </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> <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>&lt;-- dynamically-inserted block --&gt;</span></span> <span><span>&lt;-- dynamically-inserted block --&gt;</span></span>
&lt;div class="<span>ui</span>"&gt; &lt;div class="<span>ui</span>"&gt;
&lt;canvas class="<span>sm2-canvas</span>"&gt;&lt;/canvas&gt; &lt;canvas class="<span>sm2-canvas</span>"&gt;&lt;/canvas&gt;
&lt;img class="<span>sm2-360btn</span>" /&gt; &lt;img class="<span>sm2-360btn</span>" /&gt;
&lt;div class="<span>sm2-timing</span>"&gt;&lt;/div&gt; &lt;div class="<span>sm2-timing</span>"&gt;&lt;/div&gt;
&lt;div class="<span>sm2-cover</span>"&gt;&lt;/div&gt; &lt;div class="<span>sm2-cover</span>"&gt;&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;

View file

@ -9,7 +9,7 @@ h1, h2, h3 {
} }
h1, h2 { h1, h2 {
letter-spacing:-1px; /* zomg web x.0! ;) */ letter-spacing:-1px; /* zomg web x.0! ;) */
} }
h1, h2, h3 { h1, h2, h3 {

View file

@ -10,7 +10,7 @@
<body> <body>
<div style="margin-right:43em"> <div style="margin-right:43em">
<h1>Interval-based animation (with sound)</h1> <h1>Interval-based animation (with sound)</h1>
<p> <p>

View file

@ -28,7 +28,7 @@ h1 {
} }
h1, h2 { h1, h2 {
letter-spacing:-1px; /* zomg web x.0! ;) */ letter-spacing:-1px; /* zomg web x.0! ;) */
} }
h2 { h2 {
@ -226,7 +226,7 @@ function Cursor() {
window.onresize = this.refreshCoords; window.onresize = this.refreshCoords;
_id('overlay').onmousedown = this.mousedown; _id('overlay').onmousedown = this.mousedown;
_id('overlay').onmouseup = this.mouseup; _id('overlay').onmouseup = this.mouseup;
document.onmousemove = this.mousemove; document.onmousemove = this.mousemove;
} }

View file

@ -17,7 +17,7 @@ h1 {
} }
h1, h2 { h1, h2 {
letter-spacing:-1px; /* zomg web x.0! ;) */ letter-spacing:-1px; /* zomg web x.0! ;) */
} }
h2 { h2 {

View file

@ -97,7 +97,7 @@ soundManager.consoleOnly = false;
soundManager.onready(function(oStatus) { soundManager.onready(function(oStatus) {
if (!oStatus.success) { if (!oStatus.success) {
return false; return false;
} }
// soundManager is initialised, ready to use. Create a sound for this demo page. // 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> <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> <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">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> <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> <pre>soundManager.waitForWindowLoad = true;</pre>
@ -354,7 +354,7 @@ s.play({
<button onclick="return doEval(document.getElementById('demo4e').innerHTML);return false">Do this</button> <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>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> <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> <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> <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> sound.setPosition(<span>500</span>); <span><span>// 500 msec into sound</span></span>

View file

@ -24,7 +24,7 @@ soundManager.url = '../../swf/';
<body> <body>
<div> <div>
<h1><a href="http://www.schillmania.com/projects/soundmanager2/">SoundManager 2</a>: Flashblock / "click to flash" handling: Basic Demo</h1> <h1><a href="http://www.schillmania.com/projects/soundmanager2/">SoundManager 2</a>: Flashblock / "click to flash" handling: Basic Demo</h1>
<div id="sm2-container"> <div id="sm2-container">

View file

@ -30,7 +30,7 @@
#sm2-container.swf_timedout, #sm2-container.swf_timedout,
#sm2-container.swf_timedout object, #sm2-container.swf_timedout object,
#sm2-container.swf_timedout embed { #sm2-container.swf_timedout embed {
/* /*
when SM2 didn't start normally, time-out case. flash blocked, missing SWF, no flash? when SM2 didn't start normally, time-out case. flash blocked, missing SWF, no flash?
48px square flash placeholder is typically used by blockers. 48px square flash placeholder is typically used by blockers.
*/ */

View file

@ -49,7 +49,7 @@ soundManager.onready(function(){
<body> <body>
<div style="margin:1em;max-width:60em;font-size:110%"> <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> <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> <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"> <div id="sm2-container">
<!-- flash is appended here --> <!-- flash is appended here -->
</div> </div>
<h3 id="flashblock-css">Flash Block-related CSS</h3> <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>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> <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> }</code></pre>
<h3>Basic Demo</h3> <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> <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> </div>

View file

@ -46,7 +46,7 @@ soundManager.ontimeout(function(){
<body> <body>
<div style="margin:1em;max-width:60em;font-size:110%"> <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> <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> <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.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.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> #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>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> <p>Take a look at <a href="flashblock.css">flashblock.css</a> for implementation details.</p>
<div id="sm2-container"> <div id="sm2-container">
<!-- flash is appended here --> <!-- flash is appended here -->
</div> </div>
</div> </div>

View file

@ -204,7 +204,7 @@ pre {
pre span, pre span,
code span, code span,
dt span { dt span {
color:#339933; color:#339933;
} }
pre span span, pre span span,
@ -742,7 +742,7 @@ ul.standard ul {
} }
.c3 h2 .l.flat, .c3 h2 .l.flat,
.wedge .l.flat, .wedge .l.flat,
.c3 h2 .r.flat, .c3 h2 .r.flat,
.wedge .r.flat { .wedge .r.flat {
background-image:none; background-image:none;
@ -810,7 +810,7 @@ ul.standard ul {
height:1.67em; height:1.67em;
padding:0.25em 0.5em; padding:0.25em 0.5em;
padding:0px; padding:0px;
} }
.c3 h4 { .c3 h4 {

View file

@ -5,7 +5,7 @@
<title>SoundManager 2 Demo: Basic MP3 Play Button (Simple Demo)</title> <title>SoundManager 2 Demo: Basic MP3 Play Button (Simple Demo)</title>
<style type="text/css"> <style type="text/css">
/* /*
------------------------------------------------------------- -------------------------------------------------------------

View file

@ -6,7 +6,7 @@
<meta name="robots" content="noindex" /> <meta name="robots" content="noindex" />
<style type="text/css"> <style type="text/css">
/* /*
------------------------------------------------------------- -------------------------------------------------------------
@ -32,7 +32,7 @@ h1, h2, h3 {
} }
h1, h2 { h1, h2 {
letter-spacing:-1px; /* zomg web x.0! ;) */ letter-spacing:-1px; /* zomg web x.0! ;) */
margin-top:0.5em; margin-top:0.5em;
} }
@ -98,7 +98,7 @@ pre code {
<body> <body>
<div id="left"> <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> <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>.) <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> </code></pre>
<h3>Other Options</h3> <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> <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> <pre>
<code> <code>
// (within mp3-player-button.js) // (within mp3-player-button.js)

View file

@ -5,7 +5,7 @@
<title>SoundManager 2 Demo: Play MP3 links on a page, "page as playlist" style</title> <title>SoundManager 2 Demo: Play MP3 links on a page, "page as playlist" style</title>
<style type="text/css"> <style type="text/css">
/* /*
------------------------------------------------------------- -------------------------------------------------------------
@ -68,7 +68,7 @@ function setTheme(sTheme) {
</ul> </ul>
<p>For alternate themes, add the class to the playlist UL - eg. <a href="#" onclick="return setTheme('dark')">&lt;ul class="playlist dark"&gt;</a> or <a href="#" onclick="return setTheme('bubblegum')">&lt;ul class="playlist bubblegum"&gt;</a>; the base default is <a href="#" onclick="return setTheme()">&lt;ul class="playlist"&gt;</a>.</p> <p>For alternate themes, add the class to the playlist UL - eg. <a href="#" onclick="return setTheme('dark')">&lt;ul class="playlist dark"&gt;</a> or <a href="#" onclick="return setTheme('bubblegum')">&lt;ul class="playlist bubblegum"&gt;</a>; the base default is <a href="#" onclick="return setTheme()">&lt;ul class="playlist"&gt;</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>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> <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>

View file

@ -1,4 +1,4 @@
/* /*
----------------------------------------------------------------- -----------------------------------------------------------------
In-page demo CSS for code, documentation etc. In-page demo CSS for code, documentation etc.
See page-player.css for actual playlist-relevant stuff. See page-player.css for actual playlist-relevant stuff.
@ -20,7 +20,7 @@ h1, h2, h3 {
} }
h1, h2 { h1, h2 {
letter-spacing:-1px; /* zomg web x.0! ;) */ letter-spacing:-1px; /* zomg web x.0! ;) */
} }
h1, h2, h3 { h1, h2, h3 {

View file

@ -1,4 +1,4 @@
/* /*
--------------------------------- ---------------------------------
-- alternate (optional) themes -- -- alternate (optional) themes --
--------------------------------- ---------------------------------

View file

@ -107,7 +107,7 @@ var PP_CONFIG = {
<p>Clicking a title will start loading + playing, or pause, a sound.</p> <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>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> <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> <h3>Themes</h3>
<p>Just for fun, a few color schemes (visible when playing/paused):</p> <p>Just for fun, a few color schemes (visible when playing/paused):</p>
<ul class="themes"> <ul class="themes">
@ -116,7 +116,7 @@ var PP_CONFIG = {
<li><a href="#" onclick="return setTheme('bubblegum')">&lt;ul class="playlist bubblegum"&gt;</a> - ZOMG PONIES!!!ONEONEONE</li> <li><a href="#" onclick="return setTheme('bubblegum')">&lt;ul class="playlist bubblegum"&gt;</a> - ZOMG PONIES!!!ONEONEONE</li>
<li><a href="#" onclick="return setTheme('')">&lt;ul class="playlist"&gt;</a> (default)</li> <li><a href="#" onclick="return setTheme('')">&lt;ul class="playlist"&gt;</a> (default)</li>
</ul> </ul>
<form style="margin:0px;padding:0px" action="#" onsubmit="return false"> <form style="margin:0px;padding:0px" action="#" onsubmit="return false">
<div> <div>
<input id="makeShiny" name="makeShiny" type="checkbox" onchange="setShiny(this.checked)" value="Shiny" /> <label for="makeShiny">Also add "shiny", eg. &lt;ul class="shiny playlist"&gt;...</label> <input id="makeShiny" name="makeShiny" type="checkbox" onchange="setShiny(this.checked)" value="Shiny" /> <label for="makeShiny">Also add "shiny", eg. &lt;ul class="shiny playlist"&gt;...</label>

View file

@ -5,7 +5,7 @@
<title>SoundManager 2 Demo: Play MP3 Links on a page</title> <title>SoundManager 2 Demo: Play MP3 Links on a page</title>
<style type="text/css"> <style type="text/css">
/* /*
------------------------------------------------------------- -------------------------------------------------------------

View file

@ -6,7 +6,7 @@
<meta name="robots" content="noindex" /> <meta name="robots" content="noindex" />
<style type="text/css"> <style type="text/css">
/* /*
------------------------------------------------------------- -------------------------------------------------------------
@ -32,7 +32,7 @@ h1, h2, h3 {
} }
h1, h2 { h1, h2 {
letter-spacing:-1px; /* zomg web x.0! ;) */ letter-spacing:-1px; /* zomg web x.0! ;) */
margin-top:0.5em; margin-top:0.5em;
} }
@ -99,7 +99,7 @@ p {
<body> <body>
<div id="left"> <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> <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> <h2>Inline MP3 Player Example: Fancy* CSS 3 version</h2>
@ -209,9 +209,9 @@ p {
</pre> </pre>
<h3>Other Options</h3> <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> <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> <pre>
// (within inlineplayer.js) // (within inlineplayer.js)
this.config = { this.config = {

View file

@ -101,7 +101,7 @@ window.onload = function() {
<div style="margin-right:43em"> <div style="margin-right:43em">
<h1>SoundManager 2: Lazy Loading Example</h1> <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> <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> <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; <pre><code>window.SM2_DEFER = true;
<span>// some time later, manually start SM2...</span> <span>// some time later, manually start SM2...</span>
soundManager = new SoundManager(); 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> <h2 style="margin-top:1em">Disabling debug output</h2>
<p>SoundManager 2 will write to a debug &lt;div&gt; element or a javascript console if available, by default. To disable it, simply set the relevant property to false:</p> <p>SoundManager 2 will write to a debug &lt;div&gt; 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> <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> <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> <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> </div>
</body> </body>

View file

@ -14,7 +14,7 @@
// Previous notes, courtesy Jacob Seidelin ... // Previous notes, courtesy Jacob Seidelin ...
// This fails to load in Firefox 3.6 (Win7) but will load after one of the following changes: // 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"> // <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
// 2. Set soundManager.useHighPerformance = false // 2. Set soundManager.useHighPerformance = false
// 3. Set soundManager.debugFlash = true // 3. Set soundManager.debugFlash = true

View file

@ -42,7 +42,7 @@ soundManager.onload = function() {
<div style="margin-right:43em"> <div style="margin-right:43em">
<h1>SoundManager 2 Template Example</h1> <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> <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>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> <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> <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> <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> <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> </div>
</body> </body>

View file

@ -24,7 +24,7 @@
</head> </head>
<body> <body>
<div id="content"> <div id="content">
<div id="top"> <div id="top">
@ -72,7 +72,7 @@
<li><a href="../#smsoundmethods">Sound Object (SMSound) API</a></li> <li><a href="../#smsoundmethods">Sound Object (SMSound) API</a></li>
</ul> </ul>
</li> </li>
<li> <li>
<strong><a href="#">Download</a></strong> <strong><a href="#">Download</a></strong>
<ul> <ul>
@ -80,7 +80,7 @@
<li><a href="#revision-history">Revision History</a></li> <li><a href="#revision-history">Revision History</a></li>
</ul> </ul>
</li> </li>
<li> <li>
<a href="../technotes/">Technical Notes</a> <a href="../technotes/">Technical Notes</a>
<ul> <ul>
@ -102,7 +102,7 @@
</ul> </ul>
<div class="clear"></div> <div class="clear"></div>
</div> </div>
</div> </div>
<div id="main" class="triple"> <div id="main" class="triple">
@ -121,38 +121,38 @@
</div> </div>
<div id="newest" class="columnar"> <div id="newest" class="columnar">
<div class="c1"> <div class="c1">
<h2>Get SoundManager 2</h2> <h2>Get SoundManager 2</h2>
<p>Get the latest and greatest.</p> <p>Get the latest and greatest.</p>
</div> </div>
<div class="c2"> <div class="c2">
<h3>Download SoundManager 2</h3> <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><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"><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 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>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> <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> </div>
<div id="history" class="columnar"> <div id="history" class="columnar">
<div class="c1"> <div class="c1">
<h2>Revision History</h2> <h2>Revision History</h2>
<p>Latest changes and archived notes from bug fixes, API updates, feature development etc.</p> <p>Latest changes and archived notes from bug fixes, API updates, feature development etc.</p>
</div> </div>
<div class="c2"> <div class="c2">
<div class="f-block c-revision-history"> <div class="f-block c-revision-history">
<h3 id="revision-history">Revision History</h3> <h3 id="revision-history">Revision History</h3>
<p>A changelog of sorts.</p> <p>A changelog of sorts.</p>
<ul id="revision-list" class="standard"> <ul id="revision-list" class="standard">
@ -160,9 +160,9 @@
<li class="in"> <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> <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> <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"> <ul class="double">
<li class="in"> <li class="in">
<p class="compact">Bug fixes</p> <p class="compact">Bug fixes</p>
<ul class="nested compact flat"> <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>Code cleanup: Took the unsupported "jsAMP" demo (2007 prototype) out back and shot it.</li>
<li>360&deg; UI demo: New "allowMultiple" config option, let 2+ sounds play at once etc. (Default: false, one at a time.)</li> <li>360&deg; UI demo: New "allowMultiple" config option, let 2+ sounds play at once etc. (Default: false, one at a time.)</li>
<li>360&deg; UI, canvas visualization demo: Minor layout, UI, code tweaks</li> <li>360&deg; 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> </ul>
</li> </li>
@ -220,9 +220,9 @@ soundManager.ontimeout(function(){
<li class="in"> <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> <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> <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"> <ul class="double">
<li class="in"> <li class="in">
<p class="compact">Bug fixes</p> <p class="compact">Bug fixes</p>
<ul class="nested compact flat"> <ul class="nested compact flat">
@ -265,9 +265,9 @@ soundManager.ontimeout(function(){
<li class="in"> <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> <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&deg; player UI demos; tap and drag to seek, etc.</p> <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&deg; player UI demos; tap and drag to seek, etc.</p>
<ul class="double"> <ul class="double">
<li class="in"> <li class="in">
<p class="compact">Bug fixes</p> <p class="compact">Bug fixes</p>
<ul class="nested compact flat"> <ul class="nested compact flat">
@ -313,9 +313,9 @@ soundManager.ontimeout(function(){
<li class="in"> <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> <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>&lt;audio&gt;</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> <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>&lt;audio&gt;</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"> <ul class="double">
<li class="in"> <li class="in">
<p class="compact">Bug fixes</p> <p class="compact">Bug fixes</p>
<ul class="nested compact flat"> <ul class="nested compact flat">
@ -346,11 +346,11 @@ soundManager.ontimeout(function(){
<li class="in"> <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> <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> <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"> <ul class="double">
<li class="in"> <li class="in">
<p class="compact">Bug fixes</p> <p class="compact">Bug fixes</p>
<ul class="nested compact flat"> <ul class="nested compact flat">
@ -371,16 +371,16 @@ soundManager.ontimeout(function(){
<li class="in"> <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> <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> <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"> <ul class="double">
<li class="in"> <li class="in">
<p class="compact">API Updates</p> <p class="compact">API Updates</p>
<ul class="nested compact flat"> <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 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> <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> <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> </ul>
@ -408,11 +408,11 @@ soundManager.ontimeout(function(){
<li class="in"> <li class="in">
<h3><b>V2.96a.20100520</b> - HTML5 Edition (<a href="../../download/soundmanagerv295b-20100520.zip">Download archived version</a>)</h3> <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> <p>Experimental HTML5 support, lots of code shuffling and performance tweaks.</p>
<ul class="double"> <ul class="double">
<li class="in"> <li class="in">
<p class="compact">API Updates</p> <p class="compact">API Updates</p>
<ul class="nested compact flat"> <ul class="nested compact flat">
@ -480,7 +480,7 @@ soundManager.ontimeout(function(){
</ul> </ul>
</li> </li>
<li class="in"> <li class="in">
<h3><b>V2.95b.20100101</b> (<a href="../../download/soundmanagerv295b-20100101.zip">Download archived version</a>)</h3> <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> <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> </ul>
</li> </li>
<li class="in"> <li class="in">
<h3><b>V2.95a.20090717</b> (<a href="../../download/soundmanagerv295a-20090717.zip">Download archived version</a>)</h3> <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> <p>New features: onready(), fast polling, flash blocking demos etc.</p>
@ -545,7 +545,7 @@ soundManager.ontimeout(function(){
</ul> </ul>
</li> </li>
<li class="in"> <li class="in">
<h3><b>V2.95a.20090501</b> (<a href="../../download/soundmanagerv295a-20090501.zip">Download archived version</a>)</h3> <h3><b>V2.95a.20090501</b> (<a href="../../download/soundmanagerv295a-20090501.zip">Download archived version</a>)</h3>
<p>Lots of updates.</p> <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> <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> </ul>
</li> </li>
<li> <li>
<p class="compact">Bug fixes</p> <p class="compact">Bug fixes</p>
<ul class="nested compact flat"> <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> <li>Better code/feature separation and clean-up on inline player, Muxtape-style demos</li>
</ul> </ul>
</li> </li>
</ul> </ul>
</li> </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> <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> </ul>
</li> </li>
<li> <li>
<p class="compact">Bug fixes</p> <p class="compact">Bug fixes</p>
<ul class="nested compact flat"> <ul class="nested compact flat">
@ -618,7 +618,7 @@ soundManager.ontimeout(function(){
</li> </li>
</ul> </ul>
</li> </li>
@ -636,7 +636,7 @@ soundManager.ontimeout(function(){
<li>Updated API demo testcases (<a href="../../demo/api/">API Demo page</a>)</li> <li>Updated API demo testcases (<a href="../../demo/api/">API Demo page</a>)</li>
</ul> </ul>
</li> </li>
<li> <li>
<p class="compact">Bug fixes</p> <p class="compact">Bug fixes</p>
<ul class="nested compact flat"> <ul class="nested compact flat">
@ -649,7 +649,7 @@ soundManager.ontimeout(function(){
</li> </li>
</ul> </ul>
</li> </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> <li>Updated design on API demo page, new <a href="../../demo/api/#looping">looping example</a></li>
</ul> </ul>
</li> </li>
<li> <li>
<p class="compact">Bug fixes</p> <p class="compact">Bug fixes</p>
<ul class="nested compact flat"> <ul class="nested compact flat">
@ -678,10 +678,10 @@ soundManager.ontimeout(function(){
</li> </li>
</ul> </ul>
</li> </li>
<li class="in"> <li class="in">
<h3><b>V2.91a.20081205</b> (<a href="../../download/soundmanagerv291a-20081205.zip">Download archived version</a>)</h3> <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> <li>Code verified with <a href="http://jslint.com">jslint</a>. 0 errors reported with default settings, Edition 2008-11-26</li>
</ul> </ul>
</li> </li>
<li> <li>
<p class="compact">Bug fixes</p> <p class="compact">Bug fixes</p>
<ul class="nested compact flat"> <ul class="nested compact flat">
@ -705,7 +705,7 @@ soundManager.ontimeout(function(){
</ul> </ul>
</li> </li>
</ul> </ul>
</li> </li>
<li class="in"> <li class="in">
@ -1070,19 +1070,19 @@ soundManager.ontimeout(function(){
</li> </li>
</ul> </ul>
<!-- <script type="text/javascript">document.getElementById('revision-list').className += ' hide-old';</script> --> <!-- <script type="text/javascript">document.getElementById('revision-list').className += ' hide-old';</script> -->
</div> </div>
</div> </div>
</div> </div>
<div id="col3" class="c3"> <div id="col3" class="c3">
<div id="get-satisfaction" class="box"> <div id="get-satisfaction" class="box">
<div id="gsfn_list_widget"> <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> <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>
<div class="clear"></div> <div class="clear"></div>
<!-- /main --> <!-- /main -->
@ -1140,7 +1140,7 @@ soundManager.ontimeout(function(){
<script type="text/javascript"> <script type="text/javascript">
init(); init();
</script> </script>
</body> </body>
</html> </html>

View file

@ -27,7 +27,7 @@
</head> </head>
<body> <body>
<div id="content"> <div id="content">
<div id="top"> <div id="top">
@ -75,7 +75,7 @@
<li><a href="../#smsoundmethods">Sound Object (SMSound) API</a></li> <li><a href="../#smsoundmethods">Sound Object (SMSound) API</a></li>
</ul> </ul>
</li> </li>
<li> <li>
<a href="../download/">Download</a> <a href="../download/">Download</a>
<ul> <ul>
@ -83,7 +83,7 @@
<li><a href="../download/#revision-history">Revision History</a></li> <li><a href="../download/#revision-history">Revision History</a></li>
</ul> </ul>
</li> </li>
<li> <li>
<a href="../technotes/">Technical Notes</a> <a href="../technotes/">Technical Notes</a>
<ul> <ul>
@ -105,7 +105,7 @@
</ul> </ul>
<div class="clear"></div> <div class="clear"></div>
</div> </div>
</div> </div>
<div id="main" class="triple"> <div id="main" class="triple">
@ -115,17 +115,17 @@
<h2>How SoundManager Works</h2> <h2>How SoundManager Works</h2>
<p>It starts out easy, but you can go down the rabbit hole if you want.</p> <p>It starts out easy, but you can go down the rabbit hole if you want.</p>
</div> </div>
<div class="c2"> <div class="c2">
<div class="f-block"> <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> <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> <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>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><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> <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>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> <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"> <table id="sm2-filesizes" cellpadding="0" cellspacing="0">
<tr> <tr>
@ -180,7 +180,7 @@
</tr> </tr>
</table> </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> <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> <pre>
@ -202,7 +202,7 @@ soundManager.onready(function() {
<h4 id="basic-template">Basic SoundManager Template</h4> <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> <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> <h4 id="file-structure">SoundManager File Structure</h4>
<p>Or, "What you get when you download SM2."</p> <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> <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>
<div class="f-block f-onload"> <div class="f-block f-onload">
<h4>Startup / Initialization</h4> <h4>Startup / Initialization</h4>
<p>In brief, here is now SM2 starts up:</p> <p>In brief, here is now SM2 starts up:</p>
<ul> <ul>
<li>soundmanager2.js loads</li> <li>soundmanager2.js loads</li>
@ -265,15 +265,15 @@ soundManager.onready(function() {
<li>JS -&gt; Flash test (JS calls Flash function): "Hello, Flash!"</li> <li>JS -&gt; Flash test (JS calls Flash function): "Hello, Flash!"</li>
<li>-- startup is complete, soundManager.onready() fires --</li> <li>-- startup is complete, soundManager.onready() fires --</li>
</ul> </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">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 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> <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> <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> <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() { <pre class="block"><code>soundManager.onready(function() {
@ -290,7 +290,7 @@ soundManager.onready(function() {
<h4>SoundManager onload() + onerror()</h4> <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> <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() { <pre class="block"><code>soundManager.onload = function() {
<span><span>// SM2 is ready to go!</span></span> <span><span>// SM2 is ready to go!</span></span>
makeSomeNoise(); <span><span>// soundManager.createSound(), etc.</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>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> <p>Example:</p>
<pre class="block"><code>function lazy_load_sm2() { <pre class="block"><code>function lazy_load_sm2() {
window.SM2_DEFER = true; window.SM2_DEFER = true;
<span><span>// -- load soundmanager2.js via &lt;script&gt;, createElement('script') or XHR etc. -- <span><span>// -- load soundmanager2.js via &lt;script&gt;, createElement('script') or XHR etc. --
@ -321,9 +321,9 @@ soundManager.onerror = function() {
</div> </div>
</div> </div>
</div> </div>
<div class="columnar"> <div class="columnar">
@ -362,15 +362,15 @@ soundManager.onerror = function() {
</div> </div>
</div> </div>
<div class="columnar"> <div class="columnar">
<div class="c1"> <div class="c1">
<h2>"Use Responsibly"</h2> <h2>"Use Responsibly"</h2>
<p>Only you can prevent audio pollution?</p> <p>Only you can prevent audio pollution?</p>
</div> </div>
<div class="c2"> <div class="c2">
<div class="f-block"> <div class="f-block">
<h3>A Word Of Vice</h3> <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> <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>
</div> </div>
<div id="troubleshooting" class="columnar"> <div id="troubleshooting" class="columnar">
<div id="troubleshooting-flash8" class="c1"> <div id="troubleshooting-flash8" class="c1">
<h2 id="troubleshooting-flash9">Troubleshooting</h2> <h2 id="troubleshooting-flash9">Troubleshooting</h2>
<p>Console-style messaging, useful for troubleshooting start-up and runtime issues.</p> <p>Console-style messaging, useful for troubleshooting start-up and runtime issues.</p>
</div> </div>
<div id="troubleshooting-flash9-highperformance" class="c2"> <div id="troubleshooting-flash9-highperformance" class="c2">
<h3>SoundManager 2 Start-up and Debug Tools</h3> <h3>SoundManager 2 Start-up and Debug Tools</h3>
@ -433,7 +433,7 @@ soundManager.onerror = function() {
</li> </li>
<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". 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"> <div id="d-flashtojs-offline" style="padding-bottom:1em">
<h4>Offline viewing: Adding a "trusted location" to the Flash Security Settings Panel</h4> <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> <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> </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> <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> </div>
</li> </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">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> <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"> <div class="details">
<p>At this point, Javascript attempts to respond to Flash's initial outgoing Flash -&gt; JS call, completing the test for JS/flash communication. If SM2 does not receive a response from flash, it will eventually fail.</p> <p>At this point, Javascript attempts to respond to Flash's initial outgoing Flash -&gt; 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 &lt;-&gt; JS communication. See the details of Flash -&gt; JS for information.</p> <p>Offline viewing conditions and cross-domain security rules will prevent Flash &lt;-&gt; JS communication. See the details of Flash -&gt; JS for information.</p>
</div> </div>
</li> </li>
<li id="d-soundtest" class="default"> <li id="d-soundtest" class="default">
@ -483,7 +483,7 @@ soundManager.onerror = function() {
</ul> </ul>
</div> </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> <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> <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> <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> </div>
<div id="col3" class="c3"> <div id="col3" class="c3">
<div id="get-satisfaction" class="box"> <div id="get-satisfaction" class="box">
<div id="gsfn_list_widget"> <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> <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>
<div class="clear"></div> <div class="clear"></div>
<!-- /main --> <!-- /main -->
@ -546,7 +546,7 @@ soundManager.onerror = function() {
init(); init();
sm2DebugInit(); sm2DebugInit();
</script> </script>
</body> </body>
</html> </html>

View file

@ -25,7 +25,7 @@
</head> </head>
<body id="doc"> <body id="doc">
<div id="content"> <div id="content">
<div id="top"> <div id="top">
@ -73,7 +73,7 @@
<li><a href="#smsoundmethods">Sound Object (SMSound) API</a></li> <li><a href="#smsoundmethods">Sound Object (SMSound) API</a></li>
</ul> </ul>
</li> </li>
<li> <li>
<a href="download/">Download</a> <a href="download/">Download</a>
<ul> <ul>
@ -81,7 +81,7 @@
<li><a href="download/#revision-history">Revision History</a></li> <li><a href="download/#revision-history">Revision History</a></li>
</ul> </ul>
</li> </li>
<li> <li>
<a href="technotes/">Technical Notes</a> <a href="technotes/">Technical Notes</a>
<ul> <ul>
@ -103,7 +103,7 @@
</ul> </ul>
<div class="clear"></div> <div class="clear"></div>
</div> </div>
</div> </div>
<div id="main" class="triple"> <div id="main" class="triple">
@ -127,9 +127,9 @@
<p>Flash URLs, version + performance options</p> <p>Flash URLs, version + performance options</p>
</div> </div>
<div class="c2"> <div class="c2">
<h3>SoundManager Properties</h3> <h3>SoundManager Properties</h3>
<div class="f-block f-useconsole f-consoleonly f-waitforwindowload f-allowpolling f-nullurl f-usemoviestar f-allowscriptaccess"> <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> <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>
<div class="f-block f-flashversion"> <div class="f-block f-flashversion">
<p>New Flash 9-only features:</p> <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>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> <li class="in"><code>peakData</code> object: Left and right channel peak/volume data available while playing sound</li>
</ul> </ul>
</div> </div>
@ -238,7 +238,7 @@ soundManager.defaultOptions.volume = 33; <span>// set global default volume for
<h4 id="soundmanager-flashpollinginterval">soundManager.flashPollingInterval</h4> <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> <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>
<div class="f-block f-usehighperformance f-usefastpolling f-flashpollinginterval"> <div class="f-block f-usehighperformance f-usefastpolling f-flashpollinginterval">
<h4 id="soundmanager-highperformance">soundManager.useHighPerformance</h4> <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> <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>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> <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>
<div class="f-block f-useflashblock"> <div class="f-block f-useflashblock">
<h4 id="soundmanager-useflashblock" title="Recently-added feature" class="recent">soundManager.useFlashBlock</h4> <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> <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"> <div class="f-block f-usehtml5audio">
<h4 id="soundmanager-usehtml5audio">soundManager.useHTML5Audio</h4> <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><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>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> <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>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><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> <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> <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>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> <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> <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> <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> <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>&lt;a&gt;</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>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>&lt;a&gt;</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> <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> <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>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 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>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 &lt; 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>iPhone OS version &lt; 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> <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"> <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>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> <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> </ul>
<p>As of the June, 2010 release of SM2 (V2.96a.20100624):</p> <p>As of the June, 2010 release of SM2 (V2.96a.20100624):</p>
<ul> <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> <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> </ul>
<p>As of the May, 2010 release of SM2 (V2.96a.20100520):</p> <p>As of the May, 2010 release of SM2 (V2.96a.20100520):</p>
<ul> <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> <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>
</div> </div>
<div id="api" class="columnar"> <div id="api" class="columnar">
<div class="c1"> <div class="c1">
<h2>SoundManager Core API</h2> <h2>SoundManager Core API</h2>
<p>Methods for the soundManager object.</p> <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="c2">
<div class="f-block"> <div class="f-block">
<h3>SoundManager Global Object</h3> <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> <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 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: <dd>Example:
<pre class="block"><code>soundManager.onready(<span>function() { <pre class="block"><code>soundManager.onready(<span>function() {
alert('Yay, SM2 loaded OK!'); alert('Yay, SM2 loaded OK!');
}</span>);</code></pre> }</span>);</code></pre>
</dd> </dd>
<dd>Queueing multiple handlers: <code>soundManager.onready(<span>myOnReadyHandler</span>); soundManager.onready(<span>myOtherHandler</span>);</code></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 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: <dd>Example:
<pre class="block"><code>soundManager.ontimeout(<span>function() { <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> }</span>);</code></pre>
</dd> </dd>
<dd>Queueing multiple handlers: <code>soundManager.ontimeout(<span>myOnTimeoutHandler</span>); soundManager.ontimeout(<span>myOtherHandler</span>);</code></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"> <dl id="soundmanager-reboot" class="f-block f-reboot">
<dt>reboot()</dt> <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 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> <pre class="block"><code>soundManager.onerror = function() {<span>
<span>// Something went wrong during init - in this example, we *assume* flashblock etc.</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> 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 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> <dd>Example: <code>var mySMSound = soundManager.getSoundById('<span>mySound</span>');</code></dd>
</dl> </dl>
<dl id="soundmanager-getmemoryuse" class="f-block f-getmemoryuse"> <dl id="soundmanager-getmemoryuse" class="f-block f-getmemoryuse">
<dt class="flash9" title="Requires Flash 9.0+"><span>number:bytesUsed </span>getMemoryUse()</dt> <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> <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> </dl>
</div> </div>
</div> </div>
<div id="smsoundmethods" class="columnar"> <div id="smsoundmethods" class="columnar">
@ -663,9 +663,9 @@ mySoundObject.play(); <span><span>// SMSound object reference, same as soundMana
<div class="c2"> <div class="c2">
<div> <div>
<h3>Sound Object Methods</h3> <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> <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"> <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 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> <dd>Example: <code>mySound.setVolume(<span>50</span>);</code></dd>
</dl> </dl>
<dl id="smsound-togglemute" class="f-block s-togglemute"> <dl id="smsound-togglemute" class="f-block s-togglemute">
<dt><span>object:SMSound</span> toggleMute()</dt> <dt><span>object:SMSound</span> toggleMute()</dt>
<dd>Mutes/unmutes the given sound. Affected <span>muted</span> property (boolean.)</dd> <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>
<div id="smsoundevents" class="columnar"> <div id="smsoundevents" class="columnar">
<div class="c1"> <div class="c1">
<h2 id="soundmanager-sound-events">SMSound Events</h2> <h2 id="soundmanager-sound-events">SMSound Events</h2>
<p>Event handlers for SMSound objects.</p> <p>Event handlers for SMSound objects.</p>
</div> </div>
<div class="c2"> <div class="c2">
<div> <div>
<h3>Sound Object Events</h3> <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> <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>
<div style="margin-top:2em"> <div style="margin-top:2em">
<dl id="smsound-onbufferchange" class="f-block s-onbufferchange"> <dl id="smsound-onbufferchange" class="f-block s-onbufferchange">
<dt class="flash9">onbufferchange()</dt> <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>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> <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>
<dl id="smsound-ondataerror" class="f-block s-ondataerror s-waveformdata s-eqdata"> <dl id="smsound-ondataerror" class="f-block s-ondataerror s-waveformdata s-eqdata">
<dt title="Flash 9+ only" class="flash9">ondataerror()</dt> <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> <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>
</div> </div>
<div id="sound-object-properties" class="columnar"> <div id="sound-object-properties" class="columnar">
@ -957,7 +957,7 @@ for (prop in this.id3) {
<dt>url</dt> <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> <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>
<dl id="smsound-serverurl" class="f-block s-serverurl"> <dl id="smsound-serverurl" class="f-block s-serverurl">
<dt>serverURL</dt> <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> <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> <dt>bytesTotal</dt>
<dd>The total number of bytes to be downloaded, while loading a sound.</dd> <dd>The total number of bytes to be downloaded, while loading a sound.</dd>
</dl> </dl>
<dl id="smsound-didbeforefinish" class="f-block s-didbeforefinish"> <dl id="smsound-didbeforefinish" class="f-block s-didbeforefinish">
<dt>didBeforeFinish</dt> <dt>didBeforeFinish</dt>
<dd>Boolean indicating whether <code>beforeFinish()</code> condition was reached.</dd> <dd>Boolean indicating whether <code>beforeFinish()</code> condition was reached.</dd>
@ -1009,7 +1009,7 @@ for (prop in this.id3) {
<dt>didJustBeforeFinish</dt> <dt>didJustBeforeFinish</dt>
<dd>Boolean indicating whether <code>justBeforeFinish()</code> condition was reached.</dd> <dd>Boolean indicating whether <code>justBeforeFinish()</code> condition was reached.</dd>
</dl> </dl>
<dl id="smsound-duration" class="f-block s-duration"> <dl id="smsound-duration" class="f-block s-duration">
<dt>duration</dt> <dt>duration</dt>
<dd>The current length of the sound, specified in milliseconds.</dd> <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>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> <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>
<dl id="smsound-eqdata" class="f-block s-eqdata"> <dl id="smsound-eqdata" class="f-block s-eqdata">
<dt title="Flash 9+ only" class="flash9">eqData = {<span>left:[], right: []</span>}</dt> <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> <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>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> <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>
<dl id="smsound-id3" class="f-block s-id3"> <dl id="smsound-id3" class="f-block s-id3">
<dt>id3</dt> <dt>id3</dt>
<dd>An object literal populated, if applicable, when ID3 data is received (related handler: <code>onid3()</code>)</dd> <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> <dd>For property details, see <a href="#onid3" title="onid3() documentation" onclick="resetFilter()">onid3()</a>.</dd>
</dl> </dl>
<dl id="smsound-isbuffering" class="f-block s-isbuffering"> <dl id="smsound-isbuffering" class="f-block s-isbuffering">
<dt class="flash9">isBuffering</dt> <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> <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>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> <dd>Treat as read-only; use <code>pause()</code>, <code>resume()</code> and <code>togglePause()</code> methods to affect state.</dd>
</dl> </dl>
<dl id="smsound-peakdata" class="f-block s-peakdata"> <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> <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> <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> <p>Functions which may be called directly on sound objects.</p>
</div> </div>
<div class="c2"> <div class="c2">
<div class="f-block"> <div class="f-block">
<h3>SMSound Object Methods</h3> <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> <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>
</div> </div>
<!-- options --> <!-- options -->
<div id="smdefaults" class="columnar"> <div id="smdefaults" class="columnar">
<div class="c1"> <div class="c1">
<h2>SoundManager Default Options</h2> <h2>SoundManager Default Options</h2>
<p>An optional object specifying event handlers etc., passed to <code>createSound()</code> and <code>play()</code>.</p> <p>An optional object specifying event handlers etc., passed to <code>createSound()</code> and <code>play()</code>.</p>
</div> </div>
<div class="c2"> <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"> <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> <h3 id="sound-properties">SoundManager Global Sound Object Defaults</h3>
@ -1259,12 +1259,12 @@ for (prop in this.id3) {
autoPlay: true, autoPlay: true,
pan: -75, pan: -75,
volume: 50</span> 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> <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>
<div class="f-block f-defaultoptions f-flash9options f-moviestaroptions s-ismoviestar s-usepeakdata s-usewaveformdata s-useeqdata"> <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> <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>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> <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>
</div> </div>
<div id="soundmanager2-dynamic-properties" class="columnar"> <div id="soundmanager2-dynamic-properties" class="columnar">
<div class="c1"> <div class="c1">
<h2>SoundManager Runtime Properties</h2> <h2>SoundManager Runtime Properties</h2>
@ -1308,7 +1308,7 @@ soundManager.movieStarOptions = {<span>
</div> </div>
<div class="c2"> <div class="c2">
<div class="f-block f-features f-waveformdata f-peakdata"> <div class="f-block f-features f-waveformdata f-peakdata">
<h3 id="soundmanager-dynamic">SoundManager Dynamic (Runtime) Properties</h3> <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 &gt;= 9. This object has been added in anticipation of additional features with future versions of Flash.</p> <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 &gt;= 9. This object has been added in anticipation of additional features with future versions of Flash.</p>
</div> </div>
</div> </div>
</div> </div>
<div id="soundmanager-events" class="columnar"> <div id="soundmanager-events" class="columnar">
<div class="c1"> <div class="c1">
<h2>SoundManager Core Events</h2> <h2>SoundManager Core Events</h2>
<p>Events fired by SoundManager at start-up</p> <p>Events fired by SoundManager at start-up</p>
</div> </div>
<div class="c2"> <div class="c2">
<div class="f-block f-onload f-onerror f-oninitmovie"> <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> <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> </dl>
</div> </div>
</div> </div>
</div> </div>
<div class="columnar"> <div class="columnar">
<div class="c1"> <div class="c1">
<h2>SoundManager Collections</h2> <h2>SoundManager Collections</h2>
<p>Object collections which SoundManager maintains during runtime.</p> <p>Object collections which SoundManager maintains during runtime.</p>
</div> </div>
<div class="c2"> <div class="c2">
<div class="f-block"> <div class="f-block">
<h3>SoundManager Object Collections</h3> <h3>SoundManager Object Collections</h3>
@ -1406,19 +1406,19 @@ soundManager.movieStarOptions = {<span>
</dl> </dl>
</div> </div>
</div> </div>
</div> </div>
<div id="sound-options-object" class="columnar"> <div id="sound-options-object" class="columnar">
<div class="c1"> <div class="c1">
<h2>Sound Options Object Format</h2> <h2>Sound Options Object Format</h2>
<p>Object Literal, JSON-style form passed to <code>createSound()</code> and <code>play()</code></p> <p>Object Literal, JSON-style form passed to <code>createSound()</code> and <code>play()</code></p>
</div> </div>
<div class="c2"> <div class="c2">
<div class="f-block s-onload"> <!-- f-createsound s-sid s-url s-autoload s-autoplay s-onload --> <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> <h3 id="object-literal-format">Object Literal Format</h3>
@ -1442,14 +1442,14 @@ soundManager.movieStarOptions = {<span>
</div> </div>
</div> </div>
</div> </div>
<div id="col3" class="c3"> <div id="col3" class="c3">
<!-- <!--
<div id="get-satisfaction" class="box"> <div id="get-satisfaction" class="box">
<div id="gsfn_list_widget"> <div id="gsfn_list_widget">
@ -1489,7 +1489,7 @@ soundManager.movieStarOptions = {<span>
</div> </div>
--> -->
<div class="box"> <div class="box">
<h2>API Elements<span class="l"></span><span class="r"></span></h2> <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"> <li onclick="return setFilter(event,'f-')" class="ignore">
<h3 class="wedge">SoundManager<span class="l"></span><span class="r"></span></h3> <h3 class="wedge">SoundManager<span class="l"></span><span class="r"></span></h3>
<h4>Properties</h4> <h4>Properties</h4>
<ul> <ul>
@ -1661,14 +1661,14 @@ soundManager.movieStarOptions = {<span>
</li> </li>
</ul> </ul>
<!-- /.box --> <!-- /.box -->
</div> </div>
</div> </div>
</div> </div>
<div class="clear"></div> <div class="clear"></div>
<!-- /main --> <!-- /main -->
@ -1681,7 +1681,7 @@ soundManager.movieStarOptions = {<span>
init(); init();
</script> </script>
</body> </body>
</html> </html>

View file

@ -24,7 +24,7 @@
</head> </head>
<body> <body>
<div id="content"> <div id="content">
<div id="top"> <div id="top">
@ -72,7 +72,7 @@
<li><a href="../#smsoundmethods">Sound Object (SMSound) API</a></li> <li><a href="../#smsoundmethods">Sound Object (SMSound) API</a></li>
</ul> </ul>
</li> </li>
<li> <li>
<a href="../download/">Download</a> <a href="../download/">Download</a>
<ul> <ul>
@ -80,7 +80,7 @@
<li><a href="../download/#revision-history">Revision History</a></li> <li><a href="../download/#revision-history">Revision History</a></li>
</ul> </ul>
</li> </li>
<li> <li>
<a href="../technotes/">Technical Notes</a> <a href="../technotes/">Technical Notes</a>
<ul> <ul>
@ -102,13 +102,13 @@
</ul> </ul>
<div class="clear"></div> <div class="clear"></div>
</div> </div>
</div> </div>
<div id="main" class="triple"> <div id="main" class="triple">
<div class="columnar"> <div class="columnar">
<div class="c1"> <div class="c1">
<h2>Licensing</h2> <h2>Licensing</h2>
@ -122,15 +122,15 @@
</div> </div>
<div id="related" class="columnar"> <div id="related" class="columnar">
<div class="c1"> <div class="c1">
<h2>General + Related</h2> <h2>General + Related</h2>
<p>Other information about SoundManager 2.</p> <p>Other information about SoundManager 2.</p>
</div> </div>
<div class="c2"> <div class="c2">
<div class="f-block c-about"> <div class="f-block c-about">
<h3 id="general">General</h3> <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> <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> <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://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 -&gt; ActionScript Classes -&gt; Sound</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 -&gt; ActionScript Classes -&gt; 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> </ul>
</div> </div>
@ -171,11 +171,11 @@
</div> </div>
</div> </div>
<div id="col3" class="c3"> <div id="col3" class="c3">
<div id="get-satisfaction" class="box"> <div id="get-satisfaction" class="box">
<div id="gsfn_list_widget"> <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> <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>
<div class="clear"></div> <div class="clear"></div>
<!-- /main --> <!-- /main -->
@ -233,7 +233,7 @@
<script type="text/javascript"> <script type="text/javascript">
init(); init();
</script> </script>
</body> </body>
</html> </html>

View file

@ -24,7 +24,7 @@
</head> </head>
<body> <body>
<div id="content"> <div id="content">
<div id="top"> <div id="top">
@ -72,7 +72,7 @@
<li><a href="../#smsoundmethods">Sound Object (SMSound) API</a></li> <li><a href="../#smsoundmethods">Sound Object (SMSound) API</a></li>
</ul> </ul>
</li> </li>
<li> <li>
<a href="../download/">Download</a> <a href="../download/">Download</a>
<ul> <ul>
@ -80,7 +80,7 @@
<li><a href="../download/#revision-history">Revision History</a></li> <li><a href="../download/#revision-history">Revision History</a></li>
</ul> </ul>
</li> </li>
<li> <li>
<strong><a href="../technotes/">Technical Notes</a></strong> <strong><a href="../technotes/">Technical Notes</a></strong>
<ul> <ul>
@ -102,7 +102,7 @@
</ul> </ul>
<div class="clear"></div> <div class="clear"></div>
</div> </div>
</div> </div>
<div id="main" class="triple"> <div id="main" class="triple">
@ -119,14 +119,14 @@
</div> </div>
</div> </div>
<div class="columnar"> <div class="columnar">
<div class="c1"> <div class="c1">
<h2>Requirements + Specifications</h2> <h2>Requirements + Specifications</h2>
<p>What SM2 needs, and how it works.</p> <p>What SM2 needs, and how it works.</p>
</div> </div>
<div class="c2"> <div class="c2">
<div class="f-block c-requirements"> <div class="f-block c-requirements">
@ -204,22 +204,22 @@
</div> </div>
</div> </div>
</div> </div>
<div id="debug-output" class="columnar"> <div id="debug-output" class="columnar">
<div class="c1"> <div class="c1">
<h2>Debug + Console Output</h2> <h2>Debug + Console Output</h2>
<p>Console-style messaging, useful for troubleshooting start-up and runtime issues.</p> <p>Console-style messaging, useful for troubleshooting start-up and runtime issues.</p>
</div> </div>
<div class="c2"> <div class="c2">
<h3>Live Debug Output</h3> <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">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 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>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>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> <p>Below is a live example of debug output from SM2:</p>
<div id="live-debug" class="block"> <div id="live-debug" class="block">
@ -227,7 +227,7 @@
<!-- live debug goes here --> <!-- live debug goes here -->
</div> </div>
</div> </div>
<p>And, Flash debug output:</p> <p>And, Flash debug output:</p>
<div id="sm2-container"> <div id="sm2-container">
@ -238,10 +238,10 @@
</div> </div>
<div id="col3" class="c3"> <div id="col3" class="c3">
<div id="get-satisfaction" class="box"> <div id="get-satisfaction" class="box">
<div id="gsfn_list_widget"> <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> <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>
<div class="clear"></div> <div class="clear"></div>
<!-- /main --> <!-- /main -->
@ -299,7 +299,7 @@
<script type="text/javascript"> <script type="text/javascript">
init(); init();
</script> </script>
</body> </body>
</html> </html>

View file

@ -179,7 +179,7 @@ body #sm2-container embed {
</head> </head>
<body class="home"> <body class="home">
<div id="content"> <div id="content">
<div id="top"> <div id="top">
@ -229,7 +229,7 @@ body #sm2-container embed {
<li><a href="doc/#smsoundmethods">Sound Object (SMSound) API</a></li> <li><a href="doc/#smsoundmethods">Sound Object (SMSound) API</a></li>
</ul> </ul>
</li> </li>
<li> <li>
<a href="doc/download/">Download</a> <a href="doc/download/">Download</a>
<ul> <ul>
@ -238,7 +238,7 @@ body #sm2-container embed {
</ul> </ul>
</li> </li>
<li> <li>
<a href="doc/technotes/">Technical Notes</a> <a href="doc/technotes/">Technical Notes</a>
<ul> <ul>
@ -260,11 +260,11 @@ body #sm2-container embed {
</ul> </ul>
<div class="clear"></div> <div class="clear"></div>
</div> </div>
</div> </div>
<div id="main" class="triple"> <div id="main" class="triple">
<div id="live-demos" class="columnar"> <div id="live-demos" class="columnar">
<div class="c1"> <div class="c1">
@ -273,7 +273,7 @@ body #sm2-container embed {
</div> </div>
<div class="c2"> <div class="c2">
<h3>About SoundManager 2, Features and Live Demos</h3> <h3>About SoundManager 2, Features and Live Demos</h3>
<div style="position:relative;padding-top:0.5em;padding-bottom:0.75em"> <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" /> <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> <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>&raquo;</span></a></p> <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>&raquo;</span></a></p>
<div class="clear">&nbsp;</div> <div class="clear">&nbsp;</div>
</div> </div>
<div id="demo-box"> <div id="demo-box">
@ -343,9 +343,9 @@ body #sm2-container embed {
</div> </div>
</div> </div>
</div> </div>
<h4 style="clear:left;margin-top:0.5em">HTML5 Audio Support <span style="color:#888">(Beta-ish)</span></h4> <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"> <ul id="html5-audio-notes" class="standard">
<li>100% Flash-free MP3 + MP4/AAC where supported. Works on iPad, iPhone iOS 4</li> <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>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> <li>See <a href="doc/#soundmanager-usehtml5audio" title="soundManager.useHTML5Audio HTML5 Audio() support feature documentation">soundManager<wbr>.useHTML5Audio</a> for implementation details</li>
</ul> </ul>
<h4>Basic API Features (Flash 8)</h4> <h4>Basic API Features (Flash 8)</h4>
<ul class="standard"> <ul class="standard">
<li>Load, stop, play, pause, mute, seek, pan, volume control from JavaScript</li> <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>Peak (L/R channel volume) data</li>
<li>Audio buffering state/event handling</li> <li>Audio buffering state/event handling</li>
</ul> </ul>
<h4>General Tech Stuff</h4> <h4>General Tech Stuff</h4>
<ul class="standard"> <ul class="standard">
<li>Full <a href="doc/" title="SoundManager 2 documentation">API Documentation</a> with examples and notes</li> <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>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> <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> </ul>
<h4>As Heard On <span class="scratched-out">TV</span> The Internets</h4> <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> <p class="tight compact">A few nifty places SoundManager 2 has been seen in use on the Wild World Web:</p>
<div class="inthewild"> <div class="inthewild">
@ -405,7 +405,7 @@ body #sm2-container embed {
</div> </div>
<div class="clear">&nbsp;</div> <div class="clear">&nbsp;</div>
<div class="columnar"> <div class="columnar">
<div class="c1"> <div class="c1">
@ -429,16 +429,16 @@ body #sm2-container embed {
mySound.play();</code></pre> mySound.play();</code></pre>
<p><a href="demo/api/">See API Demos</a></p> <p><a href="demo/api/">See API Demos</a></p>
</div> </div>
</div> </div>
<div class="columnar"> <div class="columnar">
<div class="c1"> <div class="c1">
<h2>Using SM2 on your site</h2> <h2>Using SM2 on your site</h2>
<p>How to include SoundManager 2 from HTML, and some basic event handlers.</p> <p>How to include SoundManager 2 from HTML, and some basic event handlers.</p>
</div> </div>
<div class="c2"> <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> <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>&lt;script type="text/javascript" src="<span>/path/to/soundmanager2.js</span>"&gt;&lt;/script&gt; <pre class="block"><code>&lt;script type="text/javascript" src="<span>/path/to/soundmanager2.js</span>"&gt;&lt;/script&gt;
@ -453,16 +453,16 @@ soundManager.onload = function() {
<p><a href="demo/template/">See a basic template demo</a></p> <p><a href="demo/template/">See a basic template demo</a></p>
</div> </div>
</div> </div>
<div id="licensing" class="columnar"> <div id="licensing" class="columnar">
<div class="c1"> <div class="c1">
<h2>Licensing</h2> <h2>Licensing</h2>
<p>BSD licensed.</p> <p>BSD licensed.</p>
</div> </div>
<div class="c2"> <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> <p>SoundManager 2 is provided under a <a href="license.txt" title="SoundManager 2 BSD license" class="norewrite">BSD license</a>.</p>
</div> </div>
@ -471,7 +471,7 @@ soundManager.onload = function() {
<!-- columnar --> <!-- columnar -->
</div> </div>
<div class="clear"></div> <div class="clear"></div>
<div id="col3" class="c3"> <div id="col3" class="c3">
@ -522,7 +522,7 @@ init();
</script> </script>
</div> </div>
</body> </body>
</html> </html>

View file

@ -6,7 +6,7 @@ All rights reserved.
Redistribution and use in source and binary forms, with or without modification, Redistribution and use in source and binary forms, with or without modification,
are permitted provided that the following conditions are met: 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. list of conditions and the following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice, this * Redistributions in binary form must reproduce the above copyright notice, this

View file

@ -56,7 +56,7 @@
} }
#sm2-test ul.items li div.details { #sm2-test ul.items li div.details {
display:none; display:none;
} }
#sm2-test ul.items li.open div.details, #sm2-test ul.items li.open div.details,

View file

@ -30,7 +30,7 @@
<script type="text/javascript" src="../script/soundmanager2.js"></script> <script type="text/javascript" src="../script/soundmanager2.js"></script>
<script type="text/javascript"> <script type="text/javascript">
// optional // optional
soundManager.url = '../swf/'; soundManager.url = '../swf/';
soundManager.onload = function() {} soundManager.onload = function() {}
</script> </script>
@ -82,7 +82,7 @@ soundManager.onload = function() {}
</li> </li>
<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". 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"> <div id="d-flashtojs-offline" style="padding-bottom:1em">
<h4>Offline viewing: Adding a "trusted location" to the Flash Security Settings Panel</h4> <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> <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> </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> <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> </div>
</li> </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">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> <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"> <div class="details">
<p>At this point, Javascript attempts to respond to Flash's initial outgoing Flash -&gt; JS call, completing the test for JS/flash communication. If SM2 does not receive a response from flash, it will eventually fail.</p> <p>At this point, Javascript attempts to respond to Flash's initial outgoing Flash -&gt; 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 &lt;-&gt; JS communication. See the details of Flash -&gt; JS for information.</p> <p>Offline viewing conditions and cross-domain security rules will prevent Flash &lt;-&gt; JS communication. See the details of Flash -&gt; JS for information.</p>
</div> </div>
</li> </li>
<li id="d-soundtest" class="default"> <li id="d-soundtest" class="default">

View file

@ -4,13 +4,13 @@ var Game = new app({
'order!layouts/PlayerLayer', 'order!layouts/PlayerLayer',
'order!layouts/Ennemies' 'order!layouts/Ennemies'
], ],
'wrapper': $('#GameContainer') 'wrapper': $('#GameContainer')
}), }),
GameVersion = 0 ; GameVersion = 0 ;
// Init Application and bind all games events // Init Application and bind all games events
jQuery(document).ready(function() { jQuery(document).ready(function() {
/************************************************************************** /**************************************************************************
* Load Dependencies & Create Application * Load Dependencies & Create Application
***************************************************************************/ ***************************************************************************/
@ -18,42 +18,42 @@ jQuery(document).ready(function() {
var baseLibs = [ var baseLibs = [
'order!libs/jquery.transform-0.9.3.min', 'order!libs/jquery.transform-0.9.3.min',
'order!layouts/LayoutClass' 'order!layouts/LayoutClass'
] ; ] ;
require({ require({
baseUrl: "js/", baseUrl: "js/",
urlArgs: "bust=" + GameVersion urlArgs: "bust=" + GameVersion
}, },
baseLibs, baseLibs,
// -- All objects are loaded => can run // -- All objects are loaded => can run
function() { function() {
// -- Init Stage or show IE popup // -- Init Stage or show IE popup
if ( ! $.browser.msie || ( $.browser.msie && $.browser.version >= 9 ) ) { if ( ! $.browser.msie || ( $.browser.msie && $.browser.version >= 9 ) ) {
Game.init() ; Game.init() ;
} else { } else {
alert('Sorry but this game only works in good navigators. Please download Google Chrome or Firefox' ) ; alert('Sorry but this game only works in good navigators. Please download Google Chrome or Firefox' ) ;
} }
} }
); );
/************************************************************************** /**************************************************************************
* Game Controls Events * Game Controls Events
***************************************************************************/ ***************************************************************************/
// -- Game is loaded // -- Game is loaded
$(document).bind('gameLoaded', function(e, res) { $(document).bind('gameLoaded', function(e, res) {
}); });
// -- Init Game // -- Init Game
$(document).bind('gameInit', function(e, res) { $(document).bind('gameInit', function(e, res) {
$(document).trigger('gameReset') ; $(document).trigger('gameReset') ;
}) ; }) ;
// -- Game Reset // -- Game Reset
$(document).bind('gameReset', function(e, res) { $(document).bind('gameReset', function(e, res) {
Game.score = 0 ; Game.score = 0 ;
@ -69,43 +69,43 @@ jQuery(document).ready(function() {
} }
}) ; }) ;
}) ; }) ;
$('#ground, #ship').fadeTo(500, 1) ; $('#ground, #ship').fadeTo(500, 1) ;
if ( timers.loopGame ) clearInterval(timers.loopGame) ; if ( timers.loopGame ) clearInterval(timers.loopGame) ;
timers.loopGame = setInterval(Game.loopAnimation, 1000/FPS) ; timers.loopGame = setInterval(Game.loopAnimation, 1000/FPS) ;
}) ; }) ;
// -- Start Animation // -- Start Animation
$(document).bind('gameStart', function(e, res) { $(document).bind('gameStart', function(e, res) {
$('#hud').fadeIn(500) ; $('#hud').fadeIn(500) ;
if ( timers.loopGame ) clearInterval(timers.loopGame) ; if ( timers.loopGame ) clearInterval(timers.loopGame) ;
timers.loopGame = setInterval(Game.loopAnimation, 1000/FPS) ; timers.loopGame = setInterval(Game.loopAnimation, 1000/FPS) ;
}) ; }) ;
// -- On Complete Launch // -- On Complete Launch
$(document).bind('gameComplete', function(e, res) { $(document).bind('gameComplete', function(e, res) {
// -- Stop layouts running // -- Stop layouts running
$('.sprite').not('.explosion').remove() ; $('.sprite').not('.explosion').remove() ;
Layouts.Ennemies.running = false ; Layouts.Ennemies.running = false ;
Layouts.Background.running = false ; Layouts.Background.running = false ;
// -- Show game over overlay // -- Show game over overlay
$('#game-over:hidden').fadeIn(500) ; $('#game-over:hidden').fadeIn(500) ;
$('#ground, #ship').fadeTo(500, 0.2) ; $('#ground, #ship').fadeTo(500, 0.2) ;
// -- Play Sound // -- Play Sound
soundManager.play('gameOver') ; soundManager.play('gameOver') ;
// -- Stop loopAnimation // -- Stop loopAnimation
if ( timers.loopGame ) clearInterval(timers.loopGame) ; if ( timers.loopGame ) clearInterval(timers.loopGame) ;
}) ; }) ;
// -- Bind Start Button // -- Bind Start Button
$('#start-game').click(function() { $('#start-game').click(function() {
soundManager.play('click') ; soundManager.play('click') ;
@ -117,8 +117,8 @@ jQuery(document).ready(function() {
}, function() { }, function() {
$(this).removeClass('hover') ; $(this).removeClass('hover') ;
}) ; }) ;
// -- Bind Restart Screen controls // -- Bind Restart Screen controls
$('#restart-game').click(function() { $('#restart-game').click(function() {
soundManager.play('click') ; soundManager.play('click') ;
@ -130,6 +130,6 @@ jQuery(document).ready(function() {
}, function() { }, function() {
$(this).removeClass('hover') ; $(this).removeClass('hover') ;
}) ; }) ;
}) ; }) ;

View file

@ -1,4 +1,4 @@
/************************************************************************** /**************************************************************************
* SOUNDMANAGER CONFIG * SOUNDMANAGER CONFIG
***************************************************************************/ ***************************************************************************/
@ -6,13 +6,13 @@
soundManager.bgColor = '#ffffff'; soundManager.bgColor = '#ffffff';
soundManager.debugMode = false; soundManager.debugMode = false;
soundManager.url = 'js/libs/soundmanager/swf/'; soundManager.url = 'js/libs/soundmanager/swf/';
soundManager.wmode = 'transparent'; // hide initial flash of white on everything except firefox/win32 soundManager.wmode = 'transparent'; // hide initial flash of white on everything except firefox/win32
soundManager.allowScriptAccess = 'always'; soundManager.allowScriptAccess = 'always';
soundManager.useFastPolling = true; soundManager.useFastPolling = true;
soundManager.flashVersion = 9; soundManager.flashVersion = 9;
soundManager.flashLoadTimeout = 3000; soundManager.flashLoadTimeout = 3000;
soundManager.useHTML5Audio = true; soundManager.useHTML5Audio = true;
// -- when ready, preload sounds // -- when ready, preload sounds
soundManager.onready(function() { soundManager.onready(function() {
@ -35,8 +35,8 @@
this.play(); this.play();
} }
}); });
// -- Click // -- Click
soundManager.createSound({ soundManager.createSound({
id: 'click', id: 'click',
url: 'audio/click.ogg', url: 'audio/click.ogg',
@ -45,7 +45,7 @@
multiShot: false, multiShot: false,
volume: 50 volume: 50
}); });
// -- Fire // -- Fire
soundManager.createSound({ soundManager.createSound({
id: 'shoot', id: 'shoot',
@ -55,7 +55,7 @@
multiShot: true, multiShot: true,
volume: 30 volume: 30
}); });
// -- Explode // -- Explode
soundManager.createSound({ soundManager.createSound({
id: 'explode', id: 'explode',
@ -65,7 +65,7 @@
multiShot: true, multiShot: true,
volume: 10 volume: 10
}); });
// -- Game Over // -- Game Over
soundManager.createSound({ soundManager.createSound({
id: 'gameOver', id: 'gameOver',
@ -75,12 +75,11 @@
multiShot: true, multiShot: true,
volume: 10 volume: 10
}); });
}); });
soundManager.ontimeout(function() { soundManager.ontimeout(function() {
var smLoadFailWarning = 'Oh snap! : ' + (soundManager.hasHTML5 ? 'The flash portion of ' : '') + 'SoundManager 2 was unable to start. '; var smLoadFailWarning = 'Oh snap! : ' + (soundManager.hasHTML5 ? 'The flash portion of ' : '') + 'SoundManager 2 was unable to start. ';
_log(smLoadFailWarning) ; _log(smLoadFailWarning) ;
}); });