<?sphp $this->text('pagetitle') ?>
Home of the Squeezebox™ & Transporter® network music players.


From SqueezeboxWiki

Jump to: navigation, search

SqueezeJS is a JavaScript framework based on ExtJS. It's primarily been created for use with the new Default skin. But it can be used to easily create new pages using the same behaviour and UI components.



This is the core of SqueezeJS. It monitors Squeezebox Server acitivity, firing specific events, providing some static methods. Most of the time SqueezeJS based web pages shouldn't care about querying SqueezeCenter's status, but listen to some events fired by the Controller.

Inheriting Ext.util.Observable


Return currently selected player ID


Select a player by ID

SqueezeJS.Controller.request([JSON formatted CLI request])

Execute a CLI command using the JSON/RPC interface.

SqueezeJS.Controller.playerRequest([JSON formatted CLI request])

Execute a player specific CLI call using the JSON/RPC interface.

// pause playback


Request any URL from the server. This can be eg. a command which is not available over the CLI, but as a page handler. The request is executed in the background.


Provide localized strings using the jsString Template Toolkit block:

<script type="text/javascript">
	[% PROCESS jsString id='LOADING' jsId='loading' %]

Loading strings dynamically

Processing strings as described above is the recommended way to include strings. It's still possible to load them dynamically:

<script type="text/javascript">
	SqueezeJS.loadStrings(['NEXT', 'PREVIOUS]);

Please note that as these requests are run asynchronously, strings won't immediately be available using the string() method. Thus you should try to run the loadString[s]() calls during initialisation, eg. using Ext.onReady().


Static class parsing song information from the status query.

// get currently playing track title
var title = SqueezeJS.SonginfoParser.title(data);



Inheriting from Ext.Component - Base class for labels & more, adding listeners for SqueezeCenter specific events.

SqueezeJS.UI.[ Album | AlbumTitle | AlbumYear | Bitrate | CompoundPlaytime | CompoundTitle | Contributors | Coverart | CurrentIndex | Duration | Playtime | PlaytimeRemaining | RawTitle | SongCount | Title | TrackNo ]

Inheriting from SqueezeJS.UI.Component - various labels displaying track and playlist information. Some of them are linking to browse mode pages and songinfo page (unless using noLink in object configuration)


Inheriting from Ext.Button - Base class for all Buttons, adding listeners for SqueezeCenter specific events.


SqueezeJS.UI.ScannerInfo =

Inheriting from Ext.Component - display one line scanner information to be used in eg. the status bar


Static class - display multi line scanner information as used in progress.html and settings/server/status.html


Inherting Ext.dd.DDProxy - A helper class implementing items which can be dragged around. This class adds default behaviour for highlighting elements.

SqueezeJS Tutorial