I was working with a client recently and they use a lot of audio files, like when they record customer service calls for quality assurance.  When things go great, they wanted to highlight these cases of awesome customer support in audio clips in blog posts. 

They found the default SharePoint audio player less than appealing and wanted something better.  In today’s post I’ll show you something maybe you didn’t know about your web browser, and how to use it to make this experience better. 

What Isn’t So Great

When you click Insert –> Video or Audio –> From SharePoint, then choose an audio file on a SharePoint page, this is what you get:

I know what you’re thinking, bleh.  It uses the same video player for an audio file, and leaves this blank thumbnail image.  Sure you could specify a thumbnail image, but sometimes you don’t.  Let’s make this better.

A Better Way

First, there are web parts out there that could potentially help like this one from Amrein.  It looks a little dated but it could work, and not bad for $75.  The problem however is that you can’t add web parts to blog posts in SharePoint.  But you CAN insert code snippets. 

Whether you knew it or not, all the major web browsers from the time they added HTML5 support have a minimized audio player baked in, and is rendered when you insert an HTML5 <audio> tag. In IE11 for example this is what would render:

 
You can use mp3, wav and ogg, (varies slightly by browser version) supported by these minimum browser versions per w3schools:

There’s actually a really good thorough write-up over at html5 doctor.  Each browser renders it a little differently, but they are all a nice little minimized audio player. 

So go to your SharePoint page, and insert a script editor or insert “embed code”.  Paste the following embed code:

<audio src="/sites/sandbox/Assets/Allegro%20from%20Duet%20in%20C%20Major.mp3" preload="auto" controls="controls" unselectable="on"></audio>

If you can’t remember this code, go here and answer a few questions and have the code spit out for you. 

Update the selected portion to paste either a full or relative path to the audio file.  You can review the various options for tag at the links above.  You can specify alternative players, or text if the player won’t render at all. 

If you’re using SharePoint 2010, you would use a content editor web part.

There are other players out there, and with a little bit of code you totally extend this to be way more powerful and customizable, or have a audio/video player in one block of code.  Give it a try!