Response: phương thức arrayBuffer()

Baseline Widely available

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

Note: This feature is available in Web Workers.

Phương thức arrayBuffer() của giao diện Response nhận một luồng Response và đọc nó cho đến khi hoàn tất. Phương thức này trả về một promise được giải quyết bằng một ArrayBuffer.

Cú pháp

arrayBuffer()

Giá trị trả về

Một promise được giải quyết bằng một ArrayBuffer.

Ngoại lệ

AbortError DOMException

Yêu cầu đã bị hủy.

TypeError

Được ném ra vì một trong các lý do sau:

Phần thân phản hồi đã bị xáo trộn hoặc khóa.
Đã xảy ra lỗi khi giải mã nội dung phần thân, ví dụ vì header Content-Encoding không đúng.

RangeError

Được ném ra nếu có vấn đề khi tạo ArrayBuffer liên kết, ví dụ nếu kích thước dữ liệu quá lớn.

Trong fetch array buffer live của chúng tôi, có một nút Play. Khi nút được nhấn, hàm getData() sẽ chạy. Lưu ý rằng trước khi phát, toàn bộ tệp âm thanh sẽ được tải xuống. Nếu bạn cần phát ogg trong khi đang tải xuống (phát luồng) thì hãy cân nhắc dùng HTMLAudioElement:

new Audio("music.ogg").play();

Trong getData(), chúng ta tạo một yêu cầu mới bằng bộ khởi tạo Request(), rồi dùng nó để tìm nạp một bản nhạc OGG. Chúng ta cũng dùng AudioContext.createBufferSource để tạo một nguồn bộ đệm âm thanh. Khi việc tìm nạp thành công, chúng ta đọc một ArrayBuffer từ phản hồi bằng arrayBuffer(), giải mã dữ liệu âm thanh bằng AudioContext.decodeAudioData(), đặt dữ liệu đã giải mã làm bộ đệm của nguồn âm thanh (source.buffer), rồi kết nối nguồn với AudioContext.destination.

Sau khi getData() chạy xong, chúng ta bắt đầu phát nguồn âm thanh bằng start(0), rồi vô hiệu hóa nút play để nó không thể được bấm lại khi đang phát (việc đó sẽ gây lỗi.)

function getData() {
  const audioCtx = new AudioContext();

  return fetch("viper.ogg")
    .then((response) => {
      if (!response.ok) {
        throw new Error(`HTTP error, status = ${response.status}`);
      }
      return response.arrayBuffer();
    })
    .then((buffer) => audioCtx.decodeAudioData(buffer))
    .then((decodedData) => {
      const source = new AudioBufferSourceNode(audioCtx);
      source.buffer = decodedData;
      source.connect(audioCtx.destination);
      return source;
    });
}

// Gắn các nút để dừng và phát âm thanh

play.onclick = () => {
  getData().then((source) => {
    source.start(0);
    play.setAttribute("disabled", "disabled");
  });
};

Đọc tệp

Bộ khởi tạo Response() chấp nhận File và Blob, nên có thể dùng nó để đọc một File sang các định dạng khác.

html

<input type="file" />

function readFile(file) {
  return new Response(file).arrayBuffer();
}

document
  .querySelector("input[type=file]")
  .addEventListener("change", (event) => {
    const file = event.target.files[0];
    const buffer = readFile(file);
  });