Fare una semplice animazione (come un fadein) al click su un dato elemento è abbastanza semplice. Non capisco la tua difficoltà nel riuscire ad impostare una cosa del genere. Ad ogni modo trovo tutto il codice della pagina molto confuso, per cui non riesco a capire come poterti aiutare se non disfando tutto e rifacendo tutto da capo in modo ordinato.. ma chiaramente non è il caso.

Ti posto giusto un esempio, vedi se riesci a riutilizzarlo/adattarlo per ciò che ti serve:
codice:
<!DOCTYPE HTML>
<html>
  <head>
    <title>Esempio</title>
    <meta charset="utf-8">
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <style type="text/css">
      /* Pagine */
      #pagine>div{
        position:absolute;
        display:none;
      }
      
      /* Il mio menu coi cerchietti*/
      #menu{
        position:fixed;
        width:100%;
        bottom:0;
        background:Lavender;
        padding:50px;
        text-align:center;
      }
      #menu>a{
        display:inline-block;
        margin:50px;
        border:3px solid transparent;
        border-radius:50%;
        outline:none;
      }
      #menu>a:after{
        content:"";
        display:block;
        width:35px;
        height:35px;
        border-radius:50%;
        box-sizing:border-box;
      }
      
      /* Un po' di colori per i diversi pulsanti menu */
      #menu>a[data-pagina="1"]:after{
        border:6px solid Purple;
        background:White;
      }
      #menu>a[data-pagina="2"]:after{
        background:Teal;
      }
      #menu>a[data-pagina="3"]:after{
        border:6px solid Green;
        background:White;
      }
      
      /* Effetti hover e pulsante selezionato */
      #menu>a:hover{
        box-shadow:0px 0px 4px 4px rgba(80,140,210,.7);
      }
      #menu>a.attivo{
        background:rgba(80,140,210,.7);
      }
      #menu>a.attivo:after{
        opacity:.3;
      }
    </style>
    <script type="text/javascript">
      $(function(){
        $("#menu>a").click(function( event ) {                                  // Al click su ciascun pulsante menu
          event.preventDefault();                                               // Prevengo l'azione di default per il tag a
          $(this).siblings().removeClass("attivo").end().addClass("attivo");    // Aggiorno il pulsante attivo
          $("#pagine div.pag-"+$(this).data("pagina"))                          // Seleziono la pagina corrispondente
          .siblings().stop().fadeOut(300)                                       // Fade-out sulla vecchia pagina
          .end().stop().fadeIn(300);                                            // Fade-in sulla nuova pagina
        })
      })
    </script>
  </head>
  <body>
  
    <div id="pagine">
      <div class="pag-1">
        <h1>Pagina 1</h1>
      </div>
      <div class="pag-2">
        <h1>Pagina 2</h1>
      </div>
      <div class="pag-3">
        <h1>Pagina 3</h1>
      </div>
    </div>

    <div id="menu">
      <a href="#" data-pagina="1"></a>
      <a href="#" data-pagina="2"></a>
      <a href="#" data-pagina="3"></a>
    </div>

  </body>
</html>
Per l'audio al click fai qualche ricerca sul forum, mi ricordo di aver già visto qualcosa. Se ritieni ti serva aiuto, conviene comunque aprire una nuova discussione perché si tratta di un altro argomento (questa discussione è già abbastanza ingarbugliata così).