- Проигрывание звука при наведении на ссылку
- Как воспроизвести звук при наведении курсора на чылку
- 27 комментариев
- Html звук при наведении
- Эффекты блочного раскрытия
- 15 полезных .htaccess сниппета для сайта на WordPress
- 20 бесплатных тем для WordPress в стиле Material Design
- 20 сайтов с креативным MouseOver эффектом
- 45+ бесплатных материалов для веб дизайнеров за август 2016
- Звуковые эффекты при клике или наведении
- Наведите на иконку
- Нажмите на иконку
- Смотрите также:
- Добавить комментарий:
- Комментарии:
- Html звук при наведении
- Html звук при наведении
- Как выбрать хороший хостинг для своего сайта?
- Как разместить свой сайт на хостинге? Правильно выбранный хороший хостинг — это будущее Ваших сайтов
- Разработка веб-сайтов с помощью онлайн платформы Wrike
- Почему WordPress лучше чем Joomla ?
- Про шаблоны WordPress
- Анимация набора текста на jQuery
- Самые первые настройки после установки движка WordPress
Проигрывание звука при наведении на ссылку
Добрый день, друзья. Сегодня решил разобраться с таким интересным эффектом, как проигрывание звука при наведении курсора на ссылку, картинку или другой элемент вашего landing page. Все ограничивается только вашей фантазией.
На многих форумах говорят, что этого делать не надо, что это всех раздражает и никому не нравится. Я считаю, что в некоторых случаях это довольно органично вписывается в общую концепцию сайта и смотрится (слушается) довольно интересно 🙂 Например, как на этом сайте.
В любом случае, всегда будут люди, которое гневно критикуют этот эффект, и всегда будут говорить, что это раздражает пользователя. Но в тоже время найдутся и те, которые давно хотели добавить звук при наведении на пункты меню. Относитесь ли вы к одним или к другим, а узнать, как работает данный эффект в вашей нише помогут только АБ тесты. Давайте приступим.
Как воспроизвести звук при наведении курсора на чылку
Первым делом подключаем библиотеку jquery:
Теперь разберемся с разметкой. Для реализации эффекта будем использовать тег Нам понадобятся далеко не все его свойства. Подробнее о нем поговорим в другой раз, он очень похож на тег video. Итак.
Теперь, для того, чтобы звук воспроизводился при наведении на ссылку при наведении на него курсора мыши, нам нужно воспользоваться небольшим скриптом:
Можете расположить его ближе к футеру, а в исходнике я вынес его во внешний файл и подключил его в конце страницы.
Аналогичным образом можно задать воспроизведения звука при наведении на пункты меню, да и вообще — на все ссылки.
В исходном файле я положил несколько разных звуков щелчка, для того, чтобы у вас был небольшой выбор. Вообще, желательно, чтобы длительность аудио файла была не больше секунды, тогда все происходит корректно и звук издается вовремя. Если вам удастся найти подобные звуки, скиньте пожалуйста в социальные сети или на почту, и я их добавлю в статью.
27 комментариев
Здравствуйте. Спасибо за полезные статьи!Очень надеюсь, что вы не забросите данный сайт! Буду следить за новостями)
Так же на страничке есть опечатка в ссылке, в тексте: « Например, как на этом сайте.» Ссылка на сайт с опечаткой. Но это не критика, а в поддержку работоспособности вашей статьи!) Удачи вам.
Здравствуйте! Спасибо за эту статью и за полезный сайт! Очень хорошо объяснили, кратко и лаконично, вопрос подключения аудиофайлов к ссылкам. У меня сайт по изучению языка, есть идея сделать диалоги, при наведении мыши на фразы человек будет слышать, как они звучат. Буду пробовать Ваш способ. Спасибо большое!
Большое спасибо, всё работает.
Подскажите, а как сделать, чтобы на разных кнопках воспроизводились разные звуки?
Html звук при наведении
Частная коллекция качественных материалов для тех, кто делает сайты
- Creativo.one2000+ уроков по фотошопу
- Фото-монстр300+ уроков для фотографов
- Видео-смайл200+ уроков по видеообработке
- Жизнь в стиле «Кайдзен» Техники и приемы для гармоничной и сбалансированной жизни
В этой рубрике Вы найдете уроки, посвященные полезным скриптам для Вашего сайта, которые призваны улучшить его функциональность.
Эффекты блочного раскрытия
Сегодня мы хотели бы поделиться несколькими идеями касающегося эффекта блочного раскрытия, которую вы можете использовать для своих проектов.
15 полезных .htaccess сниппета для сайта на WordPress
Если вы хотите существенно повысить уровень безопасности вашего сайта на WordPress, то вам не избежать конфигурации файла .htaccess. Это позволит не только уберечься от целого ряда хакерских атак, но и организовать перенаправления, а также решить задачи связанные с кэшем.
20 бесплатных тем для WordPress в стиле Material Design
Material Design — это набирающий обороты тренд от Google. В данной подборке собраны бесплатные темы для WordPress, выполненные в этом популярном стиле.
20 сайтов с креативным MouseOver эффектом
Эффекты на то и существуют чтобы впечатлять наших посетителей. В этой подборке собрано несколько десятков ресурсов, чьи создатели очень постарались впечатлить своих посетителей.
Создан: 13 Февраля 2017 Просмотров: 12103 Комментариев: 0
45+ бесплатных материалов для веб дизайнеров за август 2016
Под конец месяца предлагаем ознакомиться с набором бесплатных материалов для веб дизайнеров за прошедший месяц.
Звуковые эффекты при клике или наведении
Данный скрипт весит всего 1.5 кб и позволяет легко добавлять звуки взаимодействия с элементами.
Примеры:
Наведите на иконку
Нажмите на иконку
Установка:
Подключаем скрипт loudlinks.min.js в конце страницы.
Применение:
На нужный нам тег добавляем класс loud-link-hover для проигрывания звука при наведении и loud-link-click при клике
Далее в этот тег добавляем дата атрибут
Где sound это название mp3 и/или ogg файла
Звуковые файлы sound.mp3 и sound.ogg находятся в корневой папке folder
- Опубликовано: 14.11.2018 / Обновлено: 13.09.2020
- Рубрики: Фото, аудио и видео
- Метки: JavaScript, Аудио
- 14839 просмотров
Смотрите также:
Сетка из шестиугольников на CSS
Адаптивная сетка из шестиугольников для фотогалереи или кратких информационных блоков
Галерея фотографий из ромбиков на CSS
Сетка для галереи фотографий в виде ромбиков.
Анимированный эффект смены фотографий на JS
Красивая смена фоновых изображений по клику с использованием WebGL
Добавить комментарий:
Комментарии:
при наведение сразу не срабативат пока не кликнеш потом работает вот ошибка Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause()
Точно не уверен, но скорее всего это браузеры ставят ограничения.
У меня в хроме и мозиле все норм (правда не помню, делал ли я какие доп. разрешения для него).
Если мы запускаем музыку по ховеру, то можно открыть страницу ночью и без вашего клика оно заорет.
Уж не знаю, на сколько это нужно, вы можете кликнуть в никуда и оно все равно заорет, но гугл орал по этому поводу вроде, что мол нехорошо запускаться медийкам автоматом.
Здравствуйте!
Прошу привести пример когда сработает if ( audioSrc.indexOf(‘>’) > 0 ):
точнее сказать каким будет audioSrc при этом?
Не могу понять.
Скрипт смешного «позабавимся 🙂 » работает по наведению только после любого клика. Покажите пожалуйста где этот первый клик обрабатывается в коде. Все обыскал.
Это скорее всего браузер блокирует. У меня и в хроме и лисе нормально ховер работает.
Поищите в инете как обойти блокировку «воспроизведение треков без ведома юзера»
Это хорошо, значит скрипт не при чем :). Правда, кроме Edge у меня все остальные 4 браузера работают только с первым кликом. В принципе, пустяк, можно разок и кликнуть.
Вопрос напрямую к статье не относится, лишь косвенно, но чувствую что автор в теме.
Вопрос: можно ли задать окончание проигрывания кусочка в файле, начало можно, это как я понял «currentTime»? Есть ли такой параметр для конца проигрывания(не всего файла, а кусочка)?
А для чего такие сложности?
Данный скрипт просто создает аудио тег при нажатии или ховере и запускает его.
currentTime нужна для стопа
Саша, приветик! всё работает, но выводит такую ошибку в консоль: Uncaught (in promise) DOMException У тебя кстати тоже. Это неопасно ? Юзаю Хром, последняя версия
Непойманные обещания переводится ваша ошибка 🙂
А как говорил мой дед — Работает — не трогай!
А как мой прадед — не опасно 🙂
Хаха))) Ладно ладно)) Кстати, это происходит потому что как бы что-то, в общем хроме авто-воспроизведение треков без ведома юзера нечто такое что является ошибкой)) Данное явление при ховер, при клике ничего. Ну в в принципе да)) Работает — не трогай)) Это верно)) Спасибо за прекрасный скрипт!
Здравствуйте у меня не получается.Вот код:
Дело в том что я хочу вставить свой звук,например мелодию.
