easyGen Embed Media Tool

This tutorial will help you quickly get to grips with using the new Embed Media tool for easyGen. The tool, as the name suggests, allows you to embed media into your easyGen project. You can embed the four main media players, Flash, Real Media, Windows Media and QuickTime. Most of these media players allow you to play more than one type of file, for example, Windows Media player can play MP3's, WAV's, AVI's, AIF's, etc. In this tutorial we will show you how to use the media player in a simple music store to allow the user to hear a sample of the track they are about to purchase and add a simple Flash splash page.

To have a look at our on-line DJ record store click here, or if you would prefer to download the project please visit the easyGen Project Exchange.

We will not concentrate here on how we made the store but on how we embedded the media files, but a quick overview of the project is probably required so you know where we're getting the data from. The store is a simple two page site (three if you include the splash screen). The first page is linked to a table in the database that stores all the records that are available and URL's to the images of the record sleeves. The second page is accessed from the first when the user clicks on a record sleeve, this is actually a form with an image button and it passes the id of the record clicked to the second page. The second page is linked to a table in the database that contains all the tracks of all the records. These tracks are grouped by the id of the record from the first page, so we know if we retrieve all the entries in this table with the id of the record clicked on the first page we will be retrieving all the tracks that are on that record. The tracks table also stores the URL of the MP3 file that will play a sample of the track to the user, and this is the bit we are interested in in this tutorial.

To start we need to pull the track list from the database and the URL's to the MP3 files. This is done as always in easyGen by using the 'Load Records Wizard'.

Here we have retrieved the side of the record the track is on which allows us to group them together by ordering the results, the trackname so the user knows what the track is they are about to play and the most important, mp3, which contains the URL to the MP3 sample file. If you are replicating the example, you will want to set a WHERE query to retrieve only those records whose releaseid is equal to the one passed from the first page, however in this example we will skip this as it does not directly relate to using the Embed Media tool.

Having completed the load records we can return to our page, knowing that when the page is accessed a list of all the tracknames and mp3 files will be pulled into this page. Now what we need to do is display them to the user and provide a way for them to play the sample. We can force easyGen to display a list by using the Repeater tool , add this to the page and link it to the load records action just created.

This will add an area to the screen into which we can add a single list entry. This single list entry will then be repeated for each item in the list allowing us to display each track of the associated record or whatever you are listing. In the example we added a single table row to the repeater box with three columns, the first displayed the side, the second the trackname and in the third we added the Embed Media tool.

The Embed Media tool allows you to pull information from any of the easyGen look-up areas, and this includes loaded records, so it is very easy for us to allow a sample of each tune to be played. We will use the Windows Media player to base this example on, but for a real web application it is often best to add a second option incase the user does not have the required media player installed. The reason we choose Windows Media player is that we know you will all have it installed as it ships with Windows and Windows is a requirement of running the easyGen development environment.

To add the MP3 sample to the page, add the Embed Media tool to the page .

The tool is incredibly simple to use, simply select the type of media file to play, the location of the media file and then set any available options.

Here we have selected that we want to embed a Windows Media player and load the contents of the tracks mp3 field from the database into it. The tracks mp3 field contains the URL of the MP3 file to be played, so when the page is run through a browser, this will be replaced by the actual URL of the file hence loading the file into the media player. We have also set the size of the player to 75 x 28, this is just big enough to display the play and stop buttons, but you can obviously make this any size, maybe to include the position bar so users can quickly skip forwards through the sample. We have also told the player not to start automatically or loop the playback. This way we make sure all the samples don't start playing as soon as they have loaded creating a dreadful noise but wait to be activated by the user and they finish when the end of the sample is reach so the user doesn't think its a really repetitive long tune (no jokes about Dance music here please!). We have left the controls visible otherwise the user would have no way of starting or stopping the tune.

This added our track listing page looks something like this: -

You will notice that the Embedded Media player currently looks nothing like the Windows Media player, this is because it is simply a place holder. It is merely a means for you to identify where it will be when the page is viewed by a user. The embedded media can be moved but it cannot be changed in any other way. If you need to make a change to the Embedded Media, you will need to remove the existing one and add another.

And that is all there is to working with the media player. If you now export your project and ensure you have some tracks stored in the database and MP3 files stored at the location identified in the mp3 fields you will be able to view a list of tracks and listen to a sample of each.

However, what happens if you want to insert a media file that is stored on your HD and is not referenced in the database, for example a splash screen, well that is just as easy with the Embed Media tool, click here to find out how.