Two years ago, I’d written an article about embedding audio into WordPress. At that time, I had suggested inserting the audio shortcode that was so easy to use and took up just one line. However, since then HTML 5 was introduced and has now become a lot more prominent. All of the major browsers support it. Amongst the many interesting new features, we have a new <audio> tag that natively plays sound files in a webpage. In this article, I’m going to do a side-by-side comparison of the new HTML 5 way of playing audio versus the older audio shortcode method.
Testing the Audio Shortcode
Let’s say I have a simple MP3 file in the wp-content folder of my WordPress installation. To play this in a blog post, I can easily use the shortcode:
When my post goes live, the audio player will render like this:
As you can see, this is definitely a neat and convenient solution to playing audio files in WordPress. You don’t need to worry about the format or whether or not the target browser supports it. However, it incurs a cost on your webpage in terms of loading speed. To test this, I ran it through webpagetest.org. You can see in the screenshot below that the media player inserted by WordPress loads four related files:
Moreover, the load time of this completely unoptimized page was 4 seconds.
Now let’s perform the same test with the HTML 5 audio tag and see what happens.
Using the HTML 5 Audio Tag
To play an audio MP3 file like the one above using HTML 5, I use the following code:
<audio controls="controls"> <source src="http://www.webhostingshed.com/wp-content/kid.mp3" type="audio/mpeg" /> Your browser does not support the audio element. </audio>
Since this is an MP3 file, the “type” element is “audio/mpeg”. Similarly, an OGG file would have been “audio/ogg” and a WAV file would take the form “audio/wav”. Unlike the audio shortcode however, I need to go into the “Text” tab of the WordPress editor to paste this code. After I’ve saved my changes and reload the page, this is what the new audio control looks like:
Now let’s perform the same tests on the HTML 5 audio tag that we previously did with the audio shortcode. To start off with, the page load time has decreased by one second.
In short, you can do just about everything you want with HTML 5 instead of relying on a third-party solution. The only potential drawback is browsers that don’t yet support the standard. But close to two years after HTML 5 first came out, it’s pretty much a universal thing by now so you don’t have much to worry about!