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
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.
Note: Bạn có thể chạy ví dụ đầy đủ trực tiếp, hoặc xem mã nguồn.
// 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> |