С помощью 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
Отображение подключений к AudioParams является новым в Firefox 34.
Соединения между узлами отображаются сплошными линиями. Если вместо этого вы подключили узел к AudioParam в другом узле, то соединение будет показано пунктирной линией между узлами и будет помечено именем AudioParam:
Проверка и изменение AudioNodes
Если вы нажмете на узел, он подсветится, и вы получите инспектор узла справа. В этом списке перечислены значения свойств AudioParam этого узла. Например, вот как выглядит OscillatorNode:
В демоверсии Viplent, параметр частоты изменяется когда пользователь перемещает мышь влево и вправо, и вы можете увидеть это, отраженное в инспекторе узлов. Однако значение не обновляется в реальном времени: вам нужно снова щелкнуть узел, чтобы увидеть обновленное значение.
Если вы щелкнете значение в инспекторе узлов, вы можете изменить его: нажмите Enter или Tab и новое значение вступит в силу немедленно.
Обход узлов
Новое в Firefox 38.
В панели, которая показывает детали узла, есть кнопка включения / выключения:
Нажмите на него, и график будет изменен для обхода этого узла, поэтому он больше не будет иметь никакого эффекта. Узлы, которые обойдены, показаны заштрихованным фоном:
