Sunday, September 09, 2007

Schneider's Eleven - New skin for Windows Media Player

Over the past week, I've created a new skin (theme) for Windows Media Player. I call it "Schneider's Eleven" -- more on that below.

For a while now, I've wanted a skin for Windows Media Player that meets the following two criteria:

  1. Unobtrusive. I wanted something that I could leave visible in a corner of the screen all the time which wouldn't draw my eye with scrolling text or other graphical animations while I'm concentrating on other tasks.
  2. Informative. Many "minimal" skins do not display the album, artist, and track name of the currently playing track, or alternate between displaying those values; I wanted a skin where all of those values would be visible at a glance.

None of the default skins included with Windows Media Player meet these criteria, nor does the main Windows Media Player 11 interface in its "compact mode". I'd poked around on several occasions for such a skin, but I couldn't find one on Microsoft's official skins site or elsewhere.

I did a little reading about Windows Media Player skins, and found that WMP skin files -- files with a .wmz extension located in the Program Files\Windows Media Player\Skins folder -- are actually just renamed .zip files. This means that it is possible to inspect the implementation of any existing skin by uncompressing and looking at the files in the skin's archive.

I had previously assumed that skin files were created using some difficult-to-learn proprietary language, but as I found by looking at existing skins on my system, I found that the layout and behavior of WMP skins are defined in standard XML and Javascript code. Once I discovered that, I set out to create my own skin that would have the design and behavior that I wanted.

I was able to implement the new skin by learning by example from the skins already on my system. Between inspection of the source code of the Microsoft skin "9SeriesDefault" (internally named "Corona") and a skin I had previously downloaded in my earlier search for a suitable skin named Basic6, I was able to write 95% of the implementation for my new skin; the remainder I was able to get from Microsoft's skinning reference at MSDN.

The UI layout of the new skin was inspired by the TrackInfo pane of the Basic 6 skin, written by Richard Kohut, which featured display of all of the information I wanted (album, artist, track name), plus display of the album art for the album, a cool touch. For the play controls of the UI, I created a reduced-size version of the standard Windows Media Player 11 interface -- thus the name for the new skin, "Schneider's Eleven".

Schneider's Eleven UI

To my surprise, the technique for displaying the album art in the skin doesn't appear to be documented anywhere in the MSDN online documentation -- or anywhere else on the WWW that I could find! The key is setting the background image property of a subview element in the skin to the constant string value "WMPImage_AlbumArtSmall". At the time of this writing there is only a single result returned in a Google search for WMPImage_AlbumArtSmall (and that result is a long discussion thread in Japanese which I can't read)! As I mentioned, I find this really surprising -- is there another way to put album art into a skin; or else maybe the technique for putting album art in a WMP skin is still little-known, or maybe there just isn't a lot of discussion of WMP skinning out there? I'm not sure at this point. In any event, if you are a skinner looking to put album art into your skin, by all means download a copy of Schneider's Eleven and take a look at the source to see how I did it.

Doing the same search in Google News currently returns 4 results, one of which is a post to microsoft.public.windowsmedia.player.skins by "Stevie BM" describing a technique to work around an issue with album art not being sized properly when displayed in a skin, which I took advantage of in my skin. Thanks Stevie! It's always very cool when someone, having found a solution to a tricky problem, takes the time to follow up and let the community know about the solution, rather than just silently implementing the solution without letting anyone else know about it.

If you'd like to download a copy of the Schneider's Eleven skin, follow that link to my web site for the download link. Feedback on the skin would be welcome!

15 comments:

  1. Love it... I searched Google for "Windows Media Skin Album Art" and found *just* what I was looking for. Nice and small, all the essentials, without fancy garbage I don't need. The only thing I didn't like was the UoM pic in the example above... ;-) Go Green!

    JC

    ReplyDelete
  2. just what i was looking for

    ReplyDelete
  3. EXACTLY what I wanted, but having trouble on my new company laptop w/ WMP10.... I'll get to work - this is too important!!

    ReplyDelete
  4. everything work fine, but the AlbumArt does not update automatically. I tried a javascript function for player, like PlayState_onchange="refresh()",where I refresh all of my javascript values. If my AlbumArt is displayed, it seems that the whole theme crash down, and leave on the screen a white background that dissapear while i'm moving my theme across the desktop. When I delete the AlbumArt subview, there is no problem anymore. So... how do update the album art anyway, without getting my theme crashed?

    ReplyDelete
  5. Anonymous, to clarify, is the problem you are experiencing with the Schneider's Eleven skin, or are you trying to write your own skin?

    ReplyDelete
  6. Thanks, was looking for a skin with same criteria. Having album art is such a great piece to have.

    ReplyDelete
  7. OK, i finally got it, so I have to tell you this. First i have to thanks you, because without your post, i wouldn't have made it.
    Yes, I tried to make my own skin, and this was the tricky part:
    to update the album art I made a jscript function to reload the image source file. For not getting the blank screen, the main VIEW must have a background image clipped. Now it works. Thanks again

    ReplyDelete
  8. Thanks. Best/simplest skin i could find for media player. I really wanted one that just showed only the album art and nothing else, since i don't really need all the buttons/menus.. but the choice for media player skins is awful at best it seems. only reason i am using it at the moment instead of winamp is because i like how it updates it's library automatically. Anyways thanks again for this

    ReplyDelete
  9. Cool its initiative to create a compact skin for WMP.
    I have version 12 and does not have a skin cool that way.

    I would if I could translate their skin for the Portuguese of Brazil? found it very beautiful, and to give an extra touch, wanted exchange the window border to be equal windows 8, logical keeping your credits of skin.

    Hugs

    ReplyDelete
  10. Ricardo, yes, you may go ahead!

    Let me know how it turns out. Let me know also if you need help.

    ReplyDelete
    Replies
    1. Hello, I came to bring the good results of translation in portuguese and styling of the window 8.

      Lack little to complete, just make adjustments from the translation of buttons and translate the readme.

      Follow the link of progress:
      http://rpc2014.deviantart.com/journal/Traducao-da-skin-Schneiders-Eleven-431146741

      There is no problem if I make available for download?

      I hope you enjoy. Hugs.

      Delete
    2. Ricardo,

      It looks good! Sure, go ahead and make your version available for download!

      -Jon

      Delete
    3. Hello, the skin is ready and available for download.

      Thanks for allowing editing and translation and by his humility.

      Follow the link to download: http://fav.me/d75mogh

      Last question. Can I throw this same version in English?

      Delete
  11. This comment has been removed by the author.

    ReplyDelete
  12. Ok, thanks for the support.

    Once you have finalized on, I will post on DeviantArt.

    http://rpc2014.deviantart.com/

    See you soon.

    ReplyDelete

Hi spammers! No need to waste your time here; comments are heavily moderated, so if you like, you can save us both a little time and just move on to the next site. :-)

For everyone else: Thanks for visiting! Your comments are more than welcome!