2.1 General information

2.2 HTML tags

2.3 Hyperlink commands

2.4 Publishing your skins

BrowseAmp is designed to be used with many different skins. All you can see in your webbrowser can be modified by you. The modular template structure allows you to use html code snippets in many different ways.

The skin html file is parsed by BrowseAmp and all valid HTML-Tags are replaced with the information they describe.

If you want to create a skin that is detected by BrowseAmp you need to:

• add a new directory for your skin in the BrowseAmp directory
  example: %QCD-Dir%\plugins\browseamp\myskin
• create an index.html file that is designated to be the main page

With these two steps BrowseAmp should detect your skin on a QCD restart.

Any information provided by the Player can be displayed with HTML-Tags. These little things are placed in any Skin-file wherever you want. The file is parsed by BrowseAmp and the tags are replaced with the specific information the tags describe. Just try it!

Tagname syntax
<#Tagname parameter1=content1 parameter2="some content with blanks">

Some hints how to use the tags

If a parameter contains blanks you need some " "

Attention: Use &lt; and &gt; instead of < or >. If you don't replace the "<>" you could get access violations!

Tagname is NOT case sensitive. <#date> or <#DaTe> will do the same.

Example 1
<#Channels on_stereo="&lt;img src='gfx/stereo.gif&gt;'" on_mono="&lt;img src='gfx/mono.gif&gt;'">

Example 2
<img src="gfx/<#Channels on_stereo=stereo.gif on_mono=mono.gif>">

<#include file=filename>

inserts the given file at the current position.

Parameter
file: required, specifies a path/filename to include.

Example
<#include file=templates/playlist_template2.html>

<#browser_drives template=filename>

Used to build a list of all available drives on your system.

Parameter
template: required, Specifies a path/filename to use as template for a drive. The template is inserted for EVERY drive found on your system. You can use table rows <tr>...</tr> for example.

Example
<#browser_drives template=templates/browser_drives.html>

<#browser_drivename>

Should be used in the template for browser_drives. The tag is replaced with a drive.

Parameter
none.

Example
<a href="browser.html?drive=<#browser_enc_drivename>"> <#browser_drivename></a>

<#browser_enc_drivename>

Should be used in the template for browser_drives. The tag is replaced with a url encoded drive name. That is needed for links.

Parameter
none.

Example
<a href="browser.html?drive=<#browser_enc_drivename>"> <#browser_drivename></a>

<#browser_directories template=filename>

Used to build a list of directories in the current folder.

Parameter
template: required, Specifies a path/filename to use as template for a directory. The template is inserted for EVERY directory found in the current browser directory. You can use table rows <tr>...</tr> for example.

Example
<#browser_directories template=templates/browser_directories.html>

<#browser_directoryname>

Should be used in the template for browser_directories. The tag is replaced with a directory name.

Parameter
none.

Example
<a href="browser.html?dir=<#browser_enc_directoryname>"> <#browser_directoryname></a>

<#browser_form_directoryname>

Should be used in the template for browser_directories. The tag is replaced with a directory name modified to be used in a form (e.g. checkbox).

Parameter
none.

Example
<input name="add" type="checkbox" id="add" value="<#browser_form_directoryname>">

<#browser_enc_directoryname>

Should be used in the template for browser_directories. The tag is replaced with a url encoded directory name. That is needed for links.

Parameter
none.

Example
<a href="browser.html?dir=<#browser_enc_directoryname>"> <#browser_directoryname></a>

<#browser_files template=filename>

Used to build a list of files in the current folder.

Parameter
template: required, Specifies a path/filename to use as template for a file. The template is inserted for EVERY file found in the current browser directory. You can use table rows <tr>...</tr> for example.

Example
<#browser_files template=templates/browser_files.html>

<#browser_filename>

Should be used in the template for browser_files. The tag is replaced with a filename.

Parameter
none.

Example
<a href="browser.html?file=<#browser_enc_filename>"> <#browser_filename></a>

<#browser_form_filename>

