Audio player in menu/navigation

[rschel]

I am trying to get two audio snippets in the navigation/menu bar one in the as the first item and one as the last. I have tried several different ways and so far nothing is working completely. I need both audio snippets to work independent of each other.
Any Ideas?

http://willixhypnosis.com/

[Brad Dalton]

You could float one to the left and one to the right using this code http://www.rfmeier.net/add-a-custom-primary-nav-extras-within-genesis/

---

Tutorials for StudioPress Themes.

[rschel]

I can't get them to work independently of each other

add_filter( 'wp_nav_menu_items', 'custom_nav_item', 10, 2 );
/**
* Callback for Genesis 'wp_nav_menu_items' filter.
*
* Add custom right nav item to Genesis primary menu.
*
* @package Genesis
* @category Nav Menu
* @author Ryan Meier http://www.rfmeier.net
*
* @param string $menu The menu html
* @param stdClass $args the current menu args
* @return string $menu The menu html
*/
function custom_nav_item( $menu, stdClass $args ){

// make sure we are in the primary menu
if ( 'primary' != $args->theme_location )
return $menu;

// see if a nav extra was already specified with Theme options
if( genesis_get_option( 'nav_extras' ) )
return $menu;

// additional checks?

// append your custom code
$menu .= sprintf( '<li class="welcome-audio">%s', __( 'WELCOME: <audio id="myAudio" <source src="http://willixhypnosis.com/wp-content/uploads/2014/04/welcome-audio-4.19.14-1.mp3" type="audio/mp3"> Your user agent does not support the HTML5 Audio element. </audio> <button type="button" onclick="aud_play_pause()" ></button> <script> function aud_play_pause() { var myAudio = document.getElementById("myAudio"); if (myAudio.paused) { myAudio.play(); } else { myAudio.pause(); } } </script>')
);

// return the menu
return $menu;

}

and the other audio clip:

( '<li class="spanish-audio">%s', __( 'BIENVENIDA: <audio id="myAudio2" <source src="http://willixhypnosis.com/wp-content/uploads/2014/04/audio-de-bienvenida.mp3" type="audio/mp3"> Your user agent does not support the HTML5 Audio element. </audio> <button type="button" onclick="aud_play_pause()" ></button> <script> function aud_play_pause() { var myAudio2 = document.getElementById("myAudio2"); if (myAudio2.paused) { myAudio2.play(); } else { myAudio2.pause(); } } </script>') );

I either get the spanish or the english welcome and even when I have them both up on the navigation bar.

Plus I am not sure how to get them both into the code for the functions.php I have tried one in the functions.php and the other in a link for the menu via wordpress backend.

confused not sure what's wrong.

[Brad Dalton]

Please don't post raw PHP code in a web page as anyone else who copies it will break their site. Use Github Gists.

---

Tutorials for StudioPress Themes.

[rschel]

oh, sorry I will try and put it up there shortly.

[rschel]

OK, here it is my problem on gist.....

HERE

[Brad Dalton]

You can add 2 widgets in your nav menu.

Float one to the left and the other to the right and add text widgets to each with the url to your audio which will use the native WordPress audio player.

Some work is required on your behalf.

---

Tutorials for StudioPress Themes.

[rschel]

Fantastic thank you this will work out great

[rschel]

How do I get the widget inside of the menu wrap. I can float the widget left or right and it is in the navigation area far left or far right of menu, but not in the center wrap where the menu is. Can't figure how to get it into that area.

[rschel]

Almost there I posted what I have in the functions.php file now on gist HERE

Problem: The background of the secondary menu looses it's full width background. I tried moving the structual wrap close code, but with no good results.

[rschel]

I just discovered that the widget is going into a newly created wrap and not the wrap for the navigation, so that won't work either.

[Author]

Posts