How To Create A Music Review Site

THE WIMPY PLAYERS -- Red Queen Tutorial 07

Adjust Text:  a a a a
« Red Queen User Manual   |   Tutorial Table Of Contents   |   Obtain Red Queen »


THE WIMPY PLAYERS

Selecting The Right Tool For The Job

When it comes to presenting audio and video files on your pages there are a number of options available to the general webmaster. But if that same webmaster wishes to serve files that are managed by a CMS system like Red Queen, then he/she is going to have a very difficult time of it unless a serving solution has already been programmed into the application. In order for that to happen, the author of the CMS system has to standardize on some "serving solution" and then add copious code for tight integration with that solution. For better, or for worse, the Red Queen author has selected the audio/video players from The Wimpy Player Site to do the job. Do not ask for alternate players. If you do not like the performance of Wimpy Players, please take your suggestions for improvement to the Wimpy creators themselves.

Streaming Vs Pseudo Streaming

When you use a Wimpy Player to stream your files--that is, allow visitors to your site to play the files directly on your web pages without first downloading them--you are are offering a pseudo streaming method. The visitor's browser is using the Flash technology that already exists on their PC (or another solution, such as QuickTime) to read buffered segments of a plain HTTP download stream and play those segments as they are received.

The alternative to pseudo streaming is true file streaming which is handled by an optimized file streaming server. These servers generally cost a lot of money and are not available to the average webmaster. Unless your site is likely to be serving more than a dozen audio or video files at a time, pseudo streaming will probably work well for you.

The Wimpy MP3 Player

The Wimpy MP3 Player has been around for a few years. Because it is skinnable, and because music is such a popular theme on the web, a good number of skins have been developed for it. While there are literally dozens of skins to choose from (go to the Wimpy Skins Homepage to see a selection offered by the Wimpy creators themselves) here are screenshots of just a small sample of skins to demonstrate the wide range of presentation options:


Sample Wimpy MP3 Skins
Cosa

  Hatah

Tube

 
Bop

 
Simple Bar

 
Titanium


When playing, these Flash-enhanced skins add flickering audio displays and other nice features that make the Wimpy MP3 Player so popular.

When Red Queen is installed on your site it comes with the demo version of the Wimpy MP3 Player which will only play the first 10 seconds of an audio track. Also included are demo versions of available skins. These skins are stored in a subdirectory of your Red Queen HTML root directory and feature the word DEMO prominently when played. Demo skins, and the demo Wimpy Players are for testing purposes only. Be sure to purchase a Wimpy license for any player you intend to use with Red Queen.

The skin path to the Wimpy skins directory will be something like:

/rs/other/wimpy/wimpy_mp3/skins

Thus the path to, say, the demo Cosa skin file would be:

/rs/other/wimpy/wimpy_mp3/skins/cosa/skin_cosa.xml

If you wish to replace one of these demo skins with the equivalent skin that comes with a PAID FOR Wimpy License you should make sure your replacement XML file has the same naming convention. If blah is the name of the skin style, the path to the skin will look like:

/rs/other/wimpy/wimpy_mp3/skins/blah/skin_blah.xml

In other words you can rename skin files. As long as they have the naming convention shown above, and can be found in the /wimpy_mp3/skins directory they will be available for use in Red Queen. Note that a Wimpy skin in Red Queen has its own directory, whereas skins that come with a Wimpy installation are all piled into the one directory in a big mess. It is up to you to add skins to the Red Queen Wimpy skins area (including any graphic that the skin may depend on, which should be placed in the skin directory in which the XML file appears).

The MP3 Player can also be controlled, to some extent, by javascript calls to the Jukebox. Because of this Red Queen can be configured to offer, in addition to the Jukebox, a tiled gallery of information associated with the playable audio tracks. The term gallery is used because the primary reason for adding this tiled format is to present cover art associated with each track (if it is available). In addition to cover art, which is presented in thumbnailed form, various other pieces of information relating to each audio track can appear in a tile. The following fields are supported, some of which are recognized by the Wimpy MP3 Player:


title the name of the track, such as "Golden Sun" (else the filename is used)
artist the name of the creator, such as "Mike Geison"
album the name of the album from which the track comes (if applicable)
duration the running time of the track in hours, minutes and seconds
description a short summary of the content
visual the URL to a graphic, such as an album cover


