Добрый день, друзья. Сегодня решил разобраться с таким интересным эффектом, как проигрывание звука при наведении курсора на ссылку, картинку или другой элемент вашего landing page. Все ограничивается только вашей фантазией.
На многих форумах говорят, что этого делать не надо, что это всех раздражает и никому не нравится. Я считаю, что в некоторых случаях это довольно органично вписывается в общую концепцию сайта и смотрится (слушается) довольно интересно :) Например, как на этом сайте.
В любом случае, всегда будут люди, которое гневно критикуют этот эффект, и всегда будут говорить, что это раздражает пользователя. Но в тоже время найдутся и те, которые давно хотели добавить звук при наведении на пункты меню. Относитесь ли вы к одним или к другим, а узнать, как работает данный эффект в вашей нише помогут только АБ тесты. Давайте приступим...
Как воспроизвести звук при наведении курсора на чылку
Первым делом подключаем библиотеку jquery:
<head> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> </head>
Теперь разберемся с разметкой. Для реализации эффекта будем использовать тег <audio> Нам понадобятся далеко не все его свойства. Подробнее о нем поговорим в другой раз, он очень похож на тег video. Итак...
<div class="button music1"><a href="#">Музыкальная ссылка</a></div>
<audio id="sound-link" preload="auto">
<source src="audio/claps-mp3.mp3" type="audio/mpeg">
<source src="audio/claps-ogg.ogg" type="audio/ogg">
<source src="audio/claps.waw" type="audio/wav">
</audio>
Теперь, для того, чтобы звук воспроизводился при наведении на ссылку при наведении на него курсора мыши, нам нужно воспользоваться небольшим скриптом:
<script>
var soundLink = $("#sound-link")[0];
$(".music1 a").mouseenter(function() {
soundLink.play();
});
</script>
Можете расположить его ближе к футеру, а в исходнике я вынес его во внешний файл и подключил его в конце страницы.
Аналогичным образом можно задать воспроизведения звука при наведении на пункты меню, да и вообще - на все ссылки.
В исходном файле я положил несколько разных звуков щелчка, для того, чтобы у вас был небольшой выбор. Вообще, желательно, чтобы длительность аудио файла была не больше секунды, тогда все происходит корректно и звук издается вовремя. Если вам удастся найти подобные звуки, скиньте пожалуйста в социальные сети или на почту, и я их добавлю в статью.
А на сегодня - все! Пока:)
28 комментариев
Здравствуйте. Спасибо за полезные статьи!Очень надеюсь, что вы не забросите данный сайт! Буду следить за новостями)
Так же на страничке есть опечатка в ссылке, в тексте: « Например, как на этом сайте.» Ссылка на сайт с опечаткой. Но это не критика, а в поддержку работоспособности вашей статьи!) Удачи вам.
Здравствуй! Большое спасибо, поправил))
Здравствуйте! Спасибо за эту статью и за полезный сайт! Очень хорошо объяснили, кратко и лаконично, вопрос подключения аудиофайлов к ссылкам. У меня сайт по изучению языка, есть идея сделать диалоги, при наведении мыши на фразы человек будет слышать, как они звучат. Буду пробовать Ваш способ. Спасибо большое!
Здравствуйте. И вам спасибо, что читаете :)
Большое спасибо, всё работает.
Подскажите, а как сделать, чтобы на разных кнопках воспроизводились разные звуки?
Несколько раз подключать, или, возможно, написать какой-то скрипт.
А можете пример написать? Я пробовал наугад тыкать - у меня один звук для всех кнопок получается - другие не привязываются.Просто я никакой в скриптах... (((
Отправил на почту :)
А как сделать, чтобы при наведении на кнопку и при убирании курсора с нее, раздавались разные звуки?
Здравствуй, я не в курсе, не разбирался с этим вопросом. Наверное нужно вешать js функцию реагирующее на это событие.
А желательно, чтобы еще и при нажатии.
Почему-то в исходнике не работает звук.
А ты попробуй на сервере протестировать. Работает?
Дмитрий Здравствуйте!
делаю сайт и решил поставить звук на кнопки тут вышел на вашу статью
которая мне очень помогла за что вам большое спасибо )
только остался вопрос как прописать разные звуки на ссылки ?
у вас уже спрашивали здесь но вы ответили на почту
если не затруднит не могли бы вы и мне ответить на этот вопрос? за ранее спасибо большое
Здравствуйте, в исходнике сейчас лежит пример, с разными звуками на ссылках. Может быть не самое красивое решение, но оно работает, только тестируйте на сервере, а то не будет работать, если просто открыть индексный файл в браузере.
Спасибо Вам
Чалом бью )
Здравствуйте! Спасибо большое за статью, но не могли бы Вы подсказать мне? Есть меню в верхней части сайта:
Куда что писать, чтобы при наведении был звук?
сайт maximeb.at.ua
В статье же исходник есть, как раз с несколькими ссылками...
исходник ваш не воспроизводит звук
Читайте комментарий выше, уже отвечал на такую "Жалобу"! Тестируйте на сервере.
Добрый вечер ! А вы могли бы мне помочь запихнуть звуки щелчка в меню на сайт wix ? Можем договорится!
Я не работал с wix, и не знаю, вообще ли возможно там такое.
dimadv7, Доброе время суток! Очень нравятся ваши статьи, очень много полезного нашел здесь для себя, как и в этой статье! Работаю с Платформой ЛП, подскажите пожалуйста, как можно было бы реализовать на ней этот скрипт? Очень бы хотелось научиться применять адаптивность по времени суток и воспроизводить звук при наведении на кнопки или ссылки. Спасибо и успехов в делах!
Анатолий, здравствуйте, спасибо. Но к сожалению, не могу помочь, так как сам с конструкторами не работаю, с ПлатформойЛП имел дело очень давно, когда готовил статьи о конструкторах. Если у платформы есть возможность загружать свои скрипты и редактировать разметку, тогда по статье сделать можно, а если нет, то нет. Собственно из-за подобных ограничений и не работаю с конструкторами.
Спасибо все работает.
Только вначале не понимал, почему при нажатии не воспроизводился звук, оказалось, что нужно прописать [0] после селлектора.
хотелось бы что бы звук пропадал при убирании курсора
Еще бы понять где взять звуки, может есть какие то хорошие источники?
"...курсора на чылку...."