In order to understand how to use the WordPress Audio shortcode, we should take a quick look at the HTML5 audio element since this is sort of HTML the shortcode will ultimately end up generating.
The HTML5 Audio Element
The new HTML5 audio element is pretty simple and uses multiple audio sources to enable cross browser compatibility. Here’s what the HTML looks like:
<audio controls> <source src="audiofile.ogg" type="audio/ogg"> <source src="audiofile.mp3" type="audio/mpeg"> <source src="audiofile.wav" type="audio/wav"> If your browser does not support the HTML5 audio element, this message is displayed </audio>
The WordPress Audio Shortcode
As of version 3.6, WordPress has included an audio shortcode that makes creating this HTML easy. To use it, first upload your audio files into WP. Then, while editing a post or page, click the “Add Media” button above the WP content editor.
Then select your adio file and click “Insert Into Page”. You should end up with something that looks like this:
[audio src="audio.mp3"]
If you want to be lazy you can even build in embeds by simply putting the URL to the media file on it’s own line:
My cool content http://my.mp3s.com/cool/audio.filetype More cool content
In order for this audio to be compatible with all browsers you will need to drop the “src” attribute and reference all three types of audio for the same file:
[audio mp3="audio.mp3" ogg="audio.mp3" wav="audio.wav"]
More WordPress Audio Shortcode Options:
In case you need to make some adjustments to how the file is played, or loaded, check out some of these extra options:
[audio loop="on"] Loop after each playback. [audio loop="off"] Don't loop. (default) [audio autoplay="on"] Autoplay on page load. [audio autoplay="off"] Don't autoplay. (default) [audio preload="none"] Don't preload any audio. Wait until after the page loads (default) [audio preload="auto"] Audio loads with the page. [audio preload="metadata"] Audio meta loads, but the rest waits until after the page loads.
I hope this has been helpful. Let us know what you think in the comments below.
