Skip to main content

home entertainment part 4

the html page

The main page is pretty straightforward, just layout a page of your liking and use id's and classed to add functionality via javascript.

I used a jquery plugin to make the tabs, find it here.

startup

On loading the page nothing much happens.

on the server:
  • read the player addresses and ports from the ini file
  • read the radio stations from the ini file and construct the html

in the client
  • start a 10 sec timer to retrieve the 'now playing' info and remaining time (in case winamp is playing)
  • record the modification time for the playlist
player control

Catch the click events for play,pauze, stop, next, previous.

Play, next, prev call functions to retrieve the mp3 tags and the playlist. The controller returns the remaining time to display. A 1 sec timer is started to countdown this value. The remaining time is updated every 10 seconds.

Winamp is configured to play only 1 track. When time remaining is 0 the 1 sec timer is cleared.
Depending on the chosen mode (manual, autocue or autoplay) some action is invoked but only if there are tracks left in the playlist. The length of the playlist is in the 'name' attribute of the UL tag of the playlist. 

GET arguments for the player


p. playername

q

i index

s: stream

returns

x

1

playlistpos;title;mtime

x

2

timermaining;playlist dirty check

x

3

playlist

x

4

(play) time remaining

x

5

(fadeoutandstop)

x

6

(next)

x

7

mp3 tags

x

8

(prev)

x

9

(delete playlist)

x

10

playlistpos

(play playlist item) title

x

11

playlistpos

(delete playlist item)

x

station number

keeping track of the playlist

Everytime the playlist is updated via the webinterface I write an empty file. The modification time of this file is passed on every 10 seconds together with the 'now playing' info. On detecting a change the playlist is refreshed.

internet radio

This one is easy, clear the playlist, read the url from the ini file and  load the player. All of this is taken care for in the control script based on the station number requested by the ajx call.

playlist

Structure of the playlist

[path/to/musictracks]\[genre]\[filename]

Example:

K:\Audio\Soundtracks\Gabriel Yared-The English Patient-01 -The English Patient.mp3

Filename contains:  [artists]-[album]-[track]-[song]

Currently the playlist is about 1.5 meg, works like a charm.


composing the playlist

In the perl version of the enterteinment center I listed directory content by reading the file system. Now in perl this is pretty fast but in php this took far too long to be of any practical use. To solve this I made an index file of all the available tracks (in perl..). I could of coarse put everything in a database but I find this a bit overkill, beside the fact that I don't want to spent my time editing mp3 tags all the time.All my track filenames contain artist/album/track information.
Anyway, the playlist composer is in a separate control script so I can easily change that if I want.

Features
  • returns 'genre' list based on directory structure in the collection file
  • returns album list
  • returns album content of selected album

The client javascript can load a complete album based on the album name or an individual track based on the position in the file. The position in the file is in the id attribute of the LI element.

There are a couple of things that require attention.

  • UTF8 encode the titles on the server
  • Use encodeURIComponent to pass titles to the control script via ajax.
  • Use jquery 'live' to catch the click events


GET arguments for the collection control script


p: playername

q: querystring

t: type

l: load track

returns

genrelist

x

genre

0

album list

x

album name

1

album content

x

album load

3

x

search

4

search results

x

li attr id

load track

I am no code guru and it's not prefect but if it can help anyone, feel free.
winampremote.zip
part 1
part 2
part 3

Comments