Audio and Your Website

I love all things audio. I’m also a musician who enjoys performing, recording, and producing music, so surfing the web in my free time often involves going to my favorite music and recording websites. These websites use a variety of audio players, so I thought I would share a few that are easy to integrate with any Content Management System (CMS).

I find that a lot of our clients shy away from using audio on their website unless they are an agency that produces radio commercials. However, audio can be an extremely effective method for reaching your intended audience. Multi-tasking is a part of everyday life, and audio gives you an opportunity to offer your expertise to that potential client while they’re away from your website. They may not have time to watch your webinar but they can listen to the audio while doing something else. Any opportunity to present your expertise is going to increase your chances of bringing that potential client back to your site and closing that lead.

So what types of audio content should you share on your site? I would recommend offering the audio from conference presentations, interviews, and even webinars and videos (if the audio can effectively convey your message without the visuals). If you’re presenting at a conference or are scheduled for a radio interview, contact the organizer beforehand about getting a soundboard recording. The quality of the audio will be much higher.

This post focuses on methods for presenting audio on your website. For more info on podcasting, check out Jason Adams’ Introduction to Podcasting Part 1 and Part 2 blog posts.  

Yahoo Media Player

Yahoo’s Media Player offers a nice solution if you don’t want the audio player taking up space on your page. You can easily place the audio file in the text and the player opens at the bottom of the page (see example below). It also works on iOS devices by opening the audio in the Quicktime Player.

Audio Example

To use the Yahoo Media Player, enter the code below into the HTML editor of your CMS.  The 2nd line of code only needs to be entered once, even if you are featuring several audio files on that page.  “/location/audio track title.mp3” represents the URL path of the audio file you have uploaded through your CMS.  If you are using Newfangled’s CMS, upload the audio file in the Attachments tab.  Once the file has been uploaded and saved, go back to the Attachments tab, right click the file name, and select “Copy the Link Address.”  You can then paste that link into the HTML editor in place of /location/audio track title.mp3 in the code example below.    

<a href=”/location/audio track title.mp3“>Audio Example</a>

<script type=”text/javascript” src=”http://mediaplayer.yahoo.com/js”></script>

SoundCloud

SoundCloud is like YouTube or Vimeo for audio. You simply create a profile and upload your audio. Users can even create tracks by recording audio directly into SoundCloud. However, I would recommend against this method if you’re planning on using your computer’s microphone. Like YouTube, SoundCloud offers sharing, tagging, categorizing, commenting (scroll over the small Newfangled icons below the waveform in the example below), and more. You can even customize the player you use for each track by clicking on the “Edit Your Widget” button next to the embed code under “Share.” The default player uses HTML5 which means it works on iOS devices but you also have the option to use the Flash version. A free account offers 120 upload minutes, the waveform widget (see below), and secret link sharing. If you need additional features or advanced privacy settings, you’ll want to look into one of their paid account options. To add the player to your site, click on the Share button of the track you want to feature on your website, copy the provided embed code, and paste the code directly into the HTML editor of your CMS.

Google Reader Player

The Google Reader Player is another solution.  The player is easy to use and doesn’t take up much space. This particular player is a Flash player so it will not work on iOS devices but I can imagine that the player will be HTML5 compatible in the near future.  

To use the Google Reader Player, insert the code below in your HTML editor of your CMS. 

<object style=”margin: 10px 0px 10px 0px;” width=”400″ height=”27″ classid=”clsid:d27cdb6e-ae6d-​11cf-96b8-444553540000″ codebase=”http://download.​macromedia.com/pub/shockwave/​cabs/flash/swflash.cab#​version=6,0,40,0″>

<param name=”flashvars” value=”audioUrl=/location/audio track title.mp3 />

<param name=”src” value=”http://www.google.com/​reader/ui/3523697345-audio-​player.swf” />

<embed style=”margin: 10px 0px 10px 0px;” width=”400″ height=”27″ type=”application/x-shockwave-​flash” src=”http://www.google.com/​reader/ui/3523697345-audio-​player.swf” flashvars=”audioUrl=/location/audio track title.mp3​” />

</object>

Just like the Yahoo Media Player, the two instances of “/location/audio track title.mp3″ in this code example represent the URL path for your uploaded audio.

Offerering the Audio as a Download

Another easy solution is to offer the audio as a download.  Users can right click the link to download the file or open in the Quicktime Player (where they can also download it) by clicking the link.  

Download Audio Example >

You can use the Link option in the formatter of your CMS to upload the audio file or simply paste the following code in the HTML editor:

<a href=”/location/audio track title.mp3“>Download Audio Example ></a>

Offering the audio file as a download is probably the easiest method to use in any CMS if you are okay with giving that file away.  It also offers your users a chance to access your content away from your website.  They can listen on their MP3 player while at the gym or during the morning/evening commutes.  However, you may not want to offer your audio as a download for several reasons.  If that is the case, I would recommend using one of the players mentioned above.  If you concerned about the audio working on Apple mobile devices, be sure to use one that is iOS compatible.