Java, UX, HTML, CSS, WEB-design

Создание музыки в браузере: воссоздание терменвокса с помощью JS и веб-аудио API

Краткое описание по статье Создание музыки в браузере: воссоздание терменвокса с помощью JS и веб-аудио API

Название: Создание музыки в браузере: воссоздание терменвокса с помощью JS и веб-аудио API . Краткое описание: [ad_1] ⭐ Стюарт . Дата публикации: 03.02.2022 . Автор: Алишер Валеев .

Для чего создан сайт Novosti-Nedeli.ru

Данный сайт посвящен новостям мира и мира технологий . Также тут вы найдете руководства по различным девайсам.

Сколько лет сайту?

Возраст составляет 3 года

[ad_1]

  • Стюарт Мемо

  • 0 Комментарии

Создание музыки в браузере: воссоздание терменвокса с помощью JS и веб-аудио API

  • 11 минут чтения

  • Кодирование, CSS, JavaScript, веб-аудио

Краткое резюме ↬

Петроград, Россия, 1920 год. Глубоко в своей научной лаборатории молодой Леон Термен случайно замечает, что звук, исходящий от одного из его высокочастотных генераторов, меняет высоту звука, когда он двигает рукой. Популярная культура изменилась навсегда. Уникальный звук терменвокс идеально подходит для научно-фантастических саундтреков и Good Vibrations группы Beach Boys. Мир стал лучше. Большую часть века музыканты ждали подобной прорывной технологии, которая снова изменит то, как мы создаем музыку. Я рад сообщить, что он уже прибыл. Он называется API веб-аудио.

Петроград, Россия, 1920 год. Глубоко в своей научной лаборатории молодой Леон Термен случайно замечает, что звук, исходящий от одного из его высокочастотных генераторов, меняет высоту звука, когда он двигает рукой. Популярная культура изменилась навсегда. Уникальный звук терменвокс идеально подходит для научно-фантастических саундтреков и Good Vibrations группы Beach Boys. Мир стал лучше.

Большую часть века музыканты ждали подобной прорывной технологии, которая снова изменит то, как мы создаем музыку. Я рад сообщить, что он уже прибыл. Он называется API веб-аудио.

  • Рекомендации по дизайну со звуком
  • Как создать отзывчивую 8-битную драм-машину
  • Как улучшить рабочий процесс и снизить стресс с помощью звуков природы
  • Плейлисты Spotify для поддержки ваших сеансов кодирования и дизайна

Web Audio API — это высокоуровневый и высокопроизводительный способ создания звука и управления им в браузере. Верно, мы можем сделать звук в браузере без плагина или MP3 в поле зрения. Более того, я собираюсь показать вам, как воссоздать удивительное изобретение Леона Термена с помощью JavaScript.

Еще после прыжка! Продолжить чтение ниже ↓
Леон Термен демонстрирует Termenvox.
Леон Термен демонстрирует Termenvox. (Изображение предоставлено Викискладом)

API веб-аудио

В настоящее время API веб-аудио поддерживается во всех основных браузерах, кроме Internet Explorer, но в настоящее время это исправлено Microsoft Edge. Представьте себе электрогитариста. Они могут взять партию со своей гитары, подключить ее к педали эффектов, а затем подключить к усилителю. Эта концепция объединения элементов в цепочку является центральной для API.

Чтобы сделать звук, нам сначала понадобится простая веб-страница со ссылкой на файл JavaScript, что-то вроде этого:


<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>My Theremin</title>
    </head>
    <body>
        <h1>My Theremin</h1>
        <script src="https://www.smashingmagazine.com/2016/06/make-music-in-the-browser-with-a-web-audio-theremin/theremin.js"></script>
    </body>
</html>

Затем в theremin.js мы создадим AudioContext. Ан AudioContext это то, как мы получаем доступ к различным методам API веб-аудио. Нам также понадобится осциллятор, который генерирует непрерывный тон.

var context = new AudioContext(),
  oscillator = context.createOscillator();

Примечание. API веб-аудио по-прежнему имеет префикс в Safari 9.1, используя new webkitAudioContext() вместо new AudioContext().

Чтобы продолжить нашу аналогию с гитарой, нам нужно взять провод от осциллятора и подключить его к нашим динамикам. Это делается с помощью connect метод. Мы можем получить доступ к нашим динамикам, используя context.destination.

oscillator.connect(context.destination);

Теперь, когда все подключено, нам нужно запустить осциллятор для генерации тона. Это так же просто, как написать следующее:

oscillator.start(context.currentTime);

Вы можете видеть, что мы прошли context.currentTime здесь. Это означает, что мы говорим браузеру запустить осциллятор сейчас. Чтобы остановить это, мы просто говорим:

