HTML5 Audio Tag and Embedding MP3 in WordPress Post

HTML5 Audio Tag Element Represents a Sound or an Audio Stream. Embedding MP3 Such as Own Podcast in WordPress Single Even One Post is Easy Without any Plugin. Earlier, we discussed about HTML5 Vocabulary and Interfaces. HTML5 provides a standard for playing audio files. Before HTML5, there was no standard for playing audio files on a web page.

Before HTML5, audio files had to be played with a WordPress plugin (like flash). However, different browsers supported different plug-ins. HTML5 defined a new <audio> element which specifies a standard way to embed an audio file on a web page. So, this is true that; we can include HTML5 Audio Tag Element and Provide some way to Play an Audio Stream within a single Post.

There is, at least one WordPress Plugin named oEmbed HTML5 audio plugin which is intended to add audio file on WordPress Post. In this case, one need to click on Add Media button to upload audio file from your computer. One can upload files in mp3, ogg, and wav formats. Once you have uploaded the file, copy file location and paste raw URL in your post. The plugin will use HTML5 audio tag  element to automatically embed audio file from your URL.  Currently, Firefox does not support oEmbed HTML5 audio for MP3 files so the plugin falls back to a flash player instead of HTML5 when it detects Firefox. Google Chrome and Opera supports all the features specified in HTML5 Audio Tag Element, unfortunately; we need an unified looking Player on all these Browsers.

HTML5 Audio Tag Element and Why We Need an Extra Audio Player in WordPress

Theoretically, this block of code will work fine to have an Audio Player on HTML5 WebPages :

Working example :

But, in real, we need some working HTML5 Javascript Based Audio Player to give our readers an option to Play Audio file as it is required to have something that works on every possible web browser on every possible devices.

This indeed, quite closer to this fact – we could host the above code, but we have used Github Gist. For block of codes; NOT ALL, really works great with self hosting and using a syntax highlighter.

WordPress Plugin is not a good option as the Javascripts will be included on all the Post Pages on WordPress – we do not need the Audio Player on all Pages or Posts. Another way is to include a Third Party Player like from SoundCloud – practically, we have told kind of that way with Kaltura Player.

HTML5 Audio Tag Element and Why We Need an Extra Audio Player in WordPress

By now, we know how to use WP Enqueue Script For WordPress Themes. As all posts has an id like ( post=722 ) we can conditionally load them, simply move your functional code to theme’s functions.php file and wrap the function contents in an if ( is_page( ‘page-with-form’ ) ) conditional argument.

Now, we need a nice, neat Player. Audio.js is what we want :

We talked about another Audio player on this post – Cloud Files Hosted Music Player of Your Own. You can (as a last effort) iframe your own such self hosted player on plain HTML page.