{RT} RollingTurtle » All About UMCo

writing | music | design | personal

UMCo: The Universal Media Controller

Current version: 1.01 (Change log)

Developed by RollingTurtle with much appreciated financial support and technical guidance from the fine folks at skyBuilders.com.

See UMCo in action at bopnews.com (click the "BOP Radio" image in the left column) and blogaudio.org (click the "A Media Controller" link in the left navigation pane)!

Contents:

What is UMCo?

UMCo is a skinnable browser plug-in controller that allows web designers (and hobbyists!) to present users with a consistent interface for the control of media content, regardless of which plug-in a particular browser uses to play the content. The best way to get a sense of what UMCo is is to see it in action. (If it doesn't look all that fancy to you, you're probably using an unsupported browser.)

UMCo really shines in situations where multiple plug-ins are able to play the media type you are posting. The most typical example is an MP3 file, which can be played by the Quicktime, Windows Media Player, or RealPlayer plug-ins (to name the major contenders). Any one of these plug-ins may be the default MP3 player on a given browser, depending on the order in which the plug-ins were installed.

As a designer presenting an MP3 file, you don't want to proscribe which plug-in visitors to your site must use, since they will all play MP3 files equally well. But you would like to provide them with an attractive, responsive interface that is consistent with the design of the rest of your site. For instance, why must you be stuck with RealPlayer's lime green control panel if there's no lime green in the rest of your site? You'd also like to suppress any ads or extraneous content that the media plug-in might display if it opens in the usual way.

The good news is, the three major media players now all support javascript control of their internal functions. This clears the way for a truly universal XHTML/CSS based media controller that takes advantage of the "under the hood" capabilities of media plug-ins, while leaving the details of the interface where they should be -- with the designer!

What types of media are supported?
Currently, in version 1.0, UMCo only supports audio files that can be played by one of the supported browser plug-ins (see next question). There are plans, however, to make it more truly "universal" by incorporating video functionality in an upcoming version. If this feature is important to you, and you'd like it to get done sooner, please e-mail me at mcohen[AT-SIGN]rollingturtle.com. The more demand there is, the faster it will get done!
What browsers, operating systems, and plug-ins are supported?

For the time being, UMCo functions optimally only in an MS Windows environment with IE6 or Mozilla (and related browsers like Netscape 6 & 7). This does not in any way reflect a preference on the part of the developer for MS environments. Rather, it is a reflection of the reality (as I understand it) that javascript control of media plug-ins is only available on Windows platforms at this time.

It appears that there was a brief window of time when it was possible to script plug-ins in Mozilla for the Mac, but that functionality is broken in versions after 1.2. Rather than encourage people to use old browsers, I have decided to forego Mac support at this time. However, it is my belief that as time progresses and the OS X browsers and plug-ins mature, plug-in scripting on the Mac will again be possible, and I intend to fully support it at that time.

The plug-ins currently supported are Quicktime, Windows Media Player, and RealPlayer.

What happens if someone with an "unsupported" browser tries to use UMCo?
Good news! UMCo will, at the very least, produce a usable player for any browser that supports the <embed> tag and has a plug-in installed that will play the type of media file you are sending. (In other words, any browser that's capable of embedding audio files in the usual way.) This is because it is designed to "fail gracefully" when it encounters a browser that does not support javascript control of plug-ins. Failing gracefully in this case means allowing the plug-in to display its own proprietary controls, as it would have if you were not using UMCo in the first place. It's not necessarily pretty, but it does mean that UMCo is guaranteed to present the content in a usable way even in older or non-compatible browsers.
How do I use UMCo to play media files from my site?

It's easy for anyone with just a basic knowledge of HTML! There's nothing to install, and no need to copy anything to your web server. UMCo can be activated from your web page with a (relatively) simple line of javascript.

The very easiest way to set up an UMCo link is to use the automatic UMCo link generator below. If you'd like to get a better understanding of how to write your own link, though, here's how:

First, create an HTML tag on your page that you'd like to act as a link to your media file. It can be an image, an HTML button, or even a regular hyperlink. Then, set that element's "onclick" property as follows:

onclick="window.open('http://www.rollingturtle.com/design/umco/umco.php?file=http://www.mysite.com/mymusic/mysong.mp3&title=My%20Song', 'umco', 'resizable, status', true); return false;"

So, for example, a complete hyperlink would look like this:

<a href="#" onclick="window.open('http://www.rollingturtle.com/design/umco/umco.php?file=http://www.mysite.com/mymusic/mysong.mp3&title=My%20Song', 'umco', 'resizable, status', true); return false;">Hear my song!</a>

If you're not used to working with javascript this can look a little daunting, but there are really only two pieces you'll have to change after you cut and paste. One is where it says file=. Subsitute the actual URI (address) of your file for the sample one given. Make sure you give the full address, including the http:// at the beginning. Then just substitute the title of your song where it says title=. You can also put any other information you want in the "title," such as the performer or composer of the song. For instance, it's perfectly fine to put title=Super%20Cool%20Song,%20by%20coolDude. Note that since the title is being passed in a URI, it's a good idea to substitute %20 for any spaces in your title. The automatic link generator will do this for you.

Doesn't letting anyone link to UMCo like that put a lot of load on your server?

Not yet, because UMCo is new and so far only a few people are using it. If you are the webmaster of a large site that gets many hits and you'd like to use UMCo, please do the right thing and copy the controller to your server (it's open source) so you don't fry mine. However, if you're a small personal site, I'm happy to provide UMCo for free, because it's good advertising for RollingTurtle.

