BaseAudioContext: createDynamicsCompressor() メソッド

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.

createDynamicsCompressor()BaseAudioContext インターフェイスのメソッドで、 DynamicsCompressorNode を生成します。これで、音声信号に圧縮をかけることができます。

圧縮は、信号の最も大きな部分の音量を下げ、最も小さな部分の音量を上げます。全体として、より大きく、より豊かで、充実したサウンドを実現することができます。特に、ゲームや音楽など、多数の音を同時に再生するアプリケーションでは、全体の信号レベルを制御し、音声出力のクリッピング(歪み)を回避するのに役立つので、重要です。

メモ: DynamicsCompressorNode() コンストラクターは DynamicsCompressorNode を作成するための推奨される方法です。 AudioNode の作成を参照してください。

構文

js
createDynamicsCompressor()

引数

なし。

返値

以下のコードは、音声トラックに圧縮を加えるための createDynamicsCompressor() の簡単な使用法を示しています。より完全な例としては、基本的なコンプレッサーの例ソースコードを閲覧)をご覧ください。

js
// MediaElementAudioSourceNode を生成する
// そこに HTMLMediaElement を入れる
const source = audioCtx.createMediaElementSource(myAudio);

// コンプレッサーノードを生成する
const compressor = audioCtx.createDynamicsCompressor();
compressor.threshold.setValueAtTime(-50, audioCtx.currentTime);
compressor.knee.setValueAtTime(40, audioCtx.currentTime);
compressor.ratio.setValueAtTime(12, audioCtx.currentTime);
compressor.attack.setValueAtTime(0, audioCtx.currentTime);
compressor.release.setValueAtTime(0.25, audioCtx.currentTime);

// AudioBufferSourceNode を出力先につなげる
source.connect(audioCtx.destination);

button.onclick = () => {
  const active = button.getAttribute("data-active");
  if (active === "false") {
    button.setAttribute("data-active", "true");
    button.textContent = "Remove compression";

    source.disconnect(audioCtx.destination);
    source.connect(compressor);
    compressor.connect(audioCtx.destination);
  } else if (active === "true") {
    button.setAttribute("data-active", "false");
    button.textContent = "Add compression";

    source.disconnect(compressor);
    compressor.disconnect(audioCtx.destination);
    source.connect(audioCtx.destination);
  }
};

仕様書

Specification
Web Audio API
# dom-baseaudiocontext-createdynamicscompressor

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
createDynamicsCompressor

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報