Звук клика по кнопке при помощи 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(); }); }); Не забываем, что кнопка идет, это как показатель, где вы можете добавить его к любому другому элементу, если хотите. Это может быть логотип или ключевое слово, которое установлено под ссылкой для перехода. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 4 | |
Не знаю зачем такой код писать когда можно использовать да и проше будет на любую ссылку или кнопку картинку ну и тд! вешаем онклик
Код onclick="new Audio('ССЫЛКА НА МЕЛОДИЮ').play(); return false;" при таком раскладе перехода не будет а что бы оставить возможность перейти по ссылки то используем такой код Код onclick="new Audio('ССЫЛКА НА МЕЛОДИЮ').play();" ну и конечно же не забываем заменить слова ссылка на мелодию на ссылку на мелодию  | |
