ZorNet.Ru — сайт для вебмастера » HTML и CSS » Звуковые эффекты при клике на ссылку

Звуковые эффекты при клике на ссылку

Звуковые эффекты при клике на ссылку
Вероятно многие встречали звуковое сопровождение при клике на кнопку или ссылку, что находится на сайте, где есть много вариантов для установки. Давайте разберем самый простой и вероятно самый популярный вариант, где вы самостоятельно ставите ссылку для открытия страницы или перехода. Но в нее прописываем звуковой файл, чтоб автоматически происходило звучание, которое примерно будет идти доли секунды.

Вообще как поймете, что где выставлять, далее будет все зависит от вашей фантазии, где можно применить такую вариацию. Многие веб разработчики изначально не ставят, так как считают, что звуки могут раздражать, где многим такой подход может не понравится. Что по мне, то все безусловно зависит от самого музыкального сопровождение, но если вы конный ржач, то здесь явно будет не по себе.

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

Приступаем к установке:

Этот чистая ссылка, что можно выставить под кнопку, где эффект звучание остается.

Здесь не прописываем переход, что можно подключить под функционал.

HTML
Код
<a href="#" onclick="new Audio('http://zornet.ru/ABVUN/Anisa/oops.mp3').play(); return false;">ССЫЛКА</a>

Вот эта ссылка уже представлена c перехода на другую страницу.

HTML
Код
<a href="http://zornet.ru/" onclick="new Audio('http://zornet.ru/ABVUN/Anisa/oops.mp3').play();">ССЫЛКА</a>

Для того, чтоб изменить звуковой сигнал, то меняем его, за это отвечает mp3 файл.

PS - несколько файлов звучание прикреплены к материалу, что есть возможность скачать.

Источник: Talantlev.net
Демонстрация
12 Декабря 2018 Загрузок: 4 Просмотров: 2011 Комментариев: (9)

Поделиться в социальных сетях

Материал разместил

Оставь свой отзыв

Комментарии: 9
Kosten
Kosten 12 Декабря 2018 01:541
0
В интернете нашел аналогичную тему, только с двумя разными функциями, но главное понять не могу, как можно установить, так как понимаю, нужно папку создавать и в не файлы заливать. Но на официальном сайте не чего не нашел.

Вот demo https://codepen.io/kocsten/pen/zyxpXE

Офф-сайт https://loudlinks.rocks/
Webmaster32
Webmaster32 12 Декабря 2018 09:342
0
Файл скрипта заливается в папку js которая находится в корне сайта, также в корне сайта создаётся папка sounds с вложеной в неё подпапкой mp3 в итоге должен получиться путь http://vash_site/sounds/mp3/file.mp3
Kosten
Kosten 12 Декабря 2018 14:173
0
Надо попробовать, то все в одну папку заливал. Думаю название папки здесь не причем.
Kosten
Kosten 12 Декабря 2018 14:554
0
Webmaster32, у меня к вам просьба будет, это создать тему нв форуме в разделе - Начинающему вебмастеру - просто не чего не понимаю. Сделайте пожалуйста с описанием, как все делать и куда заливать. а просто не сдаюсь, реально 2 вечера гадал. как можно сделать. не чего не получилось.

Саму тему нашел здесь atuin.ru/blog/zvukovye-effekty-pri-klike-ili-navedenii/

Оф сайт выше.

Можете кратко описать, как поставить и залить на сайт, все по полочкам.
Webmaster32
Webmaster32 12 Декабря 2018 15:265
0
В течение дня сделаю тему, и попробую сделать тестовую страницу
Kosten
Kosten 12 Декабря 2018 15:386
0
Круто было бы, то кажется понимаю как делать, как начинаю все выстраивать, но не чего не выходит, не звука и пика.)))
Kosten
Kosten 12 Декабря 2018 18:397
0
Также есть тема на форуме, где идет эффект клика, плюс музыкальное сопровождение, только сделано под кнопки.

Форум: http://zornet.ru/forum/123-7677-1
Nikas
Nikas 19 Декабря 2018 14:538
+2
можно еще так сделать:

Код
<a href="#" onclick="play()">ССЫЛКА</a>


Код
<script>function play() {document.getElementById("wave").innerHTML = "<audio src=\"/SD/zvuk_ochenki_kommentovmsg_in.mp3\" autoplay></audio>"}</script><span id="wave"></span>
Kosten
Kosten 19 Декабря 2018 15:499
0
Nikas, можете объяснить, как так можно сделать, ссылка ниже. Там материал рабочий, но хотелось, чтоб веб мастер ставил на свои ссылки.

Два варианта.

Ссылка: http://zornet.ru/forum/123-7679-1
avatar