Should be used in the template for browser_files. The tag is replaced with a filename modified to be used in a form (e.g. checkbox).

Parameter
none.

Example
<input name="add" type="checkbox" id="add" value="<#browser_form_filename>">

<#browser_enc_filename>

Should be used in the template for browser_files. The tag is replaced with a url encoded filename. That is needed for links.

Parameter
none.

Example
<a href="browser.html?file=<#browser_enc_filename>"> <#browser_filename></a>

<#CurrentBrowserDirectory>

Is replaced with the directory you are currently in.

Parameter
none.

Example
Current folder: <#CurrentBrowserDirectory>

<#playlist template=filename highlight=filename next=filename length=# offset=#>

Used to build a list of files in the current folder.

Parameters
template: required, Specifies a path/filename to use as template for a song. The template is inserted for EVERY song in the current playlist. You can use table rows <tr>...</tr> for example.

highlight: Specifies a path/filename to use as template for the current track playing. You can use table rows <tr>...</tr> for example.

next: Specifies a path/filename to use as template for the next track beeing played. You can use table rows <tr>...</tr> for example.

length: many song to show (integer).

offset: specifies the beginning of the playlist relative to the current track. If you use offset=-2 then the two tracks before the current track are also shown. You will understand that when you tried it...

Example
<#playlist template=templates/playlist_row2.html highlight=templates/playlist_hlrow2.html next=templates/playlist_nextrow2.html offset=-2 length=10>

<#playlist_filename>

Should be used in a template for playlist. The tag is replaced with the filename of a song.

Parameter
none.

Example
<a href="?playsong=<#playlist_songid>" title="<#playlist_filename>"><#playlist_artist> - <#playlist_title></a>

<#playlist_artist>

Should be used in a template for playlist. The tag is replaced with the artist of a track.

Parameter
none.

Example
<a href="?playsong=<#playlist_songid>" title="<#playlist_filename>"><#playlist_artist> - <#playlist_title></a>

<#playlist_title>

Should be used in a template for playlist. The tag is replaced with the title of a track.

Parameter
none.

Example
<a href="?playsong=<#playlist_songid>" title="<#playlist_filename>"><#playlist_artist> - <#playlist_title></a>

<#playlist_songtitle>

Should be used in a template for playlist. The tag is replaced with "<#artist> - <#title>" of a track. If <#artist> is empty it is only repleaced with <#title>.

Parameter
none.

Example
<a href="?playsong=<#playlist_songid>" title="<#playlist_filename>"><#playlist_songtitle></a>

<#playlist_songid>

Should be used in a template for playlist. The tag is replaced with the ID of a track. This is used for hyperlink commands affecting the playlist. The ID is the CRC32 value of the filename combined with the current playlist index. Using IDs keeps the HTML code short but unreadable. ;-)

Parameter
none.

Example
<a href="?playsong=<#playlist_songid>" title="<#playlist_filename>"><#playlist_artist> - <#playlist_title></a>

<#playlist_index>

Should be used in a template for playlist. The tag is replaced with the index of a track in the current playlist. Creates numbers from 1...n.

Parameter
none.

Example
<td><#playlist_index></td>

<#playlist_songlengthmin>

Should be used in a template for playlist. The tag is replaced with the length of a track of the current playlist in minutes. Creates numbers from 1...n.

Parameter
none.

Example
<#playlist_songlengthmin>:<#playlist_songlengthsec>

<#playlist_songlengthsec>

Should be used in a template for playlist. The tag is replaced with the length of a track of the current playlist in seconds. Creates numbers from 01...nn.

Parameter
none.

Example
<#playlist_songlengthmin>:<#playlist_songlengthsec>

<#playlist_length>

The tag is replaced with the length of the whole playlist. Format: "h:mm:ss"

Parameter
none.

Example
total: <#playlist_length>

<#time>

Shows the time. The format depends on your local settings.

Parameter
none.

Example
server time: <#date> - <#time>

<#date>

Shows the date. The format depends on your local settings.

