Приводим Вам простой пример воспроизведения небольшой звуковой дорожки при клике на определенный элемент на странице. С помощью 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 на любой другой звук из документации.