Add MP3 audio in WordPress blogs

As a good content management system, WordPress allows you to upload audio files such as MP3 and OGG. However, it lacks the option to embed and stream audio using MP3 or any other format. When you click on the insert button, you get a link to the audio file. Your visitors will have to download the file and hear it on his computer.

What if your visitors could play the audio on your WordPress blog? Using HTML5, which is supported by most modern browsers, you can just add the location of the audio file using the AUDIO tag. Compatible Web browsers will automatically insert an audio player with necessary Play-Pause controls.

Uploading an audio file: It can be done using the WordPress text editor (where you write your posts) by clicking on the Media Upload icon. You can also use the Media menu in the dashboard. Once you upload the file, you get the URL to the file. You can also use FTP clients such as FileZilla.

Adding audio using HTML5: Once you have uploaded all the audio files (MP3 and/or OGG formats), you can copy-paste the following code in the WordPress text editor after switching to the HTML view.

<audio width="300" height="32" controls="controls"><source src="AudioFileUrl.mp3" type="audio/mp3" /><source src="AudioFileUrl.ogg" type="audio/ogg" />

<!–Fallback Message–>
Your Web browser does not support the audio tag. Switch to a modern/latest browser.
</audio>

Adding the following code each time manually can be irritating if you add audio files often. We can make it easy by creating a shortcode to add audio files. Copy-paste the following code in the functions.php file of your WordPress theme.

function sww_audio_embed($atts, $content = null) {
extract(shortcode_atts(array(
“mp3″ => ”,
“ogg” => ”
), $atts));

if ( ( $mp3 !=”) && ( $ogg !=”) ) {
return ‘<audio width=”300″ height=”32″ controls=”controls”>
<source src=”‘.$mp3.'” type=”audio/mpeg”/>
<source src=”‘.$ogg.'” type=”audio/ogg”/>
<!–Fallback Message–>
Your Web browser does not support the audio tag. Switch to a modern/latest browser.
</audio>’;
} elseif ( ( $mp3 !=”) && ( $ogg ==”) ) {
return ‘<audio width=”300″ height=”32″ controls=”controls”>
<source src=”‘.$mp3.'” type=”audio/mpeg”/>
<!–Fallback Message–>
Your Web browser does not support the audio tag. Switch to a modern/latest browser.
</audio>’;
} elseif ( ( $mp3 ==”) && ( $ogg !=”) ) {
return ‘<audio width=”300″ height=”32″ controls=”controls”>
<source src=”‘.$ogg.'” type=”audio/ogg”/>
<!–Fallback Message–>
Your Web browser does not support the audio tag. Switch to a modern/latest browser.
</audio>’;
}
}
add_shortcode(“audio”, “sww_audio_embed”);

Using the audio shortcode: When you want to add an audio, upload it in the mp3 and ogg formats so that the AUDIO tag works on all browsers. You can use audio format converters to get the two formats. Now add the audio file URLs using the shortcode formats as below. Please note that adding just one audio format file means it will not work on some browsers. For instance, Mozilla Firefox require audio in the OGG format.

That’s it. You have your fully functional shortcode for embedding audio file in WordPress blogs. The following audios will not work for old browsers. You can create a Flash fallback so that visitors using old browsers can also listen to your audio.