Using SoundManager 2 as Jquery plugin
I wrote a simple plugin actig like inlineplayer.js, but with jQuery (Feel free to use/modify!):
$.playable = function( url, settings ) {
var sm = soundManager,
playable = arguments.callee;
sm.url = url;
sm.consoleOnly = window.location.hash.match(/console$/i);
sm.debugMode = window.location.hash.match(/^#debug/i);
$.extend( sm.defaultOptions,
{
autoStart : false,
autoNext : true,
pauseSkip : true,
playAlone : true,
doUnload : false,
css : {
playable: 'playable',
playing : 'playing',
paused : 'paused'
},
onload : function() {
if ( this.readyState == 2 )
playable.next.call( this );
},
onplay : function() {
var options = this.options,
current = options.element.removeClass( options.css.paused ).addClass( options.css.playing ).focus();
if ( playable.current && playable.current != current )
playable.current.data( 'playable' )[ options.pauseSkip ? 'pause' : 'stop' ]();
if ( options.playAlone )
playable.current = current;
},
onstop : function() {
var options = this.options;
options.element.removeClass( options.css.playing + ' ' + options.css.paused );
if ( options.doUnload )
this.unload();
},
onpause : function() {
var options = this.options;
options.element.removeClass( options.css.playing ).addClass( options.css.paused );
},
onresume : function() {
this.options.onplay.call( this );
},
onfinish : function() {
var options = this.options;
if ( options.autoNext )
playable.next.call( this );
options.onstop.call( this );
}
},
settings
);
$.extend( playable, {
count : 0,
current : null,
init : function( options ) {
var self = this,
options = $.extend( true, {}, sm.defaultOptions, options );
this.addClass( options.css.playable )
.click( function( event ) {
event.preventDefault();
$( this ).data( 'playable' ).togglePause();
} )
.each( function() {
$( this ).data( 'playable', sm.createSound( $.extend(
{
id : 'playable' + playable.count++,
url : this.href,
element : $( this ),
selector: self.selector
},
options
) ) );
} );
if ( options.autoStart )
self.filter( ':first' ).click();
},
next : function() {
var options = this.options,
next = $( options.element ).next( options.selector ).data( 'playable' );
if ( next && ! next.playState )
next.play();
}
}
);
};
$.fn.playable = function( options ) {
var self = this.is( 'a[href]' ) ? this : this.find( 'a[href]' );
soundManager.onload = function() {
if ( soundManager.canPlayURL( self.attr( 'href' ) ) )
$.playable.init.call( self, options );
};
};
$(function(){
/* Simple usage */
$.playable('soundmanager/swf/');
$('a').playable();
/* Full usage, with options
$.playable('soundmanager/swf/', { //options used here are stored as soundManager.defaultOptions
// You can use all SM2 default options, plus the following:
autoStart : false, // Start playing the first item
autoNext : false, // Play next itemwhen previous ends
pauseSkip : false, // Just pause previous on skip
playAlone : false, // Force stop/pause previous on skip
doUnload : false // Unload sound on stop/finish
});
//Exemples configurations
$('.playlist').playable({autoStart: true, autoNext: true, playAlone: true, doUnload: false});
$('.sampler').playable({autoStart: false, autoNext: false, playAlone: true});
$('.listen').playable({autoStart: false, autoNext: false, playAlone: true,pauseSkip: true, doUnload: true});
*/
});
$.playable = function( url, settings ) {
var sm = soundManager,
playable = arguments.callee;
sm.url = url;
sm.consoleOnly = window.location.hash.match(/console$/i);
sm.debugMode = window.location.hash.match(/^#debug/i);
$.extend( sm.defaultOptions,
{
autoStart : false,
autoNext : true,
pauseSkip : true,
playAlone : true,
doUnload : false,
css : {
playable: 'playable',
playing : 'playing',
paused : 'paused'
},
onload : function() {
if ( this.readyState == 2 )
playable.next.call( this );
},
onplay : function() {
var options = this.options,
current = options.element.removeClass( options.css.paused ).addClass( options.css.playing ).focus();
if ( playable.current && playable.current != current )
playable.current.data( 'playable' )[ options.pauseSkip ? 'pause' : 'stop' ]();
if ( options.playAlone )
playable.current = current;
},
onstop : function() {
var options = this.options;
options.element.removeClass( options.css.playing + ' ' + options.css.paused );
if ( options.doUnload )
this.unload();
},
onpause : function() {
var options = this.options;
options.element.removeClass( options.css.playing ).addClass( options.css.paused );
},
onresume : function() {
this.options.onplay.call( this );
},
onfinish : function() {
var options = this.options;
if ( options.autoNext )
playable.next.call( this );
options.onstop.call( this );
}
},
settings
);
$.extend( playable, {
count : 0,
current : null,
init : function( options ) {
var self = this,
options = $.extend( true, {}, sm.defaultOptions, options );
this.addClass( options.css.playable )
.click( function( event ) {
event.preventDefault();
$( this ).data( 'playable' ).togglePause();
} )
.each( function() {
$( this ).data( 'playable', sm.createSound( $.extend(
{
id : 'playable' + playable.count++,
url : this.href,
element : $( this ),
selector: self.selector
},
options
) ) );
} );
if ( options.autoStart )
self.filter( ':first' ).click();
},
next : function() {
var options = this.options,
next = $( options.element ).next( options.selector ).data( 'playable' );
if ( next && ! next.playState )
next.play();
}
}
);
};
$.fn.playable = function( options ) {
var self = this.is( 'a[href]' ) ? this : this.find( 'a[href]' );
soundManager.onload = function() {
if ( soundManager.canPlayURL( self.attr( 'href' ) ) )
$.playable.init.call( self, options );
};
};
$(function(){
/* Simple usage */
$.playable('soundmanager/swf/');
$('a').playable();
/* Full usage, with options
$.playable('soundmanager/swf/', { //options used here are stored as soundManager.defaultOptions
// You can use all SM2 default options, plus the following:
autoStart : false, // Start playing the first item
autoNext : false, // Play next itemwhen previous ends
pauseSkip : false, // Just pause previous on skip
playAlone : false, // Force stop/pause previous on skip
doUnload : false // Unload sound on stop/finish
});
//Exemples configurations
$('.playlist').playable({autoStart: true, autoNext: true, playAlone: true, doUnload: false});
$('.sampler').playable({autoStart: false, autoNext: false, playAlone: true});
$('.listen').playable({autoStart: false, autoNext: false, playAlone: true,pauseSkip: true, doUnload: true});
*/
});
8
people like this idea
I like this idea!
Tell me when this idea gets some attention.
The more people who like this idea, the more it gets noticed.
The more people who like this idea, the more it gets noticed.
The company implemented this idea.
Create a customer community for your own organization
Plans starting at $19/month
-
Inappropriate?Thanks, this looks to be useful for JQuery users. I'm not terribly familiar with JQuery myself, but the syntax is quite nice. I think they have some sort of public directory/repository for plugins, but again I'm no expert on the matter. ;)
I’m happy
-
Inappropriate?A wrote a proper plugin, check:
http://github.com/adriengibrat/jQuery...
2 people think
this is one of the best points
-
I was looking for this exactly. Thanks -
Inappropriate?I'm going to say Adrien has implemented this, for the inline player case. Done and done!
I’m thankful
-
Inappropriate?And the ui file implements a basic player (no equalizer, nor balance) as in page player....
I’m happy you like it
Loading Profile...



EMPLOYEE