BaseAudioContext: phương thức decodeAudioData()
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 decodeAudioData() của BaseAudioContext
được dùng để giải mã bất đồng bộ dữ liệu tệp âm thanh chứa trong một
ArrayBuffer được tải từ fetch(),
XMLHttpRequest, hoặc FileReader. Đối tượng
AudioBuffer đã giải mã được lấy mẫu lại theo tốc độ lấy mẫu của
AudioContext, rồi được truyền cho callback hoặc promise.
Đây là phương thức được ưu tiên để tạo một nguồn âm thanh cho Web Audio API từ một track âm thanh. Phương thức này chỉ hoạt động với dữ liệu tệp hoàn chỉnh, không hoạt động với các mảnh dữ liệu của tệp âm thanh.
Hàm này triển khai hai cách thay thế nhau để trả về bất đồng bộ dữ liệu âm thanh hoặc thông báo lỗi: nó trả về một Promise được thực hiện với dữ liệu âm thanh, đồng thời cũng chấp nhận các đối số callback để xử lý thành công hoặc thất bại. Cách giao tiếp chính với hàm này là thông qua giá trị trả về Promise, còn các tham số callback được cung cấp vì lý do tương thích cũ.
Cú pháp
// Cú pháp dựa trên Promise trả về một Promise:
decodeAudioData(arrayBuffer)
// Cú pháp callback không có giá trị trả về:
decodeAudioData(arrayBuffer, successCallback)
decodeAudioData(arrayBuffer, successCallback, errorCallback)
Tham số
arrayBuffer-
Một ArrayBuffer chứa dữ liệu âm thanh cần giải mã, thường được lấy từ
fetch(),XMLHttpRequesthoặcFileReader. successCallbackOptional-
Một hàm callback sẽ được gọi khi quá trình giải mã hoàn tất thành công. Đối số duy nhất của callback này là một
AudioBufferbiểu diễn decodedData (dữ liệu âm thanh PCM đã giải mã). Thông thường bạn sẽ muốn đưa dữ liệu đã giải mã vào mộtAudioBufferSourceNode, từ đó nó có thể được phát và thao tác theo ý muốn. errorCallbackOptional-
Một callback lỗi tùy chọn, sẽ được gọi nếu xảy ra lỗi khi dữ liệu âm thanh đang được giải mã.
Giá trị trả về
Một đối tượng Promise được thực hiện với decodedData. Nếu bạn dùng cú pháp XHR thì bạn sẽ bỏ qua giá trị trả về này và sử dụng hàm callback thay vào đó.
Ví dụ
Trong phần này, trước hết chúng ta sẽ đề cập tới cú pháp dựa trên promise, sau đó là cú pháp callback.
Cú pháp dựa trên Promise
Trong ví dụ này, loadAudio() dùng fetch() để lấy một tệp âm thanh và giải mã nó thành một AudioBuffer. Sau đó nó lưu audioBuffer vào biến toàn cục buffer để phát lại về sau.
Note: Bạn có thể chạy ví dụ đầy đủ trực tiếp, hoặc xem mã nguồn.
let audioCtx;
let buffer;
let source;
async function loadAudio() {
try {
// Tải một tệp âm thanh
const response = await fetch("viper.mp3");
// Giải mã nó
buffer = await audioCtx.decodeAudioData(await response.arrayBuffer());
} catch (err) {
console.error(`Unable to fetch the audio file. Error: ${err.message}`);
}
}
Cú pháp callback
Trong ví dụ này, loadAudio() dùng fetch() để lấy một tệp âm thanh và giải mã nó thành một AudioBuffer bằng phiên bản dựa trên callback của decodeAudioData(). Trong callback, nó phát bộ đệm đã giải mã.
Note: Bạn có thể chạy ví dụ đầy đủ trực tiếp, hoặc xem mã nguồn.
let audioCtx;
let source;
function playBuffer(buffer) {
source = audioCtx.createBufferSource();
source.buffer = buffer;
source.connect(audioCtx.destination);
source.loop = true;
source.start();
}
async function loadAudio() {
try {
// Tải một tệp âm thanh
const response = await fetch("viper.mp3");
// Giải mã nó
audioCtx.decodeAudioData(await response.arrayBuffer(), playBuffer);
} catch (err) {
console.error(`Unable to fetch the audio file. Error: ${err.message}`);
}
}
Thông số kỹ thuật
| Specification |
|---|
| Web Audio API # dom-baseaudiocontext-decodeaudiodata |