BaseAudioContext: phương thức createStereoPanner()

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 createStereoPanner() của giao diện BaseAudioContext tạo ra một StereoPannerNode, có thể được dùng để áp dụng panning stereo cho một nguồn âm thanh. Nó định vị một luồng âm thanh đầu vào trong ảnh stereo bằng một thuật toán panning chi phí thấp.

Note: Hàm dựng StereoPannerNode() là cách được khuyến nghị để tạo một StereoPannerNode; xem Tạo một AudioNode.

Cú pháp

js
createStereoPanner()

Tham số

Không có.

Giá trị trả về

Một StereoPannerNode.

Ví dụ

Trong ví dụ StereoPannerNode của chúng tôi (xem mã nguồn), phần HTML có một phần tử <audio> đơn giản cùng một thanh trượt <input> để tăng và giảm giá trị pan. Trong phần JavaScript, chúng tôi tạo một MediaElementAudioSourceNode và một StereoPannerNode, rồi kết nối hai đối tượng này với nhau bằng phương thức connect(). Sau đó chúng tôi dùng trình xử lý sự kiện oninput để thay đổi giá trị của tham số StereoPannerNode.pan và cập nhật phần hiển thị giá trị pan khi thanh trượt được di chuyển.

Di chuyển thanh trượt sang trái và phải khi nhạc đang phát sẽ pan nhạc tương ứng sang loa trái và loa phải của đầu ra.

js
const audioCtx = new AudioContext();
const myAudio = document.querySelector("audio");

const panControl = document.querySelector(".panning-control");
const panValue = document.querySelector(".panning-value");

// Tạo một MediaElementAudioSourceNode
// Đưa HTMLMediaElement vào đó
const source = audioCtx.createMediaElementSource(myAudio);

// Tạo một stereo panner
const panNode = audioCtx.createStereoPanner();

// Hàm xử lý sự kiện để tăng panning sang phải và trái
// khi thanh trượt được di chuyển

panControl.oninput = () => {
  panNode.pan.setValueAtTime(panControl.value, audioCtx.currentTime);
  panValue.textContent = panControl.value;
};

// kết nối MediaElementAudioSourceNode với panNode
// và panNode với đích, để chúng ta có thể phát
// nhạc và điều chỉnh panning bằng các điều khiển
source.connect(panNode);
panNode.connect(audioCtx.destination);

Thông số kỹ thuật

Specification
Web Audio API
# dom-baseaudiocontext-createstereopanner

Khả năng tương thích với trình duyệt

Xem thêm