The only field required to run the Wimpy MP3 Player is the URL of the file. These other pieces of information are entirely optional. If the title field is not supplied, the name of the file will be used in its place. Depending on the kind of tracks you are collecting, some of the above fields may prove useful to collect as well. Instructions on how to add columns to contain this extra information have been presented in detail in the section on ADDING AUDIO FIELDS. If all such fields are available and the gallery format has been activated, a single track in the gallery might look something like this:


 
Hated
Artist Mike Geison
Album Gieson Greatest Hits
Duration 00:03:11
Description This is the first audio track in our list. It runs 3 minutes and 11 seconds and is named Hated, apparently written by Mike Geison.


Which skin you choose for your Wimpy MP3 Player will depend on how many tracks you allow per record in the Item, Member, or Supplier pages, and how much web page real estate you wish to devote to presenting the player. Ultra space-efficient skins, such as the Simple Bar skin might be all you need, particularly if your record contains at most a single MP3 file. If you wish to use a skin that displays the cover art of the currently playing track, try the Default skin, or the iTunes 7 Full skin.


Wimpy Button

The Wimpy MP3 BUTTON Player

If the idea of using the Wimpy MP3 Player to embed a jukebox into the page seems like overkill in those cases where you only have one or two audio files to present, you can always use the Wimpy MP3 Button Player. This will place a small button on the page for each playable track. The button only has 3 states: off, playing, and paused.

If you enable the Button Player in Red Queen, none of the other players will habor MP3 files. In particular, the Wimpy MP3 Player will be disabled. You have two choices here. Enable the tiled gallery format and the gallery presentation mode will appear the same as shown above, except that the click-to-play links will not be linked this time. Instead, a click-to-play button will appear for each track. If the tiled gallery format is NOT used, the buttons will appear in a table of basic download information for downloadable files. In other words the audio files will be treated as attachments which include a button for streaming the audio content directly.


default cover art

Default MP3 Cover Art

When using the Wimpy MP3 Player it is convenient to specify a cover art images to use when none is available for a specific audio track. In particular, this image is used to conceal faults in the Wimpy MP3 Player itself, as it does not flush cover art images after playing a track (so that the image remains in view when another track without cover art is loaded--replacing this image with the default cover art image leads to less confusion in such cases). If you need to use a different default cover art image, you can. Place the file in the image directory specified below, and supply the new file name as the wimpy_generic_audio_art_filename configuration variable.

Default cover art should be located in the following directory (relative to your Red Queen HTML root):

/other/wimpy/images

Wimpy AV Player

The Wimpy AV Player

As discussed in the section below entitled Conserving Bandwidth the author of Red Queen does NOT recommend using the Wimpy AV Player at the present time. It cannot be controlled via javascript, and ALL tracks/clips in the playlist are automatically download by the browser, meaning that it uses LOTS OF BANDWIDTH. The Wimpy WASP Player is preferrable for many reasons, not the least of which is that it is bandwidth friendly.

When you wish to display video files with Wimpy you have two choices. The first of these is the AV Player, which simply presents a list of video (or audio) files that, when one is clicked, is replaced by the video clip itself. When the clip has finished running, the list of available clips returns. The AV Player does not support skins, so if you do not like the look of it you are left with just one alternative...


Wimpy WASP Player

The Wimpy WASP Player

The second choice for displaying video files with Wimpy is to use the WASP Player. Like the AV Player, the WASP (Wimpy Av Single Play) Player does not support skins. However, it can be controlled by external javascript commands, so it is possible to dress up the presentation of the files by adding extra data, such as click-to-play cover art, a description of the clip and so on.

Pop Up Gallery Format
Because javascript can be used to control the WASP Player, Red Queen also supports the tiled gallery format which is available with the MP3 option. When the gallery format is activated, the click-to-play links pop up the WASP Player above the page and play the video clip (or audio track). The appearance of the information tiles in the gallery format is the same as that found in the MP3 gallery format displayed above.


 
Hated
Duration 00:03:11
Description This is the first audio track in our list. It runs 3 minutes and 11 seconds and is named Hated, apparently written by Mike Geison.
Alone
Duration 00:02:35
Description This is the second audio track in our list. It runs 2 minutes and 35 seconds and has no graphic associated with it.
 
Quick Draw McGraw
Duration 00:00:20
Description This video clip opens at a baseball game, wherein guy A tells guy B that the essential elements are peanuts, soda, and a straw. For some strange reason we have green hills displayed as the cover art for the piece...
Rippen
Duration 00:00:10
Description Second video clip. Crazy guy pulls some unsuspecting victim from his car and makes off in it, all set to nifty music. No graphic.
   


