JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<ul id="nav-two" class="nav">
		   <li>
		   	<a href="#" class="beep">Главный</a>
		   	<audio id="beep-one" controls preload="auto">
				<source src="http://soundclan.myjino.ru/html-nav-sound/audio/nav-sound-1.mp3" controls></source>
				<source src="http://soundclan.myjino.ru/html-nav-sound/audio/nav-sound-1.ogg" controls></source>
				Ваш браузер не поддерживает замечательный элемент &lt;audio&gt;.
			</audio>
               <audio id="beep-two" controls preload="auto">
				<source src="http://soundclan.myjino.ru/html-nav-sound/audio/nav-sound-2.mp3" controls></source>
				<source src="http://soundclan.myjino.ru/html-nav-sound/audio/nav-sound-2.ogg" controls></source>
				Ваш браузер не поддерживает замечательный элемент &lt;audio&gt;.
			</audio>
			</li>
		   <li><a href="#" class="beep">О нас</a></li>
		   <li><a href="#" class="beep">Клиенты</a></li>
		   <li><a href="#" class="beep">Связаться с нами</a></li>
		</ul>

JavaScript

var song1 = $('#beep-one');
var song2 = $('#beep-two');

$('.beep').mouseenter(function() {
   song1.get(0).play();
  });

//Событие по клику
$('.beep').click(function() {
song2.get(0).play();
});