Если сделать запрос поисковым серверам на тему проигрывания звука с помощью CSS, то вы найдете:
Ссылки на материалы о Counter Strike: Source.
Что-нибудь о play-during и cue-before и подобных многообещающих моментах, но ничего конкретного о том, как издать писк при наведении курсора мыши на пункт меню.
Звук является частью дизайна и способность проигрывать/запускать звуковые ролики должна присутствовать в CSS, но увы... ее пока нет. Чтобы проиграть звук при прохождении курсором мыши определённой области нам придется полагаться на HTML5 или Flash. Но кто в наше время захочет связываться с Flash? Поэтому обратимся к HTML5, который может проигрывать звук с помощью своего элемента <audio> (Firefox 3.5+, Chrome 3+, Opera 10.5+, Safari 4+, IE 9+). Чтобы обеспечить поддержку данной функции как можно большим числом браузеров будем использовать и MP3 источники (WebKit и IE) и OGG (Firefox и Opera).
<audio>
<source src="audio/beep.mp3"></source>
<source src="audio/beep.ogg"></source>
Ваш браузер не поддерживает замечательный элемент <audio>.
</audio>
Если вы вставите выше приведенный код на страницу, то ничего не увидите и не услышите. Для вывода небольшого проигрывателя нужно использовать атрибут controls (<audio controls>). Если нужно только проигрывать звук без каких-либо видимых элементов управления, то надо использовать атрибут autoplay (<audio autoplay>). Или можно использовать оба атрибута вместе ...
Нашей целью является проигрывание звука, когда курсор мыши оказывается над определённым элементом. К сожалению, мы не можем управлять элементом <audio> из CSS, поэтому потребуется использовать JavaScript:
var audio = document.getElementsByTagName("audio")[0];
audio.play();
// или с использованием ID
var audio = document.getElementById("mySoundClip");
audio.play();
Будем использовать jQuery, потому что он существенно облегчает выбор и работу с элементами.
var audio = $("#mySoundClip")[0];
audio.play();
Вот так выглядит код, который проигрывает звук, когда курсор мыши проходит над определенным элементом:
var audio = $("#mySoundClip")[0];
$("nav a").mouseenter(function() {
audio.play();
});
Пример из реальной жизни
На сайте Goodfoot используется подобная технология для проигрывания разных звуков, когда курсор мыши проходит над ртом снежного человека (работает в браузерах Webkit). Данный эффект выполнен встраиванием нового элемента audio в структуру DOM каждый раз, когда курсор мыши проходит над ртом снежного человека:
$("#speak").mouseenter(function(){
$("<audio></audio>").attr({
'src':'audio/'+Math.ceil(Math.random() * 5)+'.mp3',
'volume':0.4,
'autoplay':'autoplay'
}).appendTo("body");
});
Метод можно немного улучшить, добавив поддержку файла OGG:
function addSource(elem, path) {
$('<source>').attr('src', path).appendTo(elem);
}
$("#speak").mouseenter(function(){
var audio = $('<audio />', {
autoPlay : 'autoplay'
});
addSource(audio, 'audio/'+Math.ceil(Math.random() * 5)+'.mp3');
addSource(audio, 'audio/'+Math.ceil(Math.random() * 5)+'.ogg');
audio.appendTo('body');
});
Другой способ добиться подобного эффекта - нужно размести несколько элементов audio на странице сразу:
<audio preload="auto" id="sound-1" > ... источник ... </audio>
<audio preload="auto" id="sound-2" > ... источник ... </audio>
<audio preload="auto" id="sound-3" > ... источник ... </audio>
И случайным образом выбирать один для проигрывания:
$("#speak").mouseenter(function() {
$("#sound-" + Math.ceil(Math.random() * 3))[0].play();
});
Пробы и проблемы: наложение звуков.
На демонстрационной странице реализована идея воспроизведения клацания, когда курсор мыши проходит над пунктом меню. Сразу же открывается проблема: запуск следующего проигрывания звука с помощью функции .play() будет производиться до того, как закончится предыдущее звучание. Один элемент audio не может воспроизводить звук с перекрытием. Новый запрос на проигрывание из функции .play() просто игнорируется, пока не закончится запущенное звучание.
Первая мысль - сначала использовать функцию .pause() для остановки проигрывания и запускать следующее воспроизведение функцией .play(). Но тестирование выявило недостаток данного способа - пауза генерируется, но вот новое звучание не запускается во многих случаях.
Самый лучший метод решения возникшей проблемы - дублировать элемент audio для каждого пункта меню. Таким образом, независимые элементы audio могут проигрывать перекрывающиеся звуки.
$("nav a") // цикл по всем пунктам меню
.each(function(i) {
if (i != 0) { // Клонирование нужно только в случае более одного пункта
$("#beep")
.clone()
.attr("id", "beep-" + i)
.appendTo($(this).parent());
}
$(this).data("beeper", i); // сохраняем ссылку
})
.mouseenter(function() {
$("#beep-" + $(this).data("beeper"))[0].play();
});
$("#beep").attr("id", "beep-0"); // изменяем первый элемент в соответствии с условиями именования