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:
in the client
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
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
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.
GET arguments for the collection control script
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
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
Post a Comment