Thay đổi thiết bị đầu ra đích trong Web Audio

François Beaufort
François Beaufort
GitHub

Cho đến nay, bạn chỉ có thể thiết lập thiết bị đầu ra âm thanh đích cho <video> và <audio> bằng HTMLMediaElement.setSinkId(). Trong Web Audio, AudioContext sử dụng thiết bị mặc định, để người dùng thay đổi thiết bị đầu ra âm thanh của hệ thống theo cách thủ công.

Kể từ Chrome 110, bạn có thể sử dụng AudioContext.setSinkId() để định hướng đầu ra âm thanh trong Web Audio đến bất kỳ thiết bị nào được phép theo phương thức lập trình.

Điều này đặc biệt hữu ích trong nhiều tình huống giao tiếp theo thời gian thực. Ví dụ: một ứng dụng web có thể sử dụng thông tin này để định hướng đầu ra theo phương thức lập trình đến một thiết bị đầu ra âm thanh cụ thể, chẳng hạn như tai nghe Bluetooth hoặc loa điện thoại.

Chuyển hướng đầu ra âm thanh đến một thiết bị cụ thể

Trước tiên, bạn cần có giá trị nhận dạng của thiết bị đầu ra âm thanh mà bạn muốn dùng làm đích đến. Lấy danh sách các thiết bị đa phương tiện có sẵn bằng navigator.mediaDevices.enumerateDevices(), chỉ lọc trên các thiết bị đầu ra âm thanh và lấy thuộc tính deviceId của thiết bị đầu ra âm thanh mà bạn chọn. Bạn cũng có thể dùng giá trị "" chuỗi trống làm thiết bị mặc định cho deviceId.

Sau khi bạn có giá trị nhận dạng của thiết bị đầu ra âm thanh, hãy tạo một AudioContext và gọi audioContext.setSinkId(deviceId). Nếu thành công, lời hứa được trả về sẽ giải quyết khi âm thanh được định tuyến đến thiết bị đầu ra đã kết nối đã chọn. Quá trình này có thể không thành công nếu AudioContext bị đóng.

Ví dụ bên dưới cho bạn biết cách yêu cầu quyền truy cập vào micrô (nếu cần) và chuyển hướng đầu ra âm thanh trong Web Audio đến thiết bị đầu ra có sẵn đầu tiên.

const permission = await navigator.permissions.query({ name: "microphone" });
if (permission.state == "prompt") {
  // More audio outputs are available when user grants access to the mic.
  const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
  stream.getTracks().forEach((track) => track.stop());
}

// Request a list of media devices and filter audio output devices.
const devices = await navigator.mediaDevices.enumerateDevices();
const audioOutputs = devices.filter(device => device.kind == "audiooutput");

const audioContext = new AudioContext();

// Pick the first available audio output.
const deviceId = audioOutputs[0].deviceId;
await audioContext.setSinkId(deviceId);

Xin lưu ý rằng bạn cũng có thể truyền deviceId dưới dạng tham số sinkId khi tạo AudioContext.

const audioContext = new AudioContext({ sinkId: deviceId });

Kết xuất âm thanh bằng AudioContext bị tắt tiếng

Giờ đây, bạn có thể chỉ định "thiết bị đầu ra không âm thanh" trong Web Audio để giảm thiểu mức tiêu thụ điện năng. Lần này, thay vì giá trị chuỗi, hãy truyền { type: "none" } đến AudioContext.setSinkId().

Xin lưu ý rằng đồng hồ âm thanh có thể truy cập thông qua audioContext.currentTime vẫn sẽ tiến hành kết xuất biểu đồ âm thanh. Mục tiêu chính của AudioContext bị tắt tiếng này là hiển thị biểu đồ âm thanh mà không tạo ra âm thanh nghe được. Trường hợp sử dụng chính là phân tích dữ liệu đầu vào của micrô mà không tạo ra âm thanh.

// Silent Web Audio output.
await audioContext.setSinkId({ type: "none" });

Phát hiện tính năng

Để kiểm tra xem AudioContext.setSinkId() có được hỗ trợ hay không, hãy sử dụng:

if ("setSinkId" in AudioContext.prototype) {
  // AudioContext.setSinkId() is supported.
}

Mẫu

Bạn có thể xem bản minh hoạ tại https://sinkid.glitch.me/ để chơi với AudioContext.setSinkId().

Hỗ trợ trình duyệt

AudioContext.setSinkId() có trong Chrome 110 trở lên.

Phản hồi

Nhóm Chrome và cộng đồng tiêu chuẩn web muốn biết trải nghiệm của bạn với AudioContext.setSinkId(). Vui lòng gửi ý kiến phản hồi bằng cách bình luận về các vấn đề trên GitHub hiện có hoặc gửi vấn đề mới.

Lời cảm ơn

Cảm ơn Hongchan Choi và Michael Wilson đã xem xét bài viết này.

Ảnh trong lịch do Steve Harvey chụp trên Unsplash.