Semellion’s DIY Media Centre HOWTO

I wrote a bunch of scripts to give me a working media centre in my Zaby. Several people have expressed an interest in doing something similar - so I have put this HOWTO document together. I have tried to explain it as carefully as I can, but I am afraid that Utherverse don't exactly make this sort of thing very easy - so it is a little bit involved. If there is anything that doesn't make sense please post questions and I will do my best to clarify!

Using this media centre you can play music in a zaby from a variety of sources (playlists, radio stations etc.), you can control it from inside the Zaby (change channels or turn it off) and everyone in the Zaby will hear the same thing. If one person goes to the control panel and changes channel then everyone will here that change. Since this is a bit involved, I am planning to post it in three instalments. Part 1 tells you how to install the media centre in your Zaby exactly as I have it set up in mine. Part 2 will tell you how to customise it (use different channels and modify the appearance). Finally, part 3 explains how it works, for those interested or in case anyone wants to develop it further.

Part 1 – Installation

Requirements

* A zaby (duh!)
* The scripts, that are in a zip file attached to this post
* Suitable playlists or radio stations (in this first part we will just use mine)
* An external host to mount the scripts on. There are many suitable services, both paid for and free. I use AwardSpace (www.awardspace.com) - their free plan is quite adequate for this purpose. However, whichever hosting service you use it must support PHP (most do).

Step by step instructions

1. Download the zip file attached below (media-player.zip), and decompress it. In it you will find the following files:
mcontrol.html - the media centre controller
mplayer.html – the media centre player
streams.js – a list of media streams (don’t modify this yet)
media.html and media2.html – stream control files
(don’t modify these ever, the scripts will write stuff to them)

Also there is a directory called images that is full of graphics. These are needed for the user interface.

2. Copy all of these to your host server – keeping the directory structure intact. The html and js files all need to be in the same directory, and the graphics need to be in a subdirectory called images. If you are using the free service on Awardspace, then you will have to load up the files one at a time. You have better facilities if you pay them money, but I am poor!

3. Make sure that the files are world – readable, and test them outside of RLC by displaying mcontrol.html and mplayer.html in simultaneously in two web browser windows. Initially you should see something like this – since the media player is turned off.



4. If you press the “Party” button then the player should start playing my party playlist. Hooray – you have it working!



5. Now you need to hook it up to the Zaby. Make sure that the web browser you used to test the player is closed – if you try to play it inside RLC and on your computer at the same time things are likely to get fouled up!

6. In your Zaby create a “Dummy Model”, and attach the “Attach Web Browser” script with the following parameters:

URL – the URL of your controller
Offset X – 0
Offset Y – 0
Offset Z – 0
Scale – 0.5
Width – 400
Height – 360
Update – on

7. Make sure this dummy model is visible and place it wherever you want the controller to appear (I put it on top of a TV screen).

8. Create another dummy model, again attach the “Attach Web Browser” script and set the URL parameter to the URL of your player. Make sure the Update parameter is set to on but don’t worry about the others. Make this model invisible, but remember where you put it – in case you want to find it again!

That’s it – you should now have a working media centre. To change channels you need to get quite close to it, press the button and then press the Enter key. Sorry about that, but it is due to the way the Utherverse in-world web browser handles user interaction.



In the next instalment of this HOWTO I will explain how you can modify this to suit your own tastes, rather than mine.

WOW Semellion, this is a big one to share,,i am gonna try it out when I have lots of time and a patience....If I get it going I am going to give you some rays
Many people would be charging for this. Awesome...TY TY TY

you made it sound simple Semellion, I think I could even do it

thanks so much for sharing :D

thank you i will give it a try it looks great

Thank you Semellion you have really clarified this for me now as i was trying and was getting lost in that area of the media center.

I'm with you Sweet, I think I can actually do this. Woot!

Thanks so much

TYVM. Semellion. You are very gracious.

I got my awardspace account set up, and will work on this project in the up coming days.

Part 2 – Customisation
There are two separate issues here – using your own media streams, and customising the user interface (such as changing the buttons). Both of these are fairly straightforward, though, but they raise quite distinct issues – so I shall deal with them separately. You can have six stations and an off switch without having to make any significant changes to the code. If you want more stations than this, then you should probably read Part 3 of this HOWTO, and be prepared to hack the JavaScript!

Using your own media streams

