Проигрывание звука при наведении на ссылку

звук при наведении на ссылкуДобрый день, друзья. Сегодня решил разобраться с таким интересным эффектом, как проигрывание звука при наведении курсора на ссылку, картинку или другой элемент вашего 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 комментариев

  1. Дмитрий

    Здравствуйте. Спасибо за полезные статьи!Очень надеюсь, что вы не забросите данный сайт! Буду следить за новостями)
    Так же на страничке есть опечатка в ссылке, в тексте: « Например, как на этом сайте.» Ссылка на сайт с опечаткой. Но это не критика, а в поддержку работоспособности вашей статьи!) Удачи вам.

    1. dimadv7

      Здравствуй! Большое спасибо, поправил))

  2. Александр

    Здравствуйте! Спасибо за эту статью и за полезный сайт! Очень хорошо объяснили, кратко и лаконично, вопрос подключения аудиофайлов к ссылкам. У меня сайт по изучению языка, есть идея сделать диалоги, при наведении мыши на фразы человек будет слышать, как они звучат. Буду пробовать Ваш способ. Спасибо большое!

    1. dimadv7

      Здравствуйте. И вам спасибо, что читаете :)

  3. Light

    Большое спасибо, всё работает.
    Подскажите, а как сделать, чтобы на разных кнопках воспроизводились разные звуки?

    1. dimadv7

      Несколько раз подключать, или, возможно, написать какой-то скрипт.

  4. Light

    А можете пример написать? Я пробовал наугад тыкать - у меня один звук для всех кнопок получается - другие не привязываются.Просто я никакой в скриптах... (((

    1. dimadv7

      Отправил на почту :)

  5. Михаил

    А как сделать, чтобы при наведении на кнопку и при убирании курсора с нее, раздавались разные звуки?

    1. dimadv7

      Здравствуй, я не в курсе, не разбирался с этим вопросом. Наверное нужно вешать js функцию реагирующее на это событие.

  6. Михаил

    А желательно, чтобы еще и при нажатии.

  7. Михаил

    Почему-то в исходнике не работает звук.

    1. dimadv7

      А ты попробуй на сервере протестировать. Работает?

  8. Василий

    Дмитрий Здравствуйте!
    делаю сайт и решил поставить звук на кнопки тут вышел на вашу статью
    которая мне очень помогла за что вам большое спасибо )
    только остался вопрос как прописать разные звуки на ссылки ?
    у вас уже спрашивали здесь но вы ответили на почту

    если не затруднит не могли бы вы и мне ответить на этот вопрос? за ранее спасибо большое

    1. dimadv7

      Здравствуйте, в исходнике сейчас лежит пример, с разными звуками на ссылках. Может быть не самое красивое решение, но оно работает, только тестируйте на сервере, а то не будет работать, если просто открыть индексный файл в браузере.

    2. Василий

      Спасибо Вам
      Чалом бью )

  9. Андрей

    Здравствуйте! Спасибо большое за статью, но не могли бы Вы подсказать мне? Есть меню в верхней части сайта:

    <a href="$HOME_PAGE_LINK$" rel="nofollow">Главная</a> 
     <a href="#" rel="nofollow">Статьи</a>
     <a href="#" rel="nofollow">Блог</a>
     <a href="#" rel="nofollow">Галерея</a>
     <a href="#" rel="nofollow">О сайте</a>
     <a href="#" rel="nofollow">Контакты</a>
     <a href="#" rel="nofollow">Дизайн</a>
     <a href="#" rel="nofollow">Портфолио</a> 
    

    Куда что писать, чтобы при наведении был звук?
    сайт maximeb.at.ua

    1. dimadv7

      В статье же исходник есть, как раз с несколькими ссылками...

  10. люба

    исходник ваш не воспроизводит звук

    1. dimadv7

      Читайте комментарий выше, уже отвечал на такую "Жалобу"! Тестируйте на сервере.

  11. Олег

    Добрый вечер ! А вы могли бы мне помочь запихнуть звуки щелчка в меню на сайт wix ? Можем договорится!

    1. dimadv7

      Я не работал с wix, и не знаю, вообще ли возможно там такое.

  12. Анатолий

    dimadv7, Доброе время суток! Очень нравятся ваши статьи, очень много полезного нашел здесь для себя, как и в этой статье! Работаю с Платформой ЛП, подскажите пожалуйста, как можно было бы реализовать на ней этот скрипт? Очень бы хотелось научиться применять адаптивность по времени суток и воспроизводить звук при наведении на кнопки или ссылки. Спасибо и успехов в делах!

    1. dimadv7

      Анатолий, здравствуйте, спасибо. Но к сожалению, не могу помочь, так как сам с конструкторами не работаю, с ПлатформойЛП имел дело очень давно, когда готовил статьи о конструкторах. Если у платформы есть возможность загружать свои скрипты и редактировать разметку, тогда по статье сделать можно, а если нет, то нет. Собственно из-за подобных ограничений и не работаю с конструкторами.

  13. Сергей

    Спасибо все работает.
    Только вначале не понимал, почему при нажатии не воспроизводился звук, оказалось, что нужно прописать [0] после селлектора.

  14. тим

    хотелось бы что бы звук пропадал при убирании курсора

  15. ксения

    Еще бы понять где взять звуки, может есть какие то хорошие источники?

  16. Vitaliy Alekhin

    "...курсора на чылку...."

Добавить комментарий