Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development
Code

API веб-аудио: добавление звука в веб-приложение

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called The Web Audio API.
The Web Audio API: What Is It?
The Web Audio API: Make Your Own Web Synthesizer

Russian (Pусский) translation by Masha Kolesnikova (you can also view the original English article)

Что случилось с аудио в Интернете? Какое-то время сеть была платформой, чтобы продемонстрировать ваш вкус в мелодиях. Из MIDI-версий The Final Countdown, пузырящихся в фоновом режиме, для автовоспроизведения MySpace mp3, которые были выброшены вам в лицо, звук был повсюду.

Но сейчас все не так. Теперь веб-разработчики держатся подальше от этого всего. К сожалению, звук переместился на заднее место в Интернете, в то время как нативные приложения процветают.

Подумайте о том, что звук уведомления слышен при получении электронной почты или небольшой поп, когда вы пытаетесь обновить приложение Twitter. Такие приложения показывают, как звук может быть неотъемлемой частью большого пользовательского интерфейса.

В этом уроке я покажу вам, как вернуть звук в Интернет, в хорошем смысле этого слова!

API веб-аудио

Web Audio API - это мощный, высокопроизводительный способ манипулирования звуком в браузере. Прежде чем продолжить этот учебник, вы можете проверить предыдущий учебник в этой серии, где я рассказал о том, как сделать базовый звук с помощью JavaScript, а также воспроизвести mp3-файл.

Для этого урока мы собираемся сделать макет страницы оплаты, которая дает нам обратную связь, что наш платеж будет успешным. Я буду использовать Bootstrap, чтобы все выглядело лучше.

Вы заметите, что в самом низу я включил файл с именем «success-sound.js». Здесь мы напишем наш код, чтобы предоставить аудиоотчет для пользователя, когда их платеж будет успешным. Создав этот файл, первое, что мы хотим сделать, это создать AudioContext. Вы можете вспомнить из последнего учебника, что AudioContext - это то, как мы обращаемся к различным функциям API веб-аудио.

var context = new AudioContext();

Осцилляторы

Одна из лучших вещей в Web Audio API заключается в том, что она позволяет создавать звуки с нуля, даже не глядя на аудиофайл. Мы делаем это с помощью осцилляторов.

Осцилляторы - это способ создания тона, который мы слышим. Они делают это, создавая периодическую волну с определенной частотой. Форма этой волны меняется, но наиболее распространенными типами являются синусоидальные, квадратные, треугольные и пилообразные волны. Эти типы волн звучат иначе. Давайте создадим два осциллятора треугольной волны.

Осцилляторы довольно громкие по умолчанию, поэтому, если мы не хотим, чтобы наши пользователи испугались, мы должны немного уменьшить звук. Поскольку API веб-аудио работает, объединяя узлы вместе, чтобы проиграть звук, мы создаем и подключаем наши генераторы к GainNode.

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

Давайте все подключим.

Затем проверьте, что мы сделали всё правильно, играя осцилляторы в течение двух секунд.

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

Осцилляторы, которые мы создали, играют по умолчанию на определенной частоте. Изменяя эту частоту, мы можем изменить музыкальную ноту, которую вы слышите, когда она воспроизводится. Это то, что сделает наш тон немного более приятным и ключом к ощущению, которое вы хотите вызвать, когда ваш пользователь его слышит. Давайте изменим наш осциллятор, чтобы проиграть отметку «B4», которая составляет 493,883 Гц.

Теперь, если мы перезагрузим страницу, вы услышите тон на другой высоте. На этот момент вы можете подумать: «Почему мы проигрывем два осциллятора с одинаковой высотой?» Ну, это приводит нас к небольшому трюку, который мы можем сделать, чтобы звук нашего тона был немного приятнее.

Если мы отфильтруем наши осцилляторы, чтобы их частоты были немного разными, мы получим хороший эффект хоруса, делая наш звук намного богаче.

Хотя наш маленький звук звучит намного лучше, он заканчивается довольно резко. Чтобы сделать его менее резким, мы должны быстро отменить громкость в конце звука; это также известно как «затухание». Это делается с помощью AudioParams, которые используются для автоматизации значений аудиоузлов, таких как усиление и частота. Мы перейдем к AudioParams более подробно в следующем учебнике этой серии.

Мы хотим здесь убедиться, что громкость составляет 0,1, 0,05 секунды, прежде чем наш тон закончится. Затем продолжайте уменьшать громкость до тех пор, пока она не достигнет нуля, в то же время наш тон заканчивается.

Давайте соберем наш код в одну функцию и посмотрим, что у нас есть.

Чтобы сделать эту функцию немного более мощной, я удалил некоторые из переменных и разрешил передавать эти значения. Это позволяет нам играть разные ноты на разных частотах. Теперь пришло время проявить творческий подход!

Успешное выполнение

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

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

Ах, сладкий звук успеха.

Помните, что если осцилляторы вам не по душе, вы всегда можете использовать mp3-файл. Прочитайте предыдущий учебник, чтобы узнать, как это сделать.

Лучше всего обернуть эти два вызова playNote в один вызов функции, чтобы у нас был легкий хук для воспроизведения нашего звука.

Теперь вам решать, как вы хотите вызвать этот звук и какое событие вы хотите сыграть в ответ. Для целей данного руководства. давайте подделаем вызов Ajax, который занимает три секунды. Мы будем использовать это, чтобы сделать вид, что происходит транзакция на стороне сервера.

Все, что нам нужно сделать, это добавить слушателя событию в нашу кнопку «Купить сейчас».

Нажмите кнопку, подождите три секунды, а затем танцуйте и ликуйте, когда услышите звуковое подтверждение того, что ваша транзакция прошла успешно.

Можно изменить текст на кнопке, чтобы визуально показать, что что-то произошло, Bootstrap предоставляет некоторые вспомогательные функции кнопок для замены в тексте, указанном в атрибуте data. То как это работает, выходит за рамки данной статьи, но вот код для полноты картины.

Надеюсь, вы нашли этот учебник полезным. Код для этого учебника есть на GitHub, а также демоверсия нашего финального звука. Следующий учебник этой серии предназначен для тех из вас, кто поймал ошибку осциллятора; мы будем создавать веб-аудио синтезатор.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.