Parameter
none.

Example
server time: <#date> - <#time>

<#PlayerVersion>

show the player version number. Like "3.40".

Parameter
none.

Example
QCD version: <#PlayerVersion>

<#BrowseAmpVersion>

show the BrowseAmp version. Like "1.99 beta 2".

Parameter
none.

Example
BrowseAmp version: <#BrowseAmpVersion>

<#CurrentUser>

show the username or "user management disabled" if you don't use it.

Parameter
none.

Example
current user: <#CurrentUser>

<#RootDirectory>

show the root directory of the current user.

Parameter
none.

Example
MP3 Root Directory: <#RootDirectory>

<#Charset>

show the charset of the current user. Use that in your HEAD tag to set the correct charset or use it in a dropdown combo to let the user select a charset (see base skin).

Parameter
none.

Example
<meta http-equiv="Content-Type" content="text/html; charset=<#Charset>">

<#artist>

Insert the artist of the current song.

Parameter
none.

Example
now playing: <#artist> - <#title>

<#title>

Insert the title of the current song.

Parameter
none.

Example
now playing: <#artist> - <#title>

<#SongTitle>

Is replaced with <#artist> - <#title>. If <#artist> is empty it is replaced only with <#title>.

Parameter
none.

Example
now playing: <#SongTitle> (<#SongLengthMin>:<#SongLengthSec>)

<#SongLengthMin>

Insert the length of the current song in minutes. Format: "mm"

Parameter
none.

Example
now playing: <#SongTitle> (<#SongLengthMin>:<#SongLengthSec>)

<#SongLengthSec>

Insert the length of the current song in seconds. Format: "ss"

Parameter
none.

Example
now playing: <#SongTitle> (<#SongLengthMin>:<#SongLengthSec>)

<#SongPositionMin>

Insert the position of the current song in minutes. Format: "mm"

Parameter
none.

Example
position: <#SongPositionMin>:<#SongPositionSec>

<#SongPositionSec>

Insert the position of the current song in seconds. Format: "ss"

Parameter
none.

Example
position: <#SongPositionMin>:<#SongPositionSec>

<#SongRemainMin>

Insert the remaining time of the current song in minutes. Format: "mm"

Parameter
none.

Example
remaining: -<#SongRemainMin>:<#SongRemainSec>

<#SongRemainSec>

Insert the remaining time of the current song in seconds. Format: "ss"

Parameter
none.

Example
remaining: -<#SongRemainMin>:<#SongRemainSec>

<#Bitrate>

Insert the bitrate of the current song in kHz.

Parameter
none.

Example
<#Bitrate>kbps, <#Samplerate>kHz <#Channels on_mono="uhh... mono!">

<#Samplerate>

Insert the samplerate of the current song in kbps.

Parameter
none.

Example
<#Bitrate>kbps, <#Samplerate>kHz <#Channels on_mono="uhh... mono!">

<#Samplerate>

Insert the number of channels of the current song. Says "mono" or "stereo" by default.

Parameters
on_mono: String to insert if the current track is mono.

on_stereo: String to insert if the current track is stereo.

Example
<#Channels on_mono="uhh... mono!">

<#ShuffleState>
<#ShuffleStatus>

Can be "on" or "off" by default.

Parameters
on: String to insert if shuffling is on.

off: String to insert if shuffling is off.

Example
<#Channels on_mono="uhh... mono!">

<#RepeatState>
<#RepeatStatus>

Can be "off", "track" or "all" by default.

Parameters
off: String to insert if repeat is off.

track: String to insert if repeat is set to track.

all: String to insert if repeat is set to all.

Example
Shuffle <#ShuffleStatus>    Repeat <#RepeatStatus>

<#Volume>

Shows a number from 0...100 representing the current volume.

Parameters
none

Example
Volume: <#Volume>%

<#skinlist template=filename>

Create a list of all available web skins.

Parameters
template: required, Specifies a path/filename to use as template for a skin. The template is inserted for EVERY skin. You can use table rows <tr>...</tr> for example.

