Блог

Существуют различные компоненты ReactJS, которые предоставляют пользовательский интерфейс для управления воспроизведением звука. Большинство из них предполагают, что вы укажете пути к аудиофайлам. Как я могу вместо этого указать пользовательскому интерфейсу управлять воспроизведением звука узла AudioContext.destination?

Аудиоконтекст будет иметь различные источники и промежуточные узлы. Я хочу, чтобы компонент пользовательского интерфейса предоставлял информацию (текущее положение во времени; состояние громкости) и управление (воспроизведение / пауза; громкость, отключение звука) пользователю, соответственно, в AudioContext.

К сожалению, нет простого способа сопоставить транспортные функции AudioElement с AudioContext, но, конечно, есть некоторые сходства.

Я не использую никакой реакции в следующих примерах, но, надеюсь, будет довольно просто обернуть фрагменты кода в компонент, который может использоваться выбранной вами фреймворком интерфейса.

Допустим, у вас есть экземпляр AudioContext.

 const audioContext = new AudioContext();
 

В этом случае audioContext используется только для воспроизведения простой непрерывной синусоидальной волны с помощью OscillatorNode.

 const oscillatorNode = new OscillatorNode(audioContext);

oscillatorNode.start();
oscillatorNode.connect(audioContext.destination);
 

Конечно, oscillatorNode можно было бы остановить вызов oscillatorNode.stop() , но это oscillatorNode сделало бы бесполезным. Его нельзя запустить снова. Вам также придется сделать это для каждого OscillatorNode в случае, если их несколько.

Но есть способ приостановить весь аудиоконтекст, приостановив его.

 audioContext.suspend();
 

Это вернет обещание, которое разрешается при приостановке AudioContext. Чтобы снова запустить AudioContext, вы можете использовать его resume() метод.

 audioContext.resume();
 

Точно так же, как suspend() метод resume() возвращает обещание, которое разрешается при повторном запуске контекста.

В дополнение к этому AudioContext также обладает state свойством, которое можно использовать, чтобы узнать, является ли audioContext это 'running' , 'suspended' или 'closed' .

Управление громкостью всего аудиоконтекста немного сложнее. У каждого AudioContext есть назначение, которое является AudioNode, к которому все должно быть подключено. Но назначение не позволяет изменять громкость. Я думаю, что самый простой способ получить эту функциональность — использовать дополнительный GainNode в качестве прокси.

 const destinationGainNode = new GainNode(audioContext);

destinationGainNode.connect(audioContext.destination);
 

Затем вы должны убедиться, что вы подключили все к destinationGainNode instead . В случае oscillatorNode представленного выше, это будет выглядеть так:

 oscillatorNode.connect(destinationGainNode);
 

С помощью этого прокси-сервера вы можете управлять громкостью с помощью gain аудиопараметра destinationGainNode . Для отключения сигнала вызова …

 destinationGainNode.gain.value = 0;
 

… и чтобы включить его снова, просто вызовите…

 destinationGainNode.gain.value = 1;
 

Я надеюсь, что это поможет создать компонент React для управления AudioContext.

Пожалуйста, обратите внимание, что во всех примерах используется новейший синтаксис Web Audio API, который еще недоступен в Edge и Safari. Чтобы заставить примеры работать в этих браузерах, требуется полизаполнение. Я, конечно, рекомендую standardized-audio-context, поскольку я являюсь автором этого пакета. 🙂