1. Finding suitable streams
Before you do anything else, you need to find suitable streams. The easiest thing to do is to use a playlist site – www.playlist.com is by far the best know, but there are others. You can also use many Internet radio stations. The important thing is that you need to be able to set up the stream so that it plays automatically on a single web page. Most sources that are designed to work with social network sites such as Myspace will do this, but subscription services that require you to log in will not. If you need to find Internet radio stations, then Google is your friend! There are many of them, but do be warned that a lot of them require you to log in.

2. Preparing code for playlists
Create as many playlists as you like, and then use the playlist site to generate the HTML code. If you are using www.playlist.com, then you need to follow the “Get Playlist Code” link on your home page, then select option E (“Get the code for any other social network, blog or your own personal website”). After choosing your playlist you will be given several options. The most important one is that autostart must be set to YES – otherwise it won’t work! You can also tell it whether or not you want a random shuffle here. Then press the “Get Code” button and save the code somewhere (e.g. cut and paste it into Windows Notepad).

3. Preparing code for radio stations
I am afraid I can’t give you step by step instructions here, because it varies depending upon the radio station. Some of them encourage you to use their radio station in any way you see fit – and provide instructions as to how to do this. Others, discourage or ban it and try to make this sort of thing as hard as possible. If you are interested in a station then read through their instructions. If they tell you how to embed the station into Myspace or a blog, then something similar should work here. However, it must be possible for the player to be set to autostart. If it doesn’t autostart, then it won’t work with the media centre.

4. Create web pages for the channelsOn your host, create a new web page for each channel. This should be a very simple HTML file that looks like this:


Just insert the name of the channel into the h1 tag (this is only used for testing – it doesn’t have any affect inside your zaby) and replace the <<< insert playlist or radio channel code here >>> line with the playlist code you have generated. Test these files – see if they will play in a web browser. Don’t go on to the next step until you hear your streams.

You should also have an “off” file so you can turn the thing off! You can use mine, or set up your own – it should just be empty, something like this:



5. Modify the stream.js file
You now need to put your new streams into the stream.js file. You need to be very careful with this – a single misplaced comma could stop the whole thing working! I strongly suggest that you make a backup copy of the working file before you start messing with it.

The first part of this file specifies the URLs of your media streams. In the version that you have there may be some extra lines starting with //. These are ignored by the system and can be deleted (I changed the host that I was using, which is why they are there). It should look like this.



Simply change the URLs to point to the URLs you created in step 4 (keeping the first one in the list the “Off” channel). Make sure that the URLs are inside a single inverted comma – as shown above, and make sure that there is a comma at the end of each URL line except for the last one.

Once you have done that, give your new stations titles by modifying the next part of the streams.js file. In my version it looks like this:



Again, make sure that each title is surrounded by single inverted commas, and has a comma at the end of the line. You can put any text in here you like – but since it is displayed in the zaby on the controller I suggest you keep it short. NB the first title in the list is just a single space – this is the “Off” channel, so it has no title!

You can ignore the rest of the streams.js file – I’m not doing much with that information at the moment (leave it there, though, otherwise things will go horribly wrong).

That’s it. You should now be able to change channels to your own streams now.

Customising the buttons

This section is continued below.

Part 2 Customisation (cont.)

Customising the Buttons

1. Make your buttons
In order to change the appearance of the buttons, you need to create button graphics with the name of your channels on them. If you know how to use Photoshop – or some other graphics software (such as the GIMP), then you can do this by hand. Alternatively there are, as is often the case, free web sites that will do this for you. Either way you need to produce two different versions of each button – in it’s normal “up” state and it’s “pressed down” or “mouse over” state. If you are going to do it yourself, then I have included two blank buttons in the images directory of the zip file I distributed. These are called “blank1_up.png” and “blank1_over.png” – you can use these as templates if you want to put your own text on my red buttons.

If you want someone else to do all of the hard work, then I can recommend the web site http://www.buttongenerator.com/ - that is what I used to create my buttons. Select the “Web Button Generator” and choose a button style that you like. There are many – some are free and some only available to subscribers. Once you have found a suitable style, then you fill out the form to give it the text and choose fonts, colours and such like. You will have to use the “Advanced” form so that it generates both up and down states.

2. Upload the buttons
Upload your button graphics into the image directory on your host, and make sure that they can be displayed on the web. It doesn’t matter what they are called – just make sure you know what the file names are!

3. Modify the controller buttons
You now need to modify the controller (mcontrol.html). Be extremely careful with this – there are scripts in this file that are not forgiving to mistakes (misplacing a single comma could stop the entire thing working). Therefore, make lots of backups! Only ever work on a copy of the original file, and each time you get a new version working make a new copy of that!

What you need to do is substitute the file name of your new button for my old one. This needs to be done at different points within the file. I shall explain how to do this by an example. Suppose you want to replace my “Wazee” button (the files are called wazee_up.png and wazee_over.png) with your much nicer button that is called good_time_up.png and good_time_over.png.

Find the first bit of script that refers to these images – this is starting 49 lines down the file and looks like this:


Change this to point to the new files, as follows:



For the sake of simplicity, I suggest that you don’t change the name of the image itself – just the graphics fine (for example leave the first wazee_normal_image alone – it will have no affect upon the appearance of your media player).

Then you need to change the file name in the HTML – this is at line 106 and it originally looks like this:


You need to change the file name (remember, not the image name) to look like this:



(NB in the HTML only the “up” image is reference, not the “over” one).

Test this, and repeat the process for each button that you want to replace.

4. Modify the layout and look of the controller

If you know how to edit HTML, you should be able to change the look of your controller. For example, if you want to change it’s colour to something other than black you would need to change the <body bgcolor=0 > tag (e.g. to <body bgcolor=”green”>. Remember, each time you make a change test it and make sure that it has done what you intend. If you want to change the image at the top of the controller then modify or replace the “media-centre.png” graphic. Just remember that if you change the size of this, then you will probably need to change the size settings in the script in your zaby to match.

That's it. You should now have a working and moderately customisable media player. If you want to make more substantial changes (e.g. different numbers of buttons, or maybe even supporting video) then you will need to understand how it works. I will deal with that in Part 3 of this HOWTO.

Part 3 – How this stuff works

OK – this is the last part of my HOWTO. This is very much optional and is intended for hardcore techies. I am writing it because it has become obvious to me that there are some quite serious techies on here! You don’t need to understand the details of how the media player works to install it and make minor modifications. However, if you want to make more substantial modification then this could help you a lot.

I shall be assuming that you know a bit about dynamic HTML and understand the basics of JavaScript and PHP. It is very important that you appreciate the key difference between the two. JavaScript is client-side technology – the scripts in a web page are executed once when that page is loaded. They only exist within the scope of the web page, so they cannot do things like access the server file system. PHP is server-side technology – the scripts are extracted from the web page by the server and executed before the page is loaded. They have full access to the server file system, and they can modify the web page that is about to be served. They can do very little as far as user interaction is concerned, though, because they are executed before the page is served. Because PHP and JavaScript have different capabilities they are both needed for this. Because PHP is executed before the page is served and JavaScript after making the two communicate is quite complex and needs a number of tricks.

1. Media Player
This is purely JavaScript – there is no PHP. The URL of the media to be played, together with other information is stored in arrays in the streams.js file. This URL is then loaded into an <iframe> - dependent upon the last number in the media.html file. For example if the media.html contains the following:



then the URL in streamList[2] will be loaded (which is party.html in the script I supplied). The refresh command in the meta tag of the media.html file causes this page (i.e. media.html) to be reloaded every 5 seconds. This means that if the number changes, then the media player will load a different page. This is what actually changes the channel It also means that it isn’t instant – when you change the channel it will take beween 0 and 5 seconds to have an affect. This is a compromise between making the thing reasonably responsive but not adding too much extra network traffic.

The contents of the media.html file are loaded into an invisible <iframe> called myIframe. This is simply used as a container for the data to make it accessible to the script. The loadMedia() function writes the correct URL into a visible <iframe> that is attached to the myID div tag (this sort of technique is quite standard AJAX programming).

2. Media Controller
The companion program to the media player is the controller. This provides a user interface, and updates the contents of the media.html file. Since the player is polling this every 5 seconds, when this happens the channel will change.

Much of the code in the mcontrol.html file is to do with the user interface. The JavaScript at the top of the <body> tag, the changeMedia function and the events are all quite standard DHTML rollover techniques. The behaviour of this is a bit peculiar inside the zaby, because of the way the Utherverse web browser works – hence the instructions in the user interface (i.e. select a button then press enter).

When the page is loaded the contents of media2.html are loaded into an <iframe>. This is a very similar to the technique described for the player, and it is used to display the correct title read from the playTitles array in the streams.js file. Here, though, there is no <meta> tag, because this <iframe> doesn’t need to be refreshed. Rather there is a <meta> tag in the header of mcontrol.html which causes the entire controller to be refreshed every five seconds. This means that the displayed title is updated after a channel change.

When the user presses one of the buttons, the changeMedia function is executed, the id argument containing the number of the button pressed. This function writes that number into a temporary cookie (it is set to expire after 20 seconds) and triggers a page reload. When the page is reloaded, the PHP script at the bottom of the mcontrol.html file is executed on the server. This reads the contents of the cookie, and rewrites the media.html and media2.html files containing that number. These files are only written if the cookie exists – so because the cookie has a 20 second timeout, most of the routine page refreshes won’t trigger this.

3. Known Bugs and Issues
There is one known bug, in that occasionally the whole thing stops working. This doesn’t happen very often – and is fixed if everyone leaves the zaby and then comes back in. I am fairly sure that this is due to the cookie handling. I will fix it sometime. when I have the time, an post a new bug-fixed version of the code here. At the moment, though it happens very rarely so it isn’t a serious problem (Utherverse booting you is far more likely to happen!).

There are issues of synchronisation. I aim for everyone to be able to hear the exact thing at the same time. This is important to me – so you can talk about tracks, or I have even sung along by typing the lyrics! With radio stations, the synchronisation is generally accurate to less than a second – which is pretty good. With Playlists, everyone in the zaby will hear the playlist starting when the channel is changed to within about five seconds – which is just about acceptable. There are two problems, though. If you have your playlist set to a random shuffle, then everyone will hear a different random sequence – because this is done at the client end. This is avoided by simply not using the random shuffle. However, even with a fixed sequence, there is a problem in that anyone who enters the zaby after the channel has been changed will hear the playlist starting again at the beginning. These are a pain, and the only solution that I can think of would involve setting up my own streams – which is either a lot of work or costs money. I think it is a fundamental limitation, although if anyone has any clever ideas – let me know!

4. Ideas for modifications
If you want to modify this, then you could do many things. By changing the sizes of the arrays, it would be easy to have more (or less) buttons and channels, and you could play around with the controller user interface to your heart's content. I originally intended the playlists to actually be displayed in the zaby (that is what the extra information in streams.js is for). That would be quite easy to implement in the player (which would obviously then have to be visible in the zaby). In principle this exact same technique should work for video streams. This is something I haven’t tried – mostly because I can’t imagine wanting to watch TV in a zaby! If you do make any improvements to this code, please share them by posting new versions in the forum. If you do this, then just make sure that you rename the files and give them version numbers to avoid confusion!

OK - I shall try to help, but I'm not quite sure what you are doing here - you need to provide more information. Which is the media file can't you open - do you mean the media.html from my zip file? Where is it? Are you failing to open it on your local hard disk or have you uploaded it to a host - if you have, which host are you using? What is this OP of which you speak? Also, what does ASHX have to do with this? - that is a completely different technology.

Sorry that wasn't a lot of help, but I need lots more details if I am going to be able to help you. Tell me exactly what you have done and where it has gone wrong and I will see if I can see what the problem is.

add this post to the sticky

bravo, well done OP

Oh dear - that sounds bad, although I haven't noticed this myself. There is no clicking noise on either of the two systems that I have tested it on. I don't *think* that it could have anything to do with the refresh - that only effects the channels changing, it shouldn't have any effect upon the actual stream. However, I might be wrong and it is an easy thing to test. Change the <meta HTTP-EQUIV='refresh' CONTENT='5'> to something like <meta HTTP-EQUIV='refresh' CONTENT='30'>. That will reduce the refresh from once per 5 seconds to once per 30 seconds. It will make channel changes very sluggish, but if it also reduces the clicks to once every 30 seconds then you can be fairly certain that the refresh is indeed causing the clicking. I can't test this because I don't have any clicking. But, if you would like to try it out and post your results here, then I will give it some thought.



Again, I hadn't noticed this but I can see that it could be a problem. It should be easy enough to put in a dummy button to hold the focus if this is a problem. I will probably release a new version at some stage soon, with some minor tweaks, and will try to do something about this then.