Using And Customizing The WordPress Audio Player

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.

Browser Support

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+
• Firefox
• Opera
• Chrome
• Safari

Basic HTML Markup

The new 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.

The 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.

The 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 ogg and mp3, the other type you can link to is wav.

WordPress Support

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:

[audio]

To link to your files you can declare the source of the files within the shortcode which would like like this:

[audio src="audio.mp3"]

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

http://mywebsite/media/songs/sweetsong(.audioextension)

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 mp3=" ", ogg=" ", wav=" ".

Options for Playback.

The audio shortcode allows for some options for playback.

src [audio src=" "]

The 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.

• mp3
• mp4
• ogg
• wav
• wma

loop

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.

[audio loop="on"]

or

[audio loop="off"]

autoplay

In very rare circumstances you may want to autoplay audio when a user visits a specific page. By default this option is turned off.

[audio autoplay="on"]

or

[audio autoplay="off"]

preload

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.

Inserting audio. Notice the new selection element on the bottom right.

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:

Adding a new audio post

And then when published appears looking like this with the built in user interface the HTML5 code and your browser creates.

Post is published. The audio displays with default settings.

Conclusion

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