Second Stanza

February 19, 2008

SharePoint Flash Audio Player Custom Web Part

Filed under: SharePoint — Tags: , — dfbaskin @ 10:31 pm

I needed to include lecture audio in a SharePoint (v3) site that I manage, using Flash as the audio player. At this point, SharePoint doesn’t include any native support for Flash files, but does allow you to create your own custom controls. Fortunately, the Developer’s Guide To Windows SharePoint Services 3.0 gives a good overview of creating a custom control (see Chapter 10, Custom Web Parts).

First, I used the MP3 to SWF Convertor (from hootech.com) to create the Flash audio player.  This utility creates two files, one containing the audio itself and another containing the player component. Both of the files should be put into a documents collection within SharePoint. (I realized later that the player component will be the same for each conversion, if the same settings are used, so you really only need one copy of the player, even though the conversion program creates a new copy for each MP3 file converted. So I end up duplicating the player for each audio file, even thought I really only needed a single player.)

Next, I installed the custom SharePoint component and created a list that contained a field built on my custom web part, which references the Flash files in my documents collection.

When editing the list item, the web part generates HTML code that allows you to enter the four pieces of information about the audio, the SharePoint URL of the Flash player component, the duration of the audio, and the width and height of the player control:

 Web part in edit mode.

When the item is viewed, then the web part generates the necessary HTML for displaying the Flash audio player:

Web part in Play mode.

The web part removes the “.player” portion of the URL to get the URL of the audio file.

This web part is a fairly crude solution since it is tied to the output of the MP3/Flash convertor and requires the user to enter the dimensions and duration of the audio, but it works nicely for my needs.

Download / View Source Code
(View requires Microsoft Silverlight 1.0 and Internet Explorer)

Blog at WordPress.com.