Подключите пользовательский интерфейс аудиоплеера к AudioContext.destination - PullRequest
Новая
       18

Подключите пользовательский интерфейс аудиоплеера к AudioContext.destination

0 голосов
/ 15 апреля 2019

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

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

1 Ответ

0 голосов
/ 23 апреля 2019

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

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

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

const audioContext = new AudioContext();

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

const oscillatorNode = new OscillatorNode(audioContext);

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

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

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

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. В случае введенного выше oscillatorNode это будет выглядеть так: 

oscillatorNode.connect(destinationGainNode);

С этим прокси вы можете управлять громкостью, используя gain AudioParam destinationGainNode. Чтобы отключить сигнал вызова ... 

destinationGainNode.gain.value = 0;

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

destinationGainNode.gain.value = 1;

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

Обратите внимание, что во всех примерах используется последний синтаксис API Web Audio, который еще не доступен в Edge и Safari. Чтобы получить примеры, работающие в этих браузерах, необходим полифилл. Конечно, я рекомендую standard-audio-context , поскольку я являюсь автором этого пакета. : -)

...