Mini audio přehrávač

Shortcode na jednoduchý audio přehrávač s tlačítkem play/pause.

PHP

<?php
function gog_mini_audio_player_shortcode($atts) {
	extract(shortcode_atts(array(
		'file' => '',
		'title' => ''
	), $atts));

	if (!$file) {
		return;
	}

	$id = 'miniaudio' . rand();
	$res = "
	<div class=\"miniaudio\">
		<audio id=\"$id\" src=\"$file\"></audio>
		<a class=\"miniaudio-play\"><i class=\"fa fa-play-circle\"></i></a>
		<a class=\"miniaudio-pause\"><i class=\"fa fa-pause-circle\"></i></a>
		<span class=\"miniaudio-title\">$title</span>
	</div>";

	return $res;
}
add_shortcode('miniaudio', 'gog_mini_audio_player_shortcode');

jQuery

jQuery(document).ready(function() {
	jQuery('.miniaudio a').click(function() {
		var button = jQuery(this);
		var parent = jQuery(this).parent();
		var audio = parent.find('audio')[0];

		if (button.hasClass('miniaudio-play')) {
			jQuery('.miniaudio audio').each(function() {
				this.pause();
				jQuery(this).parent().find('.miniaudio-pause').hide();
				jQuery(this).parent().find('.miniaudio-play').show();
			});
			audio.play();
			parent.find('.miniaudio-play').hide();
			parent.find('.miniaudio-pause').show();
		}
		else {
			audio.pause();
			parent.find('.miniaudio-play').show();
			parent.find('.miniaudio-pause').hide();
		}
	});
});

CSS

.miniaudio {
	display: inline-block;
}

.miniaudio a {
	font-size: 24px;
	cursor: pointer;
}

.miniaudio .miniaudio-pause {
	display: none;
}

.miniaudio .miniaudio-title {
	vertical-align: top;
	margin-left: 8px;	
}