oscillator.stop(context.currentTime + 1);

Это остановит воспроизведение осциллятора через 1 секунду. Сохраните и откройте свою страницу в браузере, чтобы на секунду услышать прекрасный тон 440 Гц. Красивый.

Управление мышью

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

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

html, body {
  background: darkmagenta;
  height: 100%;
}

Далее мы добавим прослушиватели событий щелчка в body элемент:

document.body.addEventListener('mousedown', function () {
  // Mouse has been pressed
});

document.body.addEventListener('mouseup', function () {
  // Mouse has been released
});

Вы можете подумать: «Хорошо, давайте прикрепим start вызывать mousedownи stop в mouseup». Это немного сложнее, чем это. Осцилляторы по своей конструкции могут запускаться и останавливаться только один раз. Думайте о них как о каком-то странном звуковом фейерверке. Это на самом деле лучше для производительности, потому что это означает, что они не будут болтаться в памяти, ожидая использования, когда в них нет необходимости. К счастью, осцилляторы дешевы и просты в изготовлении, поэтому мы будем создавать их каждый раз, когда пользователь будет удерживать кнопку мыши.

var context = new AudioContext(),
  oscillator = null;

document.body.addEventListener('mousedown', function () {
  oscillator = context.createOscillator();
  oscillator.connect(context.destination);
  oscillator.start(context.currentTime);
});

document.body.addEventListener('mouseup', function () {
  oscillator.stop(context.currentTime);
  oscillator.disconnect();
});

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

Кроме того, на всякий случай мы должны проверить, действительно ли осциллятор был создан, прежде чем вызывать stop в теме. Имея mouseup мероприятие без mousedown предшествующее ему встречается редко, хорошей практикой программирования является проверка существования объекта перед выполнением над ним операций.

document.body.addEventListener('mouseup', function () {
  if (oscillator) {
      oscillator.stop(context.currentTime);
      oscillator.disconnect();
  }
});

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

Частота и высота тона

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

Сразу после строки, в которой мы создаем осциллятор, измените частоту следующим образом:

oscillator.frequency.value = 600;

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

Наш mousedown прослушиватель событий передает нам событие мыши в обратном вызове, который мы пометим e. Мы можем получить координату x из этого, используя clientX имущество.

document.body.addEventListener('mousedown', function (e) {
  console.log(e.clientX);
});

Итак, что нам нужно сделать, чтобы преобразовать эту координату в частоту, подходящую для терменвокса? Начнем с создания calculateFrequency функция, которая принимает координату x и возвращает частоту.

var calculateFrequency = function (mouseXPosition) {

};

Самая левая x-координата окна браузера равна 0, а самая правая координата — это ширина браузера в пикселях. Ничего не делая, это на самом деле довольно хороший диапазон. Диапазон человеческого слуха колеблется от 20 до 20 000 Гц, хотя неприятности начинаются уже при 2000 Гц, поэтому мы не хотим подниматься выше этого значения. Тем не менее, мы не можем использовать этот диапазон как есть, потому что это ограничило бы небольшие устройства воспроизведением низких нот на низких частотах. Вместо этого мы должны использовать отношение ширины от левой стороны экрана к тому месту, где происходит щелчок мышью.

Сначала мы устанавливаем минимальную и максимальную частоты.

var minFrequency = 20,
  maxFrequency = 2000;

Для расчета коэффициента делим mouseXPosition по ширине окна браузера. Затем, чтобы получить частоту, умножьте это соотношение на максимальную частоту. Это дает нам частоту от 0 до 2000 Гц. 0 Гц неслышно, поэтому мы просто добавим 20, чтобы превысить порог человеческого слуха.

var calculateFrequency = function (mouseXPosition) {
  var minFrequency = 20,
      maxFrequency = 2000;

  return ((mouseXPosition / window.innerWidth) * maxFrequency) + minFrequency;
};

Далее заменяем жестко запрограммированную частоту в нашем mousedown работать с этим:

oscillator.frequency.value = calculateFrequency(e.clientX);

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

oscillator.frequency.setTargetAtTime(calculateFrequency(e.clientX), context.currentTime, 0.01);

Здесь мы говорим о плавном переходе частоты генератора во времени. Первый параметр — это частота, на которую нужно изменить генератор, второй говорит, когда это сделать (сейчас), а третий — скорость, с которой он должен меняться. Для этого значения мы хотим, чтобы переход происходил быстро, поэтому подходит небольшое значение.

Попробуйте это в своем браузере, нажимая на разные области, чтобы услышать изменение высоты тона.