Example
<#SkinList template=templates/skin_template.html>

<#skin_name>

Should be used in the template for skinlist. The tag is replaced with a skin name.

Parameter
none.

Example
<a href="index.html?skin=<#skin_enc_name>"><#skin_name></a>

<#skin_enc_name>

Should be used in the template for skinlist. The tag is replaced with an url encoded skin name. That is needed for links.

Parameter
none.

Example
<a href="index.html?skin=<#skin_enc_name>"><#skin_name></a>

Hyperlink command are used to tell BrowseAmp what to do. These commands are added to the requested url or posted with a form.

The commands are separated from the html document by a question mark "?". Multiple parameters are separated by a "&".

Syntax
<a href="index.html?command1&command2=parameter&command3">do something</a>

where index.html can be every file you use.

Example 1
<a href="index.html?play"><img src="GFX/play.gif" width="24" height="24" border="0" alt="start playback">

Example 2
<a href="index.html?volume=0&stop">silence!</a>

A list of all available commands follows.

play

Start playback.

Parameters
none

Example
<a href="index.html?play">play</a>

stop

Stop playback.

Parameters
none

Example
<a href="index.html?stop">stop</a>

pause

pause playback.

Parameters
none

Example
<a href="index.html?pause">pause</a>

forward

move 5 seconds forward.

Parameters
none

Example
<a href="index.html?forward">ffw</a>

reverse

move 5 seconds reverse.

Parameters
none

Example
<a href="index.html?reverse">rev</a>

next

skips to next track.

Parameters
none

Example
<a href="index.html?next">next track</a>

prev

skips to previous track.

Parameters
none

Example
<a href="index.html?prev">previous track</a>

repeat

toggles repeat state. Can be off, track or all.

Parameters
none

Example
<a href="index.html?repeat">Repeat</a>

shuffle

toggles shuffle state. Can be on or off.

Parameters
none

Example
<a href="index.html?shuffle">shuffle</a>

clear

clear the current playlist.

Parameters
none

Example
<a href="index.html?clear">clear playlist </a>

home

Resets the current folder to the standard folder. Useful when you're lost...

Parameters
none

Example
<a href="index.html?home">home</a>

volume=#

Set the current volume.

Parameters
#: volume from 0...100

Example
<a href="index.html?volume=0">mute</a>

incvol=#

Increase the current volume.

Parameters
#: step from 0...100

Example
<a href="index.html?incvol=10">&nbsp;+&nbsp;</a>

decvol=#

Decrease the current volume.

Parameters
#: step from 0...100

Example
<a href="index.html?decvol=10">&nbsp;-&nbsp;</a>

charset=<string>

Set the current charset. A valid charset looks like iso-8859-1 for latin1. You can use a form with a dropdown box to select charset (see base skin, option.html)

Parameters
<string>: the charset you like

Example
<a href="index.html?charset=iso-8859-1">defaut charset </a>

search_playlist_string=<string>

The playlist is filtered with the string given in the parameter. Only track that match the searchstring are displayed in the playlist. Use this with an input field in a form. (see base skin, playlist.html)

Parameters
<string>: what you are searching for

Example
<form name="form1" method="get" action="" class="standard">search: <input name="search_playlist_string" type="text" id="search_playlist_string"> &nbsp; <input type="submit" name="button" value=" search "> </form>

search_files_string=<string>

Search your harddrive. Only files/directories that match the searchstring are displayed in the browser. (see base skin, browser.html)

Parameters
<string>: what you are searching for

Example
<form action="" method="get" name="searchform" target="_self" class="standard" id="searchform"> search: <input name="search_files_string" type="text" id="search_files_string" value=""> &nbsp; <input type="submit" name="button" value=" search "> <br> search for: <input name="search_for_directories" type="checkbox" id="search_for_directories" value="true" checked>
directories <input name="search_for_files" type="checkbox" id="search_for_files" value="true" checked> files <br> <input name="search_in_subdirs" type="checkbox" id="search_in_subdirs" value="true" checked> include subdirs
</form>

