All I wanted to do was include an audio player in my podcast post in my Typepad blog. Should be simple, right? After waiting for almost a year for Typepad to improve it's own audio player. I invested a day two weeks ago figuring out how to do it myself. This article is written for those who also want to include an up-to-date audio player in their Typepad blog (or any other blog, for that matter) and don't want to move their blog away from Typepad. Why should you have to invest an entire day of your life, when you could learn from my experience?
Click to Listen!
It's actually the audio player in your post here - http://www.churchrequel.com/church_requel/2011/09/audio-sermon-why-we-remember.html - that is causing the extra padding at the end of the page. We're going to further investigate why the built in audio player is causing the problem.
In the meantime, you may want to remove the audio player from the post to restore your blog's design and instead place a link to download the file in post.
After a week had gone by, I naively thought that maybe some progress was being made and wrote to ask. Here's what I heard back.
When an issue is reported, we go through a specific, formal process in which the issue is discussed with the development engineers and a priority assigned. Once we can determine the cause of the problem, the code changes must be made in development, tested, and verified. Finally, they are assigned to a release and pushed into production.
Since this process does take some time, we are unable to give a specific date at this time when the change would be made. This will be determined during the development process, as we said.
We understand and appreciate your concerns. That we are unable to give a specific date before this issue has gone through the development process does not mean that we take it lightly. We do appreciate your taking the time to let us know how important this issue is for you though.
It's now been 48 weeks and nothing has changed. So I guess if it's to be it's up to me.
More challenging than you'd think. In Typepad's defense, inserting an audio player isn't as straight forward as you'd think. HTML5 - the modern coding that will also work on most mobile devices - provides an audio tag simple enough that even minor league coders like me can use it. And now this HTML5 audio tag will provide a player in the BIG 4 of browsers: IE, Safari, Firefox, and Chrome. However, this same audio tag won't work in older versions of these same browsers. For example, 13% of my blog's readers use IE8.
To further complicate the challenge of providing an audio player, IE, Safari, and Chrome will all play an mp3 file. However, Firefox cannot play mp3s. If I want to provide a universal player I need to also upload ogg audio files that will play in Firefox browsers. Fifteen percent of my readers use Firefox.
Typepad Complications. If this wasn't challenging enough already, the Typepad interface makes this even harder. If I insert the audio tag into the HTML tab on Typepad and then switch over to the Rich Text tab, Typepad automatically removes the audio tag! Typepad Help recommended to me that after I insert the audio tag that I stay in the HTML tab. (Gee, that was helpful.)
In addition I have learned that I can't use my Safari browser to insert the audio tag, even if I stay in the HTML tab. When I save my online work, my Safari window crashes. I've uploaded the code to Typepad Help and they say they cannot replicate my Safari crash experience. But they also inform me they have mixed results with Safari and recommend that I use Firefox to edit my Typepad blog. Using the Firefox browser does indeed work for me. I have not attempted this using either Chrome or IE.
The Steps. Have I completely scared you away from trying this? I certainly understand why people love the plug-ins over on Wordpress. But this is not as hard as you think if you will follow the following steps.
- Write and edit your text the way you want it to look using the Rich Text tab BEFORE doing anything with the HTML5 audio tag. Once you insert the audio tag you are committed to staying in the HTML tab of Typepad. If you switch back to Rich Text, Typepad will strip away your audio tag work.
- Prepare your mp3 file.
- Convert the mp3 file over to ogg. (I use Audacity to accomplish this.)
- Upload BOTH the mp3 AND ogg versions of your podcast or music to your online server. You will need to include the ogg version if you want your Firefox browser audience to also be able to experience your audio. Firefox will not play mp3 files. You can use Typepad to upload these files. Use the file upload icon rather than the audio icon. Then note the location of the files in Typepad. You can see this inside of the HTML tab.
- Insert the audio player HTML code I provide to you below. Remember that once you insert this code, you are committed to staying on the HTML tab of Typepad. If you click on the Rich Text tab, Typepad will wipe out your audio code.
- Change the URL location in the audio code to match where you uploaded your mp3 files in step four.
The Code. This is really a lot easier than you'd think. I am not a coder. Everything I learned about this (except for the Typepad stuff) I learned here. I could not get the flash to work as provided in his post. But I decided to go without flash and just use the HTML5 audio tags. Here is the code I use. I explain what it means below.
<h3>Click to Listen!</h3>
<audio id="audio_with_controls" controls>
<source src="http://www.churchrequel.com/files/how-to-use-audio-tag.mp3" type="audio/mpeg" />
<source src="http://www.churchrequel.com/files/how-to-use-audio-tag.ogg" type="audio/ogg" type="audio/ogg" />
Your browser does not support the audio element.
You can see the results of this code near the top of this post where I have recorded an audio file with the explanation. That is what this should look like. The bracket that begins with the <h3> is simply a header line telling people they can click to listen.
The <audio> line is next. I'm pretty sure you don't even need the "id" part. But you do need the "controls" part.
The <source> line is where you will insert the location of your mp3 file. This is the line that will be picked up by all modern browsers except for Firefox. Remember that Firefox will not play mp3 files.
The next <source> line is where you will insert the location of your ogg file. this is the line that will be picked up by the most current version of Firefox.
The last line, "Your browser does not support the audio element," is what will be shown in any browser that won't play HTML5 audio. This will be especially helpful when someone is using an older browser. At least they will see a line of text informing them that they cannot play the audio in their browser.
Ok. That's all I know about inserting an audio player inside a Typepad blog. I'm sure there's probably more that I don't know that perhaps some of you could help me with. If you have suggestions, please leave them below in the comments. You could be helping me along with lots of other Typepad users.