Отличительной чертой звучания терменвокса является то, как он скользит от ноты к ноте. Мы можем добиться того же самого эффекта, отслеживая положение мыши и обновляя частоту по мере ее движения. Мы будем использовать mousemove event и настройте прослушиватель таким же образом, как и другие. В нем мы установим частоту осциллятора, как и раньше.

document.body.addEventListener('mousemove', function (e) {
  oscillator.frequency.setTargetAtTime(calculateFrequency(e.clientX), context.currentTime, 0.01);
});

Однако этот код вызовет ошибку, поскольку mousemove сработает, даже если мышь не нажата. Это означает, что указанный здесь осциллятор может даже не существовать. Мы можем убедиться, что осциллятор активно принимает значения частоты, отслеживая, был ли щелчок мышью.

var context = new AudioContext(),
  mousedown = false,
  oscillator;

var calculateFrequency = function (mouseXPosition) {
  var minFrequency = 20,
      maxFrequency = 2000;

  return ((mouseXPosition / window.innerWidth) * maxFrequency) + minFrequency;
};

document.body.addEventListener('mousedown', function (e) {
  mousedown = true;
  oscillator = context.createOscillator();
  oscillator.frequency.setTargetAtTime(calculateFrequency(e.clientX), context.currentTime, 0.01);
  oscillator.connect(context.destination);
  oscillator.start(context.currentTime);
});

document.body.addEventListener('mouseup', function () {
  mousedown = false;
  oscillator.stop(context.currentTime);
  oscillator.disconnect();
});

document.body.addEventListener('mousemove', function (e) {
  if (mousedown) {
      oscillator.frequency.setTargetAtTime(calculateFrequency(e.clientX), context.currentTime, 0.01);
  }
});

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

Во-первых, нам нужно добавить gainNode. Помните аналогию с гитарой? Узел усиления — это простой эффект, который мы можем добавить в нашу цепочку, чтобы изменить громкость входящего сигнала. Мы создадим его вверху с другими нашими переменными.

var gainNode = context.createGain();

Теперь нам нужно добавить его в правильную позицию в нашей цепочке. Удалите линию, соединяющую осциллятор с context.destinationа на его место напишите следующее:

oscillator.connect(gainNode);
gainNode.connect(context.destination);

Здесь мы берем соединение от генератора с нашим узлом усиления, а затем подключаем его к нашим динамикам.

Далее продублируйте calculateFrequency функцию и переименуйте копию как calculateGain. Вместо этого эта функция примет y-позицию курсора в качестве своего единственного аргумента. И вместо минимальной и максимальной частоты эти значения будут представлять коэффициент усиления. Усиление — это значение, на которое вы хотите умножить громкость входящего сигнала. Итак, если вы установите усиление на 0,5, то это будет половина громкости нашего осциллятора. Мы не хотим, чтобы наш инструмент был громче, чем он уже есть, поэтому минимальное значение будет равно 0, а максимальное — 1. Последним изменением функции будет вычитание нашего расчета из 1. Это означает, что громкость станет громче. вверху экрана и тише внизу. Окончательная функция выглядит так:

var calculateGain = function (mouseYPosition) {
  var minGain = 0,
      maxGain = 1;

  return 1 - ((mouseYPosition / window.innerHeight) * maxGain) + minGain;
};

Здорово! Теперь все, что нам нужно сделать, это установить усиление при движении мыши. Снова продублируйте две строки, определяющие frequency.setTargetAtTime строки и обновите копию, чтобы она ссылалась на gainNode вместо. О, и не забудьте использовать y-позицию курсора.

gainNode.gain.setTargetAtTime(calculateGain(e.clientY), context.currentTime, 0.01);

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

Прекрасный. Леон Термен был бы горд — музыкальный инструмент в браузере без плагина в поле зрения.

В этом руководстве мы коснулись только API веб-аудио, но я надеюсь, что оно покажет вам, насколько просто и быстро можно запустить что-то музыкальное. Вы даже можете использовать методы, которые мы изучили здесь, чтобы сделать синтезатор. Я создал небольшую HTML-клавиатуру под названием Qwerty Hancock, чтобы помочь вам в этом. Не стесняйтесь хвастаться своим собственным творением в комментариях или пришли мне твит. Я бы хотел посмотреть, что ты делаешь.

Сокрушительная редакция
(рб, мл, ал, ил)



[ad_2]
Source: https://smashingmagazine.com

Заключение

Вы ознакомились с статьей — Создание музыки в браузере: воссоздание терменвокса с помощью JS и веб-аудио API

Пожалуйста оцените статью, и напишите комментарий.

Похожие статьи

Добавить комментарий

Ваш адрес email не будет опубликован.

Кнопка «Наверх»