звук при клике по кнопке

Делаем простой звук клика по кнопке с помощью JavaScript и CSS3

Приводим Вам простой пример воспроизведения небольшой звуковой дорожки при клике на определенный элемент на странице. С помощью JavaScript. С использованием небольшой библиотеки.

Занимаясь frontend-разработкой у Вас может появиться потребность реализовать звуковой сопровождение какого-либо UI элемента. Будь то кнопка, или всплывающее окно с характерным появлением. В общем, задача весьма распространенная. Разумеется, первое что Вы найдете в поиске, будут варианты реализации на jQuery. Но jQuery – это тяжелая библиотека и Ваш сайт может вовсе ее не использовать. Предлагаем Вам универсальное решение в несколько строк кода и мини-плагина Tone.js:

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

Подключаем плагин Tone.js (ссылка на библиотеку):

Разметка:

Добавим стилей:

И наконец, обработчик:

Сначала ищем элемент с классом button, определяем параметры плагина Tone.js. Строка type: ‘sine’ отвечает за звук. Поэкспериментировать со звуками Вы можете взяв их со страницы примеров плагина. Т.е. просто замените значения параметра type на любой другой звук из документации.

649 просмотров
В поисках шаблона для сайта?