X

How To Create a Shortcode for HTML5 Audio in Posts and Pages

Snippets by IsItWP

Are you looking for a way to create a shortcode for HTML5 audio? This snippet will create a new shortcode for adding HTML5 audio to your posts and pages.

Instructions:

  1. Add this code to your theme’s functions.php file or in a site-specific plugin.
  2. function html5_audio($atts, $content = null) {
    	extract(shortcode_atts(array(
    		"src" => '',
    		"autoplay" => '',
    		"preload"=> 'true',
    		"loop" => '',
    		"controls"=> ''
    	), $atts));
    	return '<audio src="'.$src.'" autoplay="'.$autoplay.'" preload="'.$preload.'" loop="'.$loop.'" controls="'.$controls.'" autobuffer />';
    }
    add_shortcode('audio5', 'html5_audio');
    
  3. Then, add this shortcode to your post or page and configure it as needed. Remember to replace the src attribute value.
  4. [audio5 src="http://your-site/videos/your-video.mp4" loop="true" autoplay="autoplay" preload="auto" loop="loop" controls=""]
    

Note: If this is your first time adding code snippets in WordPress, then please refer to our guide on how to properly copy / paste code snippets in WordPress, so you don’t accidentally break your site.

If you liked this code snippet, please consider checking out our other articles on the site like: 12 Best WordPress Podcast Plugins Compared (Free & Premium).

Comments  Leave a Reply

  1. WordPress for Church October 28, 2011 at 4:18 pm

    Any ideas on how to use Flash as a fallback?

    1. I would suggest that you use jplayer http://jplayer.org/ it will use flash if the browser does not support HTML5 audio. You will have to do some fiddling to get things running with wordpress though.

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

WordPress Launch Checklist

The Ultimate WordPress Launch Checklist

We've compiled all the essential checklist items for your next WordPress website launch into one handy ebook.
Yes, Send Me the Free eBook!