Before the dawn of HTML5 there was no standard for playing audio files on a web page. Most solutions were flash based players which only rendered if you had a flash player plugin installed on your system. This problem is what led to the development of a new standard for media within any web browser.
At this point in time, most mobile devices or tablets simply chose not to support flash. With this new standard in place, developers are using the new HTML5 conventions to implement media such as audio or video.
WordPress has made importing audio into your blog a breeze. This article will teach you more about the audio support and how to use and customize the WordPress audio player.
At the time of this writing there are a number of browsers supporting the new
audio HTML element. Below is a list of the browsers.
- Internet Explorer 9+
Basic HTML Markup
audio element has a simple structure which links to a file on your website similar to how you would link to an image. The difference and key thing to remember is that different browsers require different formats of audio. Some browsers support more than one type of audio file.
Here’s how the markup looks:
<audio controls> <source src="audiofile.ogg" type="audio/ogg"> <source src="audiofile.mp3" type="audio/mpeg"> Your browser does not support the audio element </audio>
This article isn’t meant to explain the HTML you see above but I will briefly to give you a bit of background about what is going on.
audio element which defines sound content, is written with a
controls option. This will show controls for a media player by default. This gives your users the control to pause or play the file as well as adjust other properties like volume.
element is the link to the actual media file you are wanting to display. You’ll notice there are two
elements. These are required in order to offer support for all major modern browsers. Here we have linked the audio types of
mp3, the other type you can link to is
The audio feature within WordPress allows you to embed audio files and play them back. This was added as of WordPress version 3.6.
WordPress included the feature as a shortcode which makes use of the markup I explained earlier. The shortcode will link to specific media file or files and output the HTML like I wrote earlier.
The default shortcode looks like this:
To link to your files you can declare the source of the files within the shortcode which would like like this:
You can also simply include a link to an audio file like below and WordPress will render it as audio and display a player.
This is my latest song
Some more content
To make sure your audio plays in all browsers you need to reference other types of audio for the same file like so:
[audio mp3="audio.mp3" ogg="audio.mp3" wav="audio.wav"]
Notice how the
src"" attribute was dropped and new attributes were added. In this case it is
Options for Playback.
audio shortcode allows for some options for playback.
[audio src=" "]
src is an optional field but is wise to use especially if you have multiple browsers to support. The following types can be defined to allow for graceful fallbacks if a certain browser can’t render a specific audio type.
The option to automatically loop the playback of a file exists. By default this option is turned off. Personally if you loop audio playback I think you will just annoy your users so it may be best to avoid this all together.
In very rare circumstances you may want to autoplay audio when a user visits a specific page. By default this option is turned off.
You may want to preload audio in some circumstances. There are a few options available if you choose to do so:
[audio preload="none"]– This is the default. The audio won’t load when the page loads but soon after.
[audio preload="auto"]– The audio loads along with the page.
[audio preload="metadata"]– Only metadata loads when the page loads.
Adding Audio to a Post
With the background of how the
audio shortcode handles implementing your audio files inside WordPress you can now create a new post.
The process of adding a new post is the same as it has always been inside WordPress. If you plan to add audio, you can add it to your media library just like you would an image.
One thing you might notice is a new menu to select which way to implement the audio appears. I’ve chosen the default here upon adding an audio file.
Once you insert the audio you can create and fine tune your blog post. Inside our post we added the audio which appears like below:
And then when published appears looking like this with the built in user interface the HTML5 code and your browser creates.
The audio element is a great way to add variety to your blog posts. A more common technique and up and coming trend is for blogs to feature podcasts. The podcasts can be uploaded to your site and included with ease. The new HTML5
audio element combined with WordPress has made authoring and sharing audio easier than ever before by providing your users with quick access to dynamic and more appealing content.
Article thumbnail image by venimo / Shutterstock.com
Thanks, Andy, for this writeup.
One of my clients needed the streaming audio widget to include a “download” link as well. I tweaked the mediaelement functionality (by deregistering mediaelement-and-player.min.js in the functions.php file and then by creating a “new” one in my theme folder). This is what I came up with:
That widget is created when the editor simply pastes the URL of the MP3 into the body of the post.
Do you know of a less kludgey way to do this, to get a “download” button to appear? And do you know how I can get rid of the ?_=1 and ?_=2 and ?_=3 that append themselves to the end of the download URL? Maybe there’s a shortcode that exists (or that could be created) that’d generate both the streaming widget *and* download link?