AudioWorkletNode.port

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2021.

실험적: 이 기능은 실험적인 기능입니다.
프로덕션 환경에서 사용하기 전에 브라우저 호환성 표를 주의 깊게 확인하세요.

AudioWorkletNode 인터페이스의 읽기 전용 port 속성은 연관된 MessagePort를 반환합니다. 이것은 노드와 노드에 연관된 AudioWorkletProcessor 사이에서 소통하기 위해 사용될 수 있습니다.

참고: 채널의 다른 쪽 끝에 있는 포트는 프로세서의 port 속성 아래에서 사용 가능합니다.

구문

js
audioWorkletNodeInstance.port;

값

AudioWorkletNode 와 이것에 연관된 AudioWorkletProcessor를 연결하는 MessagePort 객체.

예제

양방향 소통 능력을 시연하기 위해서, 우리는 AudioWorkletProcessor 를 생성할 것인데, 이는 무음을 출력하고 이것의 AudioWorkletNode 으로부터의 핑 요청에 응답할 것입니다.

우선, 우리는 커스텀 AudioWorkletProcessor 를 정의하고, 등록할 필요가 있습니다. 이 작업은 별도의 파일에서 이루어져야 함에 주의하세요.

js
// ping-pong-processor.js
class PingPongProcessor extends AudioWorkletProcessor {
  constructor(...args) {
    super(...args);
    this.port.onmessage = (e) => {
      console.log(e.data);
      this.port.postMessage("pong");
    };
  }
  process(inputs, outputs, parameters) {
    return true;
  }
}

registerProcessor("ping-pong-processor", PingPongProcessor);

이제 메인 스크립트 파일에서 우리는 프로세서를 로드하고, 프로세서의 이름을 전달하며 AudioWorkletNode 의 인스턴스를 생성하고, 노드를 오디오 그래프에 연결할 것입니다.

js
const audioContext = new AudioContext();
await audioContext.audioWorklet.addModule("ping-pong-processor.js");
const pingPongNode = new AudioWorkletNode(audioContext, "ping-pong-processor");
// 매 초 AudioWorkletNode로부터
// AudioWorkletProcessor에 'ping' 문자열을 포함하는 메시지를 보냅니다
setInterval(() => pingPongNode.port.postMessage("ping"), 1000);
pingPongNode.port.onmessage = (e) => console.log(e.data);
pingPongNode.connect(audioContext.destination);

이것은 "ping" 과 "pong" 문자열을 콘솔에 매 초 출력할 것입니다.

명세

Specification
Web Audio API
# dom-audioworkletnode-port

브라우저 호환성

BCD tables only load in the browser

같이 보기