ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Звук клика по кнопке при помощи JavaScript

Звук клика по кнопке при помощи JavaScript

Звук клика по кнопке при помощи JavaScript
Вашему вниманию интересное решение, как звуковой сигнал по клику кнопки, которое создано с помощью javascript, а также HTML + CSS для оформления. В данном мануале вы подробно узнаете, это как создать Javascript Audio Play, что производится по клику по правой стороне мыши. Сам звук получается глухой, но здесь завесит от самого веб мастера, какой он хочет слышать, ведь в JS установлена ссылка, что и выдает этот оригинальный звук вмести с кликом в одно время при нажатии.

Рассматривая структура, а точнее создание данного образование, как звук, то здесь основном всю работу берет JavaScript, где подводим к нему класс, который идет от HTML и аналогичным способом прописан в CSS, это для того, чтоб сформировать небольшой эффект, как изменение оттенка. Так как стандартная кнопка, где нет совершенно не какого оформление, по мне это лучше, так как здесь присутствует звучание, которое вы можете проверить на Demo странице.

Как воспроизвести звук при нажатии кнопки на HTML + CSS


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

HTML

Код
<button class="kauvec_adelon">КЛИК И ЗВУЧАНИЕ</button>

CSS

Код
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400&display=swap");

.kauvec_adelon {
  font-family: 'Open Sans', sans-serif;
  font-size: 2rem;
  color: #e9dfdf;
  background: #16a90c;
  padding: 1.2rem 2.6rem;
  border-radius: 0.2rem;
  transition: opacity .3s;
}

.kauvec_adelon:hover {
  cursor: pointer;
  background: #0b460a;
}

JS

Код
const audio = new Audio("https://www.fesliyanstudios.com/play-mp3/387");
const buttons = document.querySelectorAll(".kauvec_adelon");

buttons.forEach(button => {
  button.addEventListener("click", () => {
  audio.play();
  });
});

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

Демонстрация
2022-08-05 Загрузок: 1 Просмотров: 188 Комментарий: (4)

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

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

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

Комментарий: 4
waak
waak 2022-08-06 14:351
0
Не знаю зачем такой код писать когда можно использовать да и проше будет на любую ссылку или кнопку картинку ну и тд! вешаем онклик

Код
onclick="new Audio('ССЫЛКА НА МЕЛОДИЮ').play(); return false;"


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

Код
onclick="new Audio('ССЫЛКА НА МЕЛОДИЮ').play();"


ну и конечно же не забываем заменить слова ссылка на мелодию на ссылку на мелодию 11a
Kosten
Kosten 2022-08-06 20:412
0
waak, я забыл, что у тебя есть что то по круче и так сказать проще. Хотя когда есть выбор, это тоже хорошо.
-SAM-
-SAM- 2022-08-07 04:043
0
Здесь не равнозначный выбор. В данном случае при клике на каждую кнопку (с заданым классом) цепляется как раз отдельный скрипт в тело документа страницы (с прописанным путём на аудио-композицию в переменную). Тогда как в предложенном waak - функция прописана сразу к элементу (при клике на который будет играть нужная мелодия, отдельная для каждого).
Kosten
Kosten 2022-08-07 04:204
+1
Но это понятно, так как в скрипте размещена одна ссылка, но как пример можно сделать под клик, и разместить в низ или вверх сайта, чтоб полностью сайт и все страницы были задействованы.
avatar