Version 1 Themes

This page provides legacy documentation for the version 1 theme API. For new themes you should use the current API.

Info property list

For Version 1 themes the SwinsianThemeVersion value should be left at 1.

Writing the theme HTML and Javascript

The index.html page must include a Javascript function called updateWithNewTrack(). This function is called by Swinsian when a track starts to play and you should use it to update the page with the new tags and artwork values. Below is an example implementation of updateWithNewTrack showing all the parameters passed by Swinsian:

function updateWithNewTrack(title, artist, album, composer, genre, trackNum, paused, stopped, artURL, year, filetype, bitrate) {
	document.getElementById('track-title').textContent = title;
	document.getElementById('artist').textContent = artist;
	document.getElementById('album').textContent = album;
	var art = document.getElementById('art');
	art.src = artURL;
};

There are two other optional functions you can implement: mouseTrackingAreas() and windowSize().

The mouseTrackingAreas() function allows you to designate areas of the theme window that will receive mouse events so that you can add support for control buttons. The 'Default' theme contains an example of this. The function needs to return an array of rectangles. The rectangles are arrays containing 4 numbers: x location, y location, width and height. To add buttons to control playback you will need to use the window.Player object which supports playPause() forward() and back(). Again the 'Default' theme shows how to use these.

The windowSize() function allows you to customise the size of the theme. By default themes are shown in a window that is 480 pixels wide and 200 high: anything larger than that will be cut off. If you wish your theme to display at a different size then implement the function and return an array of two numbers, width and height.