If the pop up gallery format is NOT activated, there are a few other ways the WASP Player can be handled. You can have a scrollable list of mini tiles which contains links that either pop up the WASP Player OR load and play files in an already embedded WASP Player. Finally, if you won't have more than one playable file on the page, you can do away with the list altogether and go with a simple embedded player. These options are discussed separately below.

Scrollable Mini Tiles
If you have added two or more audio/video columns to your Item, Member, or Supplier table, and these are to be handled with the WASP Player, you can elect to place a scrollable window of mini tiles on the page containing the video/audio information plus click-to-play links. The WASP Player can either be configured to pop up in response to a click OR it can be configured to appear next to the scrollable window (the embedded option). The list of tiles itself, or window, is restricted in vertical extent to the height of the player and if multiple clips (or tracks) are available for playing, these can be found inside the window by scrolling down. Because of this, the embedded (or pop up) scrollable mini tile format is more space efficient than the pop up gallery format when the number of tracks is large. Because this list format is more compact, tiny thumbnails of the cover art are used inside the window rather than regular thumbnails.

Shown below is what the scrollable list might look like for 4 items, some with, and some without cover art. In this case the WASP Player would pop up in response to clicking either the title of the video clip or audio track, or clicking the tiny thumbnail. In the embedded case, the WASP Player would also be present on the page (to the left of the list) and would load and play tracks only in response to clicks in the scrollable window:


  Tracks -- click to play  
Hated
Duration 00:03:11
Description This is the first audio track in our list. It runs 3 minutes and 11 seconds and is named Hated, apparently written by Mike Geison.
Alone
Duration 00:02:35
Description This is the second audio track in our list. It runs 2 minutes and 35 seconds and has no graphic associated with it.
Quick Draw McGraw
Duration 00:00:20
Description This video clip opens at a baseball game, wherein guy A tells guy B that the essential elements are peanuts, soda, and a straw. For some strange reason we have green hills displayed as the cover art for the piece...
Rippen
Duration 00:00:10
Description Second video clip. Crazy guy pulls some unsuspecting victim from his car and makes off in it, all set to nifty music. No graphic.


Embedded Single Format
As a special case, when you have added only a single audio/video column which needs to be handled by the WASP Player, you can elect to do away with the scrollable window and simply embed the Player into the page. For this reason the method is referred to as the Embedded Single Format. Depending on which table is involved, you will need to toggle one of the following 3 configuration variables, which can either take the value Multiple (the default) or Single:

wimpy_wasp_embedded_single_enabled_item
wimpy_wasp_embedded_single_enabled_member
wimpy_wasp_embedded_single_enabled_supplier

Setting the value of one of these variables to Single will cause Red Queen to ignore all but the first av column it finds when dealing with the WASP Player. It will embed the Player into the page. If you want the file to immediately start loading, regardless of whether the user will elect to play the file, see this configuration variable in the section entitled "GENERAL Wimpy WASP Player Settings" on the Configure > Wimpy control panel:

wimpy_wasp_embedded_single_noload

Set this value to No if you want the Player to automatic begin downloading (but not playing) the file. Alternately, if you want to save bandwidth, set the value to Yes and a link will appear below the Player asking the user to "Click Here To Load Player". The file will not be downloaded until that link has been activated. This saves you bandwidth, and makes your pages appear much more snappy. If you have found yourself on a web page that immediately begins downloading 5 large videos that you have not requested to see you will quickly appreciate the value of this "noload" option, and so will your visitors.

One last thing worth a mention here, for the Embedded Single Format case, is the handling of cover art. The default video cover art image will be loaded into the window UNLESS a separate cover art image has been uploaded to accompany the audio/video column. In that case the uploaded image has precedence. In either case the cover art image will be scaled down to fit the window dimensions if it exceeds them. The artwork will not be scaled up if it is smaller than the window dimensions. The artwork will also remain in the window while the audio/video file is playing, so you should select cover art material of such a size that it will always be covered by the video area. Or at the very least, the remaining visible portion of the cover art image should be monochromatic so as not to distract from the video area.

Summary
The best way to see all the options available to you for displaying the files to visitors is simply to create a few video file columns, populate them, and start playing with the Wimpy configuration variables in Red Queen. This process is discussed in a little more detail below.

