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

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

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

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

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

<script src='https://cdnjs.cloudflare.com/ajax/libs/tone/0.8.0/Tone.min.js'></script>

Разметка:

<button class="button">Boop Me</button>

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

.button {
  border: none;
  position: fixed;
  top: calc(50% - 22px);
  left: calc(50% - 82px);
  width: 150px;
  text-align: center;
  background-color: #00f0a8;
  height: 45px;
  line-height: 42px;
  padding: 0 30px;
  font-size: 20px;
  border-radius: 30px;
  color: #282d32;
  cursor: pointer;
  outline: 0;
}
.button:hover {
  transform: scale(1.1, 1.1);
}

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

var button = document.querySelector('.button');

function setupSynth() {
  window.synth = new Tone.Synth({
    oscillator: {
      type: 'sine',
      modulationFrequency: 0.5
    },
    envelope: {
      attack: 0,
      decay: 0.2,
      sustain: 0,
      release: 0.5,
    }
  }).toMaster();
}

function boopMe() {
  if (!window.synth) {
    setupSynth();
  }
  
  window.synth.triggerAttackRelease(600, '9n');
}

button.addEventListener('touchstart', function(e) {
  e.stopPropagation();
  e.preventDefault();
  boopMe();
});
button.addEventListener('mousedown', boopMe);

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