Web аудио редактор

С помощью Web Audio API, разработчики создают аудиоконтекст. Затем в этом контексте они создают ряд audio nodes, включая:

• Узлы, предоставляющие источник звука, такие как генератор или источник буфера данных
• Узлы, выполняющие преобразования, такие как задержка и усиление
• Узлы, представляющие назначение аудиопотока, такие как динамики

Каждый узел имеет ноль или более свойств AudioParam которые настраивают его работу. Например GainNode имеет одно свойство усиления, в то время как OscillatorNode имеет частоту и свойства насстройки.

Разработчик соединяет узлы в виде графика, а полный граф определяет поведение аудиопотока.

Web Audio Editor исследует аудиоконтекст, созданный на странице, и обеспечивает визуализацию его графика. Это дает вам представление о его работе на высоком уровне и позволяет вам убедиться, что все узлы подключены так, как вы ожидаете. Затем вы можете изучить и отредактировать свойства AudioParam для каждого узла на графике. Некоторые свойства non-AudioParam, например свойство типа OscillatorNode, отображаются, и вы также можете их редактировать.

Этот инструмент все еще экспериментальный. Если вы найдете ошибки, мы будем рады, если вы отправите их в Bugzilla. Если у вас есть вопросы или предложения по новым функциям, ffdevtools.uservoice.com или Twitter отличные места для их регистрации.

Открытие веб-аудиоредактора

Web Audio Editor по умолчанию не включен в Firefox 32. Чтобы включить его, откройте Настройки инструмента разработчика и отметьте «Web Audio». Теперь на панели инструментов Toolbox должна быть дополнительная вкладка с надписью «Web Audio». Щелкните вкладку и загрузите страницу, которая создает звуковой контекст. Два хороших демки:

• Voice-change-O-Matic  может применять различные эффекты к входу микрофона, а также обеспечивает визуализацию результата
• Violent Theremin, изменяет высоту и громкость синусоидальной волны при перемещении указателя мыши

Визуализация графа

Теперь Web Audio Editor отобразит график загруженного аудиоконтекста. Вот график демоверсии The Violent:

Вы можете видеть, что он использует три узла: OscillatorNode в качестве источника, GainNode для управления томом и GainNode в качестве места назначения.

Подключения к AudioParams

Соединения между узлами отображаются сплошными линиями. Если вместо этого вы подключили узел к AudioParam в другом узле, то соединение будет показано пунктирной линией между узлами и будет помечено именем AudioParam:

Проверка и изменение AudioNodes

Если вы нажмете на узел, он подсветится, и вы получите инспектор узла справа. В этом списке перечислены значения свойств AudioParam этого узла. Например, вот как выглядит OscillatorNode:

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

Если вы щелкнете значение в инспекторе узлов, вы можете изменить его: нажмите Enter или Tab и новое значение вступит в силу немедленно.

Обход узлов

В панели, которая показывает детали узла, есть кнопка включения / выключения:

Нажмите на него, и график будет изменен для обхода этого узла, поэтому он больше не будет иметь никакого эффекта. Узлы, которые обойдены, показаны заштрихованным фоном: