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

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.

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');

2. Then, add this shortcode to your post or page and configure it as needed. Remember to replace the src attribute value.

[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) and 9 best WordPress accordion plugins.