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.

Doe mee met de conversatie

7 reacties

  1. Hi Remco,
    Ik kan de eerste stappen goed volgen. Denk ik. Voor de zekerheid heb ik een nieuwe database aangemaakt om lekker te kunnen experimenteren met deze functie. In /wp-content/themes/twentyeleven heb ik een audio folder gemaakt met audio bestanden.
    In die folder heb ik ook onderaan functions.php de twee nieuwe functies toegevoegd. En in deze folder een nieuw bestand gemaakt ‘menu-audio.js’ .
    Maar daaarna weet ik niet hoe ik de laatste stap moet maken. Waar komt het script voor de function te staan? Of heb ik wat gemist?

    1. De laatste blok code met de prefix_enqueue_scripts_menu_audio() functie moet je ook toevoegen aan je functions.php. Als het goed is zie je in de broncode van je website in de header een verwijzing naar het betreffende JavaScript bestand en in de footer de HTML5 audio elementen.

      1. Remco, sorry, kan je nog even meekijken. Ik krijg de code ook na het toevoegen van de prefix_enqueue_scripts_menu_audio() functie aan mijn functions.php niet werkend. Ik krijg zelfs geen beeld meer op mijn site. Ik heb het gevoel dat er ergens meer nodig is in een kale installatie dan jouw code hierboven. Ter info ik gebruik NL WP versie. 3.3.1.

          1. Remco, dit is een hele prettige manier om de code snel te plaatsen, maar helaas is het resultaat gelijk. Na het toevoegen van de “include ‘menu-audio/menu-audio.php'” gaat de site op ‘wit’. Er is dan geen enkele responce of feedback via de browser te krijgen. En inloggen als admin gaat dan ook niet meer. Ik zou het heel graag werkend hebben en ben er ook eindeloos mee bezig geweest om iets te vinden waardoor het hier stop. Kan het de WP versie zijn?? of de Twentyeleven theme? of de jquery.min.js ?

  2. Pingback: Beep | AppleTV2.nl
Laat een reactie achter

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *