Guest blog by NaT: Audio File Support in a SharePoint Document Library

Add an audio file into a SharePoint document library and try to open it. You will get the following message if you are using IE 8 (or previous version of IE):

If you upload audio files to a regular document library, SharePoint will send back the file request as MIME Type of “text/html” (maybe text/plain) instead of “audio/wav” (or similar audio type). For that reason, IE is not smart enough to detect that the content is in fact an audio file and that it should launch the appropriate application, perhaps Windows Media player (Google Chrome can actually detect it and play the audio file in-browser).

The solutions I can think of are the following:

Solution-1: Change your document library view to “Explorer View”, and it will basically detect any file type in your document library as if they were on your local machine. Keep in mind that it is actually running system commands and that doing this might be unsafe.

Solution-2: Create an HttpModule to intercept requests to the SharePoint Web application, detect if an audio file has been requested, then respond back with a MIME type “audio/wav” instead of “text/html”, and let the browser detect the audio file and open it with the appropriate Windows application.

Solution-3: Create a custom Field Type that uses a form-rendering control that figures out the URL of the audio and embeds a Windows Media Player to play the audio when an item is in “View Properties” mode. Then, make use of your new custom field type in your SharePoint document library.

Solution-4: Dynamically add “Play” Edit Control Block for audio items so that, when clicked, it navigates to a SharePoint application page that plays the audio in-browser via Windows Media Player.

Solution-1 is a slick and quick way of solving the problem, but only if users are willing to run system commands, of course. Solution-2 is theoretically feasible. Effects are at the Web application level, which makes it interesting, and worth looking at, as you can apply the same concept to other non-supported files in SharePoint Document libraries. Solution-3 sounds possible too. In fact I first started out on this road, then realized it would need more effort and time than I had anticipated (time-permitting, I might give it a shot sometime, at least to explore the intrinsic involved in custom field types, RenderPattern elements and form-rendering controls). But if you like the idea of having a “Play” ECB specifically added for audio files and which lets you play audio files from your browser without opening other apps on your machine, then solution-4 is what you are looking for.

Below you will find sample code. Sample code!!!! In other words, you will need to clean it up to suit your own scenario.

But anyway, what follows are the different components of solution-4:

Audio Library: A SharePoint document library containing audio files (ex: files with extension .wav)

Audio-Check Service: a SharePoint application Page used as a simple Web service that can determine whether an item in SharePoint is an audio file or not. All it does is receive a SharePoint item URL and uses the Object Model to determine the extension of the file, then responds back a Boolean value in an XML format.

Content Editor Web Part: added on the same page as the List View Web Part of the audio library. It will contain JavaScript codes that use SharePoint JavaScript Context object and XHR object to make Ajax calls to Audio-Check Service which determine whether or not a document is an audio file and, depending on the result, decides whether to put the “Play” edit control block for only audio files.

Audio Player Page: a SharePoint application page that receives an audio file URL and plays audio on a page using an embedded Windows Media Player.

Audio-Check Service

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Web;
using Microsoft.SharePoint.WebControls;
using Microsoft.SharePoint;
namespace NaT.SharePoint.EditControlBlockAudioSupport.WebControls
{
    public class AudioCheckService : LayoutsPageBase
    {
        protected WindowsMediaPlayer _mediaPlayer;
        protected override void OnLoad(EventArgs e)
        {
            base.OnLoad(e);

            string itemId = this.Request.QueryString["ItemID"];
            string listId = this.Request.QueryString["ListID"];
            string audioCheck = this.Request.QueryString["AudioCheck"];

            
            if(audioCheck != null)
            {
                SPList list = this.Web.Lists[new Guid(listId.Trim())];
                SPListItem item = list.GetItemById(Int32.Parse(itemId.Trim()));
                bool displayEditControlBlock = this.IsItemAnAudioFile(item);
                this.ResponseDecision(displayEditControlBlock);
            }
        }

        public bool IsItemAnAudioFile(SPListItem item)
        {
            return item.File != null && item.File.Name.EndsWith(".wav");
        }

        public void ResponseDecision(bool decision)
        {
            this.Response.ClearHeaders();
            this.Response.ClearContent();
            this.Response.Cache.SetCacheability(HttpCacheability.NoCache);
            this.Response.AddHeader("Content-type", "text/xml");
            this.Response.Write(@"<?xml version=""1.0"" encoding=""UTF-8"" ?>");
            const string cmdPattern = @"<Command>{0}</Command>";
            this.Response.Write(string.Format(cmdPattern, decision.ToString().ToLower()));
            this.Response.End();
        }
    }
   
}