If, in the future, the load on the server becomes too high, I reserve the right to remove the free, linkable version. There will be advance notice of this in the form of an announcement in UMCo's status line, so you'll have time to migrate to another solution. Of course, the code will always be open source, so if the free version is taken down, you can always simply install UMCo on your server.

Can I customize UMCo's look to match my site?

Absolutely! That's one of it's biggest strengths. All you need is a basic knowledge of CSS.

To apply your own CSS file to the controller, use the automatic UMCo link generator, or add this parameter by hand to your window.open() call.

&skin=http://www.mysite.com/skins/myUMCoSkin.css

The easiest way to create a skin is to base it on an existing one, like the default skin or the Rolling Turtle skin. Both of these skins include comments that will help you decide what rules to edit for your skin.

Be sure to test your skins before letting them loose in the world. I've done my best to ensure that vital parts of the layout can't be broken by a bad style sheet (for instance, for the most part font changes in your skin will be ignored because changing the fonts can break the layout, particularly the title bar). However, there's no way to block problems like that completely, so confirm for yourself that everything looks ok before using your skin "in the wild."

Here are URIs for all the publicly available skins I'm aware of:

NameAuthorURI
DefaultMachttp://www.rollingturtle.com/design/umco/skins/defaultskin.css
Rolling TurtleMachttp://www.rollingturtle.com/design/umco/skins/rtskin.css

If you come up with a skin you'd like to make publicly available, let me know (mcohen[AT-SIGN]rollingturtle.com) and I'll add it to the list for everyone to enjoy.

Can I customize the graphics in the control buttons?

Yes, you can do that too, but the method is slightly different than regular skinning. You need to create a folder on your web server to hold your custom graphics. The folder should contain the following 7 files: pause.gif, play.gif, scanback.gif, scanbackend.gif, scanfwd.gif, scanfwdend.gif and stop.gif. You must use these exact filenames. Then, use the automatic UMCo link generator or add an imgpath parameter to your window.open() call, like this:

&imgpath=http://www.mysite.com/myUMCoImages/

UMCo will then use your graphics instead of the default ones. They will automatically be centered inside the buttons, so you don't need to leave any blank space around the edges.

You're welcome to use the standard button graphics as a starting point for your own. Just right click on them to save them.

pause.gif play.gif scanback.gif scanbackend.gif scanfwd.gif scanfwdend.gif stop.gif

As with skins, if you come up with a button image set that you'd like to share, e-mail me and I'll be happy to post it here.

How is UMCo implemented?
With a devastating combination of PHP and javascript.
Is UMCo open source?
You bet it is! The code for UMCo is made available under the GPL, meaning that you are welcome to use and modify it as long as you don't try to sell it and don't try to pass it off as your own original work. It's even broken up into convenient bits if you only need part of it.
  • umcosource.htm (Source file for main controller page, umco.php)
  • browserdetect.inc (php OS & browser detection)
  • um.js (Contains the actual routines that control the media plug-ins. For instance, umPlay() is a single function that will cause the targeted media plug-in to play, regardless of whether it is Quicktime, WMP, or RealPlayer)
  • portabledrag.js (cross-browser drag-and-drop methods that power UMCo's slider)
How do I report a bug or suggest a feature?
Please e-mail me at mcohen[AT-SIGN]rollingturtle.com and I'll see what I can do! If you're reporting a bug, please remember to include a complete description of your OS, browser, and any plug-ins you have installed. That will help me immensely, and result in a quicker resolution of your problem.

Want to use UMCo on your site but don't want to bother with hand-coding your own link? No problem! Let this handy generator create your button, hyperlink, or image link for you. If you do not wish to use any fields, simply leave them blank. Only the media file field is required.

I want to create a: Hyperlink Button Image

Link text:

URI of media file: http://
Required

Title of media file:
Spaces are ok. The link generator will convert them to %20 for you.

URI of skin file: http://

Custom button image path: http://

Test it: [waiting for input...]

Note that if you are creating an image link and you used a relative path for your image source, you won't be able to see the image in this test link. However, as long as you've specified the correct relative path from the page you intend to paste this code into, it should work fine on your page.

This page last modified 12/16/2003.
This site is copyright © 2003 by Michael A. Cohen except where otherwise noted. All rights reserved.