OfflineAudioContext: phương thức startRendering()

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.

Phương thức startRendering() của giao diện OfflineAudioContext bắt đầu render đồ thị âm thanh, có tính đến các kết nối hiện tại và các thay đổi đã được lên lịch.

Sự kiện complete (có kiểu OfflineAudioCompletionEvent) được phát ra khi render kết thúc, chứa AudioBuffer kết quả trong thuộc tính renderedBuffer của nó.

Các trình duyệt hiện hỗ trợ hai phiên bản của phương thức startRendering(), một phiên bản cũ dựa trên sự kiện và một phiên bản mới hơn dựa trên promise. Phiên bản cũ cuối cùng sẽ bị xóa, nhưng hiện tại cả hai cơ chế đều được cung cấp vì lý do kế thừa.

Cú pháp

js
startRendering()

Tham số

Không có.

Giá trị trả về

Một Promise được thực hiện với một AudioBuffer.

Ví dụ

Phát âm thanh với một offline audio context

Trong ví dụ này, chúng ta khai báo cả một đối tượng AudioContext và một đối tượng OfflineAudioContext. Chúng ta sử dụng AudioContext để tải một track âm thanh bằng fetch(), sau đó sử dụng OfflineAudioContext để render âm thanh vào một AudioBufferSourceNode và phát track. Sau khi đồ thị âm thanh offline được thiết lập, chúng ta render nó thành một AudioBuffer bằng OfflineAudioContext.startRendering().

Khi promise startRendering() được giải quyết, quá trình render đã hoàn thành và AudioBuffer đầu ra được trả về từ promise.

Tại thời điểm này, chúng ta tạo một audio context khác, tạo một AudioBufferSourceNode bên trong nó và đặt buffer của nó bằng với promise AudioBuffer. Sau đó nó được phát như một phần của đồ thị âm thanh tiêu chuẩn đơn giản.

js
// Define both online and offline audio contexts
let audioCtx; // Must be initialized after a user interaction
const offlineCtx = new OfflineAudioContext(2, 44100 * 40, 44100);

// Define constants for dom nodes
const play = document.querySelector("#play");

function getData() {
  // Fetch an audio track, decode it and stick it in a buffer.
  // Then we put the buffer into the source and can play it.
  fetch("viper.ogg")
    .then((response) => response.arrayBuffer())
    .then((downloadedBuffer) => audioCtx.decodeAudioData(downloadedBuffer))
    .then((decodedBuffer) => {
      console.log("File downloaded successfully.");
      const source = new AudioBufferSourceNode(offlineCtx, {
        buffer: decodedBuffer,
      });
      source.connect(offlineCtx.destination);
      return source.start();
    })
    .then(() => offlineCtx.startRendering())
    .then((renderedBuffer) => {
      console.log("Rendering completed successfully.");
      play.disabled = false;
      const song = new AudioBufferSourceNode(audioCtx, {
        buffer: renderedBuffer,
      });
      song.connect(audioCtx.destination);

      // Start the song
      song.start();
    })
    .catch((err) => {
      console.error(`Error encountered: ${err}`);
    });
}

// Activate the play button
play.onclick = () => {
  play.disabled = true;
  // We can initialize the context as the user clicked.
  audioCtx = new AudioContext();

  // Fetch the data and start the song
  getData();
};

Thông số kỹ thuật

Thông số kỹ thuật
Web Audio API
# dom-offlineaudiocontext-startrendering

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

Xem thêm