For playing back audio, you can use <OBJECT /> HTML Tag for embedding Windows Media Player in your browser, which lets you pass a URL as a parameter and streams it back for you.

<OBJECT
  id="{0}"
  CLASSID="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95"
  type="application/x-oleobject" height="500px" width="500px">
  <PARAM NAME="URL" VALUE="" />
  <PARAM NAME="SendPlayStateChangeEvents" VALUE="True" />
  <PARAM NAME="AutoStart" VALUE="true" />
  <PARAM NAME="AnimationAtStart" VALUE="true" />
  <PARAM NAME="ShowControls" VALUE="true" />
  <PARAM NAME="ShowAudioControls" VALUE="true" />
  <PARAM NAME="ShowTracker" VALUE="true" />
  <PARAM NAME="EnableTracker" VALUE="true" />
  <PARAM NAME="ShowStatusBar" VALUE="true" />
  <PARAM NAME="ShowDisplay" VALUE="true" />
  <PARAM NAME="AudioStream" VALUE="true" />
  <PARAM NAME="ShowPositionControls" VALUE="true" />
  <PARAM NAME="EnableFullScreenControls" VALUE="true" />
  <PARAM name="uiMode" value="none" />
   <PARAM name="PlayCount" value="1" />
   <PARAM name="FileName" value="{1}" />
</OBJECT>

Create a Web Control that uses the <OBJECT /> Tag. I would prefer putting the Object Tag format in a different embedded file and have that loaded in your Window Media Player Web Control:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace NaT.SharePoint.EditControlBlockAudioSupport.WebControls
{
   
    public class WindowsMediaPlayer : WebControl, INamingContainer
    {
        public string FileName{ get; set;}
        protected override void Render(HtmlTextWriter writer)
        {
            base.Render(writer);
            var template = this.GetResourceFileAsString("NaT.SharePoint.EditControlBlockAudioSupport.Properties.MediaPlayerObject.xml");
            var outputMarkup = string.Format(template, "MediaPlayer_" + Guid.NewGuid().ToString(), FileName);
            writer.Write(outputMarkup);
        }
        private static string GetResourceFileAsString(string fileName)
        {
            var assembly = Assembly.GetExecutingAssembly();
            var stream = assembly.GetManifestResourceStream(fileName);
            if (stream != null)
            {
                var streamReader = new StreamReader(stream);
                var myText = streamReader.ReadToEnd();
                if (myText != null) return myText;
            }
            return string.Empty;
        }
    }
}

Then, basically use the above WindowsMediaPlayer Web Control in your Media Player SharePoint application page.

Content Editor Web Part – JavaScript

<script language="javascript">
function IsAudioFile(m, ctx, itemId)
{
   var request;
   var url = ctx.HttpRoot +
    "/_layouts/NaT.SharePoint.EditControlBlockHandler/AudioCheckService.aspx?ListID=" +
    ctx.listName + "&ItemID=" + itemId+ "&AudioCheck=true";
  
   if ( window.XMLHttpRequest )
   {
      request = new XMLHttpRequest();
      request.open("GET", url, false);
      request.send(null);
   }
   else if ( window.ActiveXObject )
   {
      request = new ActiveXObject("Microsoft.XMLHTTP");
      if ( request )
      {
         request.open("GET", url, false);
         request.send();
      }
   }
   if ( request )
   {  
      var commands = request.responseXML.getElementsByTagName("Command");
      var cmdName = commands[0].firstChild.nodeValue;
      if(cmdName == "true") return true;
      else return false;
   }
}


function Custom_AddDocLibMenuItems(m, ctx)
{
    if(IsAudioFile(m,ctx, currentItemID) == false) return false;
    strAction="window.navigate(ctx.HttpRoot+
    '/_layouts/NaT.SharePoint.EditControlBlockHandler/AudioCheckService.aspx?ItemFileUrl='+
    ctx.HttpRoot+currentItemFileUrl)";

    CAMOpt(m,"Play",strAction,"");
    CAMSep(m);

    return false;
}


</script> 

Your final outcome should be something like this:

Play ECB

And, after clicking “Play”, you will be navigated to the media player application page.

Happy coding,

NaT