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

() translation by (you can also view the original English article)

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

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

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

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

API веб-аудио

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

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

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <title>Add sound to your web app</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <h1>My shop</h1>
                    <p>Are you ready to buy this item?</p>
                    <form action="">
                        <div class="form-group">
                            <label>Name on card</label>
                            <input type="text" class="form-control" value="Guybrush Threepwood" />
                        </div>
                        <div class="form-group">
                            <label>Card number</label>
                            <input type="text" class="form-control" value="1234-1234-1234-1234" />
                        </div>
                    </form>
                    <button id="buy-now-button" type="button" class="btn btn-primary"
                        data-loading-text="Processing..." data-complete-text="Success!">Buy now</button>
                </div>
            </div>
        </div>

        <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
        
        <script src="scripts/success-sound.js"></script>
    </body>
</html>

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

var context = new AudioContext();

Осцилляторы

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

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

var osc1 = context.createOscillator(),
    osc2 = context.createOscillator();
    
osc1.type = 'triangle';
osc2.type = 'triangle';

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

1	var volume = context.createGain();
2
3	volume.gain.value = 0.1;

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

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

// Connect oscillators to the GainNode
osc1.connect(volume);
osc2.connect(volume);

// Connect GainNode to the speakers
volume.connect(context.destination);

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

// How long to play oscillator for (in seconds)
var duration = 2;

// When to start playing the oscillators
var startTime = context.currentTime;

// Start the oscillators
osc1.start(startTime);
osc2.start(startTime);

// Stop the oscillators 2 seconds from now
osc1.stop(startTime + duration);
osc1.stop(startTime + duration);

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

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

1	var frequency = 493.883;
2
3	osc1.frequency.value = frequency;
4	osc2.frequency.value = frequency;

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

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

1	var frequency = 493.883;
2
3	osc1.frequency.value = frequency + 1;
4	osc2.frequency.value = frequency - 2;

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

// Set the volume to be 0.1 just before the end of the tone
volume.gain.setValueAtTime(0.1, startTime + duration - 0.05);

// Make the volume ramp down to zero 0.1 seconds after the end of the tone
volume.gain.linearRampToValueAtTime(0, startTime + duration);

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

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

// Play oscillators at certain frequency and for a certain time
var playNote = function (frequency, startTime, duration) {
    var osc1 = context.createOscillator(),
        osc2 = context.createOscillator(),
        volume = context.createGain();

    // Set oscillator wave type
    osc1.type = 'triangle';
    osc2.type = 'triangle';

    volume.gain.value = 0.1;    

    // Set up node routing
    osc1.connect(volume);
    osc2.connect(volume);
    volume.connect(context.destination);

    // Detune oscillators for chorus effect
    osc1.frequency.value = frequency + 1;
    osc2.frequency.value = frequency - 2;

    // Fade out
    volume.gain.setValueAtTime(0.1, startTime + duration - 0.05);
    volume.gain.linearRampToValueAtTime(0, startTime + duration);

    // Start oscillators
    osc1.start(startTime);
    osc2.start(startTime);

    // Stop oscillators
    osc1.stop(startTime + duration);
    osc2.stop(startTime + duration);
};

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

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

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

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

// Play a 'B' now that lasts for 0.116 seconds
playNote(493.883, context.currentTime, 0.116);

// Play an 'E' just as the previous note finishes, that lasts for 0.232 seconds
playNote(659.255, context.currentTime + 0.116, 0.232);

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

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

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

var playSuccessSound = function () {
    // Play a 'B' now that lasts for 0.116 seconds
    playNote(493.883, context.currentTime, 0.116);

    // Play an 'E' just as the previous note finishes, that lasts for 0.232 seconds
    playNote(659.255, context.currentTime + 0.116, 0.232);
};

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

var myFakeAjaxCall = function (callback) {
    setTimeout(function () {
        callback();
    }, 3000);
};

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

$('#buy-now-button').click(function () {
    myFakeAjaxCall(function () {
        playSuccessSound();
    });
});

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

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

$('#buy-now-button').click(function () {
    var that = this,
        $btn = $(this).button('loading');

    myFakeAjaxCall(function () {
        playSuccessSound();
        $btn.button('complete');
    });
});

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