WordPress menu met geluid

Onlangs kreeg ik de vraag hoe je een geluidsfragment kunt afspelen zodra je over een WordPress menu item heen gaat met je muis. Op internet is veel informatie te vinden over hoe je een geluidsfragment kunt afspelen, maar hoe integreer je deze netjes in een WordPress thema? In dit bericht beschrijf ik kort een mogelijk oplossing.

Allereerst is het handig om een map ‘audio’ aan te maken binnen je WordPress thema map. Binnen deze map kun je alle gerelateerde audio bestanden plaatsen die je wilt afspelen zodra men met de muis over een menu item gaat. Vervolgens voegen we aan het WordPress functions.php bestand een aantal functies toe:

/**
 * Menu audio
 *
 * @return array
 */
function prefix_menu_audio() {
	$dir = get_stylesheet_directory_uri();

	return array(
		'beep' => array($dir . '/audio/beep.mp3', $dir . '/audio/beep.ogg') ,
		'end' => array($dir . '/audio/end.mp3', $dir . '/audio/end.ogg')
	);
}

In bovenstaand code fragment worden 2 audio fragmenten gedefinieerd in 2 verschillende formaten, namelijk MP3 en OGG. Om deze audio fragmenten te kunnen afspelen moeten ze worden toegevoegd aan de HTML van de website. Dit kunnen we realiseren met behulp van de volgende functie:

/**
 * Menu beep HTML
 */
function prefix_menu_audio_html() {
	$html = '';

	$audio = prefix_menu_audio();

	foreach($audio as $id => $sources) {
		$html .= sprintf('<audio id="%s">', esc_attr($id));
		foreach($sources as $source) {
			$html .= sprintf('<source src="%s" />', esc_attr($source));
		}
		$html .= '</audio>';
	}

	echo $html;
}

add_action('wp_footer', 'prefix_menu_audio_html');

Met behulp van bovenstaande functie wordt er voor gezorgd dat de gedefinieerde audio fragmenten in een nette HTML5 formaat in de footer van de WordPress website worden geplaatst. Vervolgens kunnen we met behulp van een aantal regels code JavaScript / jQuery deze audio fragmenten afspelen. Om dit te realiseren maken we maken een JavaScript bestand menu-audio.js aan in de WordPress thema map.

jQuery(document).ready(function($) {
	$(".menu a").mouseenter(function() {
		$("#beep").trigger("play");
	});
});

Dit bestand kan met behulp van de volgende functie worden toegevoegd aan de WordPress website zodat deze wordt uitgevoerd:

/**
 * Menu beeps enqueue scripts
 */
function prefix_enqueue_scripts_menu_audio() {
	wp_enqueue_script(
		'menu-audio' ,
		get_stylesheet_directory_uri() . '/menu-audio.js' ,
		array('jquery')
	);
}

add_action('wp_enqueue_scripts', 'prefix_enqueue_scripts_menu_audio');

In dit voorbeeld wordt slecht 1 audio fragment afgespeeld voor alle menu items. Met een beetje WordPress en jQuery kennis is dit natuurlijk eenvoudig uit te breiden.

Update: Voor het gemak heb ik een kant en klare WordPress menu audio oplossing klaar gezet, welke uitgepakt kan worden in je thema map en geactiveerd kan worden door include 'menu-audio/menu-audio.php'; in je thema’s functions.php bestand te plaatsen.