Adding an Audio Player to Your Libsyn.com Hosted Show Notes

At work I was asked to solve an issue with the website associated with our podcast. The problem was that the default player provided by our host (Libsyn.com) wasn't meeting our needs. On several occasions the player wouldn't play the most recent podcast episode. We also didn't like that if you were viewing the show notes for an older episode the player would still play the most recent episode, which confused our visitors.

Note that the following directions are for Libsyn's publishing system version 3.4.2 (rev. 1764)

Custom Player Code

There are many audio players to choose from; we decided to use one provided by Google:

<embed type="application/x-shockwave-flash" width="400" height="27" src="http://www.google.com/reader/ui/3523697345-audio-player.swf" flashvars="audioUrl=http://traffic.libsyn.com/YourUsername/YourAudioFile.mp3" quality="best"></embed>

Note that you'll need to replace the "http://traffic.libsyn.com/YourUsername/YourAudioFile.mp3" part with the website address for your podcast episode.

Adding the Custom Player

To add the custom player code to your show notes, you'll need to:

1. Log into the Libsyn publishing system
2. Click the show posts button near the top-left of the page (see Figure 1)
3. Click the "Edit" link for the post that needs the custom player (see Figure 2)
4. Click the "HTML" button (see Figure 3)
5. Insert the custom player code where you want it to appear in the show notes (see Figure 4)
6. Click the "Update" button
   • Note that you should see the player if it was added properly. You should also be able to hear the podcast episode by clicking the play button on the player. (see Figure 5)
7. Click the "Publish" button
8. Repeat steps 3 – 7 for the other posts which need the custom player

Figure 1. Show Posts Button

Figure 2. Edit Post Link

Figure 3. HTML Button

Figure 4. HTML Code Window

Figure 5. Player Added to Show Notes

Removing the Default Libsyn Player

Once all the custom audio players are in place we no longer need the default player provided by Libsyn. To remove the player, you'll need to:

1. Log into the Libsyn publishing system
2. Click the "Destinations" button (see Figure 6)
3. Click the "Libsyn Classic Blogpage" option (see Figure 7)
4. Locate the code used to display the Libsyn player in the Blogpage HTML/Code edit box (see Figure 8)
5. Comment out the Libsyn player code (see Figure 9)
   • Note that you could also delete the code, but you may want to save the code in a text file for later. You never know when you might want to add the Libsyn player again.

Figure 6. Destinations Button

Figure 7. Libsyn Classic Blogpage Option

Figure 8. Libsyn Player Code – Before Being Commented Out

Figure 9. Libsyn Player Code – After Being Commented Out

Related Resources

• Libsyn.com — If you publish a podcast, you're probably familiar with Liberated Syndication (Libsyn). According to their website, Libsyn is the world's largest podcast network that distributes more than 15,000 podcasts.
• Yahoo! Media Player — Another player option that automatically pulls all audio links on the page to create a playlist.