AudioWorkletProcessor

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.

Giao diện AudioWorkletProcessor của Web Audio API biểu diễn mã xử lý âm thanh đứng sau một AudioWorkletNode tùy chỉnh. Nó tồn tại trong AudioWorkletGlobalScope và chạy trên luồng kết xuất của Web Audio. Ngược lại, một AudioWorkletNode dựa trên nó sẽ chạy trên luồng chính.

Hàm khởi tạo

Note: Không thể khởi tạo trực tiếp AudioWorkletProcessor và các lớp kế thừa từ nó từ mã do người dùng cung cấp. Thay vào đó, chúng chỉ được tạo nội bộ khi một AudioWorkletNode liên kết được tạo ra. Hàm khởi tạo của lớp dẫn xuất được gọi với một đối tượng tùy chọn, nên bạn có thể thực hiện quy trình khởi tạo tùy chỉnh; xem trang hàm khởi tạo để biết chi tiết.

AudioWorkletProcessor()

Tạo một thể hiện mới của đối tượng AudioWorkletProcessor.

Thuộc tính thể hiện

port Read only

Trả về một MessagePort dùng cho giao tiếp hai chiều giữa bộ xử lý và AudioWorkletNode mà nó thuộc về. Đầu còn lại có sẵn qua thuộc tính port của nút.

Phương thức thể hiện

Giao diện AudioWorkletProcessor không tự định nghĩa phương thức nào. Tuy nhiên, bạn phải cung cấp phương thức process(), được gọi để xử lý luồng âm thanh.

Sự kiện

Giao diện AudioWorkletProcessor không phản hồi sự kiện nào.

Ghi chú sử dụng

Các lớp dẫn xuất

Để định nghĩa mã xử lý âm thanh tùy chỉnh, bạn phải tạo một lớp kế thừa từ giao diện AudioWorkletProcessor. Dù không được định nghĩa trên chính giao diện, lớp dẫn xuất bắt buộc phải có phương thức process. Phương thức này được gọi cho mỗi khối gồm 128 khung mẫu và nhận các mảng đầu vào, đầu ra cùng các giá trị đã tính của các AudioParam tùy chỉnh làm tham số nếu chúng được định nghĩa. Bạn có thể dùng đầu vào và các giá trị tham số âm thanh để điền vào mảng đầu ra, vốn mặc định chứa im lặng.

Ngoài ra, nếu muốn có các AudioParam tùy chỉnh trên nút của mình, bạn có thể cung cấp thuộc tính parameterDescriptors dưới dạng một getter tĩnh trên processor. Mảng các đối tượng dựa trên AudioParamDescriptor được trả về sẽ được dùng nội bộ để tạo các AudioParam trong quá trình khởi tạo AudioWorkletNode.

Các AudioParam thu được nằm trong thuộc tính parameters của nút và có thể được tự động hóa bằng các phương thức tiêu chuẩn như linearRampToValueAtTime. Các giá trị đã tính của chúng sẽ được truyền vào phương thức process() của processor để bạn điều chỉnh đầu ra của nút cho phù hợp.

Xử lý âm thanh

Một thuật toán mẫu để tạo cơ chế xử lý âm thanh tùy chỉnh là:

  1. Tạo một tệp riêng.
  2. Trong tệp đó:
    1. Mở rộng lớp AudioWorkletProcessor (xem phần "Các lớp dẫn xuất") và cung cấp phương thức process() của riêng bạn trong đó.
    2. Đăng ký processor bằng phương thức AudioWorkletGlobalScope.registerProcessor().
  3. Tải tệp bằng phương thức addModule() trên thuộc tính audioWorklet của ngữ cảnh âm thanh.
  4. Tạo một AudioWorkletNode dựa trên processor. Processor sẽ được khởi tạo nội bộ bởi hàm khởi tạo AudioWorkletNode.
  5. Kết nối nút với các nút khác.

Ví dụ

Trong ví dụ bên dưới, chúng ta tạo một AudioWorkletNode tùy chỉnh tạo ra nhiễu trắng.

Trước hết, chúng ta cần định nghĩa một AudioWorkletProcessor tùy chỉnh sẽ tạo ra nhiễu trắng và đăng ký nó. Lưu ý rằng việc này nên được thực hiện trong một tệp riêng.

js
// white-noise-processor.js
class WhiteNoiseProcessor extends AudioWorkletProcessor {
  process(inputs, outputs, parameters) {
    const output = outputs[0];
    output.forEach((channel) => {
      for (let i = 0; i < channel.length; i++) {
        channel[i] = Math.random() * 2 - 1;
      }
    });
    return true;
  }
}

registerProcessor("white-noise-processor", WhiteNoiseProcessor);

Tiếp theo, trong tệp script chính, chúng ta sẽ tải processor, tạo một thể hiện của AudioWorkletNode bằng cách truyền vào tên của processor, rồi kết nối nút đó với một đồ thị âm thanh.

js
const audioContext = new AudioContext();
await audioContext.audioWorklet.addModule("white-noise-processor.js");
const whiteNoiseNode = new AudioWorkletNode(
  audioContext,
  "white-noise-processor",
);
whiteNoiseNode.connect(audioContext.destination);

Thông số kỹ thuật

Thông số kỹ thuật
Web Audio API
# AudioWorkletProcessor

Tương thích trình duyệt

Xem thêm