search_for_directories=true

This is an option for searching files. If set to true the search includes directories. (see base skin, browser.html)

Parameters
true: for including directories to the search. Anything else but true if not.

Example
<form action="" method="get" name="searchform" target="_self" class="standard" id="searchform"> search: <input name="search_files_string" type="text" id="search_files_string" value=""> &nbsp; <input type="submit" name="button" value=" search "> <br> search for: <input name="search_for_directories" type="checkbox" id="search_for_directories" value="true" checked>
directories <input name="search_for_files" type="checkbox" id="search_for_files" value="true" checked> files <br> <input name="search_in_subdirs" type="checkbox" id="search_in_subdirs" value="true" checked> include subdirs
</form>

search_for_files=true

This is an option for searching files. If set to true the search includes files. (see base skin, browser.html)

Parameters
true: for including files to the search. Anything else but true if not.

Example
<form action="" method="get" name="searchform" target="_self" class="standard" id="searchform"> search: <input name="search_files_string" type="text" id="search_files_string" value=""> &nbsp; <input type="submit" name="button" value=" search "> <br> search for: <input name="search_for_directories" type="checkbox" id="search_for_directories" value="true" checked>
directories <input name="search_for_files" type="checkbox" id="search_for_files" value="true" checked> files <br> <input name="search_in_subdirs" type="checkbox" id="search_in_subdirs" value="true" checked> include subdirs
</form>

search_in_subdirs=true

This is an option for searching files. If set to true the search includes all subdirectories of the current folder. (see base skin, browser.html)

Parameters
true: for including subdirectories to the search. Anything else but true if not.

Example
<form action="" method="get" name="searchform" target="_self" class="standard" id="searchform"> search: <input name="search_files_string" type="text" id="search_files_string" value=""> &nbsp; <input type="submit" name="button" value=" search "> <br> search for: <input name="search_for_directories" type="checkbox" id="search_for_directories" value="true" checked>
directories <input name="search_for_files" type="checkbox" id="search_for_files" value="true" checked> files <br> <input name="search_in_subdirs" type="checkbox" id="search_in_subdirs" value="true" checked> include subdirs
</form>

playsong=#
playtrack=#

Specify a track to play immeadiately. Use this command in a playlist row template.

Parameters
#: the SongID of a track

Example
<a href="?playtrack=<#playlist_songid>"><#playlist_artist> - <#playlist_title></a>

removesong=#
removetrack=#

Remove a track from the playlist. Use this command in a playlist row template.

Parameters
#: the SongID of a track

Example
<a href="?removesong=<#playlist_songid>">remove track</a>

drive=<string>

Change the current drive. Use this command in a browser drive row template.

Parameters
<string>: Use the browser_enc_drivename tag to specify a drive

Example
<a href="browser.html?drive=<#browser_enc_drivename>"> <#browser_drivename></a>

dir=<string>

Change the current directory. Use this command in a browser directories row template.

Parameters
<string>: Use the browser_enc_directoryname tag to specify a directory

Example
<a href="browser.html?dir=<#browser_enc_directoryname>"> <#browser_directoryname></a>

add=<string>

Adds a file or a directory to the playlist. Use this command in a browser files/directories row template.

Parameters
<string>: Use the browser_enc_directoryname tag to specify a directory or browser_enc_filename to specify a file.

Example
<a href="browser.html?add=<#browser_enc_directoryname>">add</a>

file=<string>

Adds a file to the playlist and starts playback of that file. Use this command in a browser files row template.

Parameters
<string>: Use the browser_enc_filename to specify a file.

Example
<a href="browser.html?file=<#browser_enc_filename>"> <#browser_filename></a>

skin=<string>

Select a web skin. Use this command in skin template.

Parameters
<string>: Use the skin_enc_name to specify a file.

Example
<a href="browser.html?file=<#browser_enc_filename>"> <#browser_filename></a>

coming soon...