Проигрываем звук для псевдо класса :hover | Деонстрация для сайта RUSELLER.COM

Проигрываем звук для псевдо класса :hover

Мы будем использовать HTML5, никакого Flash. Нам будет нужен аудио элемент с MP3 (WebKit, IE) и OGG (Firefox, Opera).

<audio controls preload="auto">
 <source src="audio/beep.mp3" controls></source>
 <source src="audio/beep.ogg" controls></source>
 Ваш браузер не поддерживает замечательный элемент <audio>.
</audio>

Мы будем использовать jQuery для упрощения выделения элементов и событий, но функция .play() принадлежит HTML5. Аудио элементы выводятся только для демонстрации, можно удалить артрибут control, чтобы убрать их с экрана.

Один элемент <audio> для всех пунктов меню

.play() не будет запускать новое проигрывание аудио клипа до тех пор, пока не завершит предыдущее. Данный вариант звучит так сбебе.

Один элемент <audio> для всех пунктов меню, использует паузу

.pause() останавливает предыдущее проигрывание ауди клипа, прежде чем запустить новое. Реальность далека от идеала - звук иногда прерывается, но не запускается снова.

Клонированные элементы <audio>, для каждого пункта меню свой

Самый лучший вариант, но все таки не идеальный.