If you wish to edit the appearance of the POP UP window that contains the Wimpy WASP player you can do so by editing any of the PHP files at these locations (controlling the appearance of the POP UP in the Item, Member, or Supplier branch respectively):

/rs/redqueen/skins/default/php/wimpy_wasp_popup_item.php
/rs/redqueen/skins/default/php/wimpy_wasp_popup_member.php
/rs/redqueen/skins/default/php/wimpy_wasp_popup_supplier.php

Setting Player Background Colors

One thing you may notice when you present the Wimpy MP3 Player on your pages is, depending on the skin involved, it may appear entirely transparent in places and appear to merge into the background. If this is the case you will want to set a background color. The Wimpy MP3 Player will use a toned down version of whatever color it is that you select. To set this background color, visit the Configure > Skin Style / Colors page and look for this color variable:

style_wimpy_mp3_background_color

The other 3 Wimpy Players also accept a background color specification. The Wimpy Button Player accepts a background color for the square area surrounding the circular button (though one might as well not specify a color so as to make the background transparent. This variable is:

style_wimpy_button_background_color

The same story holds true for the AV Player. It accepts a background color, but you are probably better off NOT specifying a color so as to leave the background transparent:

style_wimpy_av_background_color

Finally, there is the background color for the WASP Player. In this case, the actual color of the Player has been rendered transparent in the Red Queen implementation, and the background color is used to color the table cell which contains the player. In addition, two extra variables are used to color the border of this table, and the text that lies on top of the WASP background color in the case that a scrollable window is used to present tracks in the playlist:

style_wimpy_wasp_background_color
style_wimpy_wasp_border_color
style_wimpy_wasp_header_text_color

If no colors are explicitly set for the WASP Player, the standard background and text colors are assumed.

Replacing The Wimpy Demo Players

When you install Red Queen on your site you also install, by default, the demo versions of the Wimpy MP3, AV, and WASP Players. These are provided for testing purposes, and allow you to see how Wimpy can be used on your site to add audio and video content to your Red Queen pages. The demo versions will only play the first 10 seconds of an audio track or video clip and MUST be replaced by licensed versions of the Players if you intend to use them indefinitely. See The Wimpy Player Site for licensing details.

After you have installed Red Queen, go to the Configure > Paths / URLs page in the administrative area and look for the section that involves specifying Wimpy paths. For each of the 3 Wimpy Players that you intend to test, be sure to supply the path to the demo player relative to your document root.

Actually, Red Queen will supply the paths to these demo players for you. All you need to do is save the configuration variables on that page to ensure that the paths are saved to the configuration file. When you do that, Red Queen copies those demo executable files into a special area it has set aside for storing Wimpy executables. Later, when you have copies of the PAID FOR versions of the Wimpy Players on your site, you can replace the Red Queen paths to the demo players with those of the PAID FOR executables. When you do this, Red Queen will copy the new Wimpy executables into the Red Queen area, replacing the local copies of the demo versions. From that point forward your audio tracks and video clips will play for the full duration.

Configuring The Wimpy Players In Red Queen

Because there are 3 primary branches in Red Queen, corresponding to the Item, Member, and Supplier tables, and because there are 3 Wimpy Players that can be integrated into Red Queen, there are are large number of configuration variables involved in setting up Wimpy for use with Red Queen.

If you have saved the paths of the Wimpy Players you may proceed to activate them. Go to the Configure > Wimpy Players page. Although there may appear to be a relatively large number of configuration variables on the page, many of these are the same variables cloned for the 3 different Red Queen branches--i.e. the Item. Member, and Supplier branches. This means that, to a large degree, you can independently configure the Wimpy Players in each of these branches, and that once you have understood how to configure one branch you can quickly replicate the process for the other branches.

At the top of the configuration page you will see options for configuring the 3 Wimpy Players in the Item branch. Then come the equivalent options for configuration in the Supplier branch. Finally, the Member branch options for the 3 Wimpy Players. Lots of repetition here, so it isn't as complex as it looks at first glance. Most of the variables here merely affect how video and audio information is presented on the page. For example, whether or not pop ups are used, or tiled galleries are employed, and so on. These variables do not affect how the Wimpy Players themselves function.

After that come the more generic options to configure the 3 Wimpy Players. These values affect the players equally the same, regardless of whether a player is used in the Item, Member, or Supplier branches. Most of these options are ones that are fed directly into the player executables, and are mentioned on the official Wimpy site itself--so if you are at all familiar with Wimpy these options should be fairly transparent.

Conserving Bandwidth

When you use one of the Wimpy Players to embed audio or video files into your Red Queen pages you need to consider whether or not you want these files to be automatically downloaded behind the scenes so that they become immediately available for playing by the visitor. Of course, the visitor might only be interested in reading reviews, in which case that bandwidth would be wasted. If you want to avoid bandwidth penalties (i.e. large hosting bills) pay attention to the following solutions to the problem, discussed on a per player basis:

Wimpy MP3 Player
If you wish to conserve bandwidth when using the Wimpy MP3 Player, activate the gallery format (so that click-to-play links are presented) and switch on the following configuration variable:

wimpy_mp3_load_player_as_needed => Yes

This will cause the MP3 Player to load with an EMPTY playlist. Tracks can then be loaded, as needed, by the user.

Wimpy MP3 BUTTON Player
The Button Player also has a "do not automatically download file" option in Red Queen which you may wish to use to conserve bandwidth, particularly if you have a large number of files to present on the page, or they are large files. See the following configuration variable:

wimpy_button_load_player_as_needed => Yes

This will cause the buttons to be ABSENT when the page is loaded. Each button (and its track) can then be loaded, as needed, by the user with a javascripted link.

Wimpy AV Player
The Wimpy AV Player is problematic in this regard. It cannot presently be loaded by remote javascript calls. That means ALL audio tracks and video clips present in its playlist are automatically downloaded by the browser behind the scenes. This is NOT GOOD, and for this reason alone you should probably steer clear of using the Wimpy AV Player. Use the Wimpy WASP Player instead.

Wimpy WASP Player
Except for the special case where the Embedded Single Format is selected and you have elected to download the file automatically without the user's consent, the Wimpy WASP Player does not automatically load the content of a playlist. Instead, single video clips (or audio tracks) are loaded on demand in response to a user action. Bandwidth is therefore not wasted on visitors who have only come to read the page. So, to be explicit about it, when you have selected the Embedded Single Format and want to conserve bandwidth, you should set:

wimpy_wasp_embedded_single_noload => Yes

Wimpy Has Bugs!

Unfortunately, all software has bugs, and the Wimpy Players are no exception to the rule. If you discover a problem with your Wimpy Player, other than (or including) the known ones listed here, take your grievances to the creator of the software at The Wimpy Player Site. Wimpy Players are written in Flash, and the Red Queen author has no influence whatsoever in how they work.

Here are some of the bugs I discovered with the Wimpy Players while integrating them into Red Queen. Hopefully these will be fixed by the time you read this. If not, referring to this list will help you figure out what might be happening.

  1. The Wimply MP3 Player "download songs" link does not activate the Save File dialog box. The solution would be for the player to (instead of providing a simple link to the file) serve the file and issue this HTTP header: Content-Disposition: attachment; file="blah.mp3"

  2. When a cover art image is loaded into the MP3 Player, it is not flushed either at the end of the played track OR when a new track is loaded that does not have cover art. Because of this, Red Queen loads a default cover art image into the XML Playlist for every track that does not have cover art. This stops the wrong piece of art from being displayed for tracks that have no art associated with them.

  3. When cover art is loaded into the MP3 or WASP Player it is not shifted down by the control height when the controls are happen to be placed on the top (as opposed to the default bottom positioning). This leads to invisible controls (the cover art obscures them) and a strip at the bottom of the player which displays the cover art of the previous track.

  4. When testing Wimpy with IE the players often died with a Flash.ocx error message. It is not known whether this is due to a bug in Wimpy or the version of IE used during testing. No such problems occurred with Firefox.

Summary

The integration of the Wimpy Players into Red Queen offers you a relatively painless way to embed audio and video files into your web pages on a large scale. No direct management of these files is required since you may elect to allow members to your site to upload and manage the audio and video files themselves. The chief disadvantage to using Wimpy for audio file presentation is that presently only MP3 files can be served. However, this is not such a great impediment as MP3 audio technology is used widely.

Video storage on the other hand is restricted to SWF and FLV formats, so you may need to direct your site members to pages that explain how to convert existing video clips in other formats. The advantage to using SWF and FLV video formats is that once the files are on your system they can be viewed by nearly everyone. No special video viewing application is required for the visitor to view the files.

Next Section: CUSTOMIZING TEMPLATES

« Table of Contents


Copyright © 2004 Random Mouse Software. All Rights Reserved.