JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

<audio id="beep-one" preload="auto">
<source src="http://soundclan.myjino.ru/audio/nav-sound-1.mp3" controls></source>
<source src="http://soundclan.myjino.ru/audio/nav-sound-1.ogg" controls></source>

</audio>
<audio id="beep-two" preload="auto">
<source src="http://soundclan.myjino.ru/audio/nav-sound-2.mp3" controls></source>
<source src="http://soundclan.myjino.ru/audio/nav-sound-2.ogg" controls></source>
</audio>
  
<ul id="nav-two" class="nav">
    <li><a href="http://ya.ru">ссылка1</a></li>
    <li><a href="http://ya.ru">ссылка1</a></li>
    <li><a href="http://ya.ru">ссылка1</a></li>
    <li><a href="http://ya.ru">ссылка1</a></li>
</ul>

JavaScript

$(function() {
  $('#nav-two').on('mouseenter click', 'a', function(e) {
    if (e.type === 'mouseenter') {
      $('#beep-one')[0].play();
    }
    if (e.type === 'click' ) {
      e.preventDefault();
      $('#beep-two')[0].play();
    }
  });
});