ホーム>Web デザインのチュートリアル>WEB標準化

AudioContext はオーディオ視覚化を実装します

著者：Eve Cole 更新時間：2024-12-18 17:57:19

オーディオの視覚化を実現し、優れた効果を実現するには、Web Audio API が提供するいくつかのメソッド AudioContext を使用する必要があります。

AudioContextインターフェイスは、相互にリンクされたオーディオ モジュールから構築されたオーディオ処理グラフを表し、各モジュールはAudioNodeによって表されます。オーディオ コンテキストは、それに含まれるノードの作成とオーディオ処理またはデコードの実行を制御します。 すべてはコンテキスト内で発生するため、他の作業を行う前にAudioContextオブジェクトを作成する必要があります。毎回新しい AudioContext オブジェクトを初期化するのではなく、 AudioContextオブジェクトを作成して再利用し、複数の異なるオーディオ ソースとパイプに対して同時にAudioContextオブジェクトを使用することをお勧めします。

1. audioタグとcanvasタグを準備する

<audio class="audio" ref='audio' :src='tune' @ended='ended'></audio>

<canvas ref='canvas' width='300px' height='300px'></canvas>

2. 新しい AudioContext オブジェクトを作成して返します。

 const ctx = 新しい AudioContext();

3. 新しい MediaElementAudioSourceNode オブジェクトを作成します

AudioContextインターフェイスのcreateMediaElementSource()メソッドを使用して、新しいMediaElementAudioSourceNodeオブジェクトを作成し、既存の HTML<audio>or<video>` 要素を入力すると、対応するオーディオを再生または変更できます。

 const audioSrc = ctx.createMediaElementSource(this.audioElement);

4. AnalyserNode オブジェクトの作成

AudioContextのcreateAnalyser()メソッドは、オーディオの時間と周波数のデータを取得し、データの視覚化を実装するために使用できるAnalyserNodeを作成できます。

 const アナライザー = ctx.createAnalyser();

5. fftSize 属性を設定します

AnalyserNodeインターフェイスの fftSize 属性の値は、(信号) サンプルのウィンドウ サイズを表す符号なし長整数値です。これらの (信号) サンプルは、高速フーリエ変換 (FFT) を実行するときに周波数領域データを取得するために使用されます。 fftSize属性の値は、32 ～ 32768 の範囲の 0 以外の 2 のべき乗である必要があります。デフォルト値は 2048 です。

アナライザー.fftサイズ = 512;

6. audioSrcとアナライザーをリンクする

AudioNodeインターフェイスのconnect()メソッドを使用すると、ノードの出力を指定されたターゲットに接続できます。この指定されたターゲットは、別の AudioNode (オーディオ データを次の指定されたノードに送信する) または AudioParam であるため、前のノードが接続されます。出力データは、時間の経過とともに次のパラメータ値を自動的に変更できます。

 audioSrc.connect(アナライザー);

7. リンクアナライザーとctx.destination

AudioContextのdestinationプロパティは、 context内のすべてのオーディオ (ノード) の最終宛先ノードを表すAudioDestinationNodeを返します。これは通常、スピーカーなどのオーディオ レンダリング デバイスです。

アナライザー.connect(ctx.destination)

8. 曲が再生中です

Uint8Array配列型は 8 ビット符号なし整数配列を表し、作成時に内容は 0 に初期化されます。作成後、配列内の要素はオブジェクトとして、または配列の添字インデックスを使用して参照できます。

AnalyserNodeインターフェイスのgetByteFrequencyData() 方現在の周波数データを受信Uint8Array (符号なしバイト配列) にコピーします。

配列の長さがAnalyserNode.frequencyBinCountより小さい場合、 Analyserの余分な要素は削除されます。それより大きい場合、配列の余分な要素は無視されます。

視覚化（） {

const arr = new Uint8Array(this.analyser.frequencyBinCount);

this.analyser.getByteFrequencyData(arr);

this.draw(arr);

}、

9. キャンバスを使用してオーディオ マップを描画する

HTMLCanvasElement.getContext()メソッドはcanvasコンテキストを返します。コンテキストが定義されていない場合は null を返し、CanvasRenderingContext2D 2 次元レンダリング コンテキストを作成します。

 this.canvas = this.$refs.canvas.getContext('2d');draw(arr) { Canvas.clearRect(0, 0, document.body.clientWidth, this.canvasHeight); .clientWidth / 2) - ((arr.length / 2) * 3)); arr.forEach((項目, インデックス) => { this.canvas.beginPath(); this.canvas.drawingStyle = '#B2AFF4'; this.canvas.moveTo(start + (index * 4), this.canvasHeight); lineTo(start + (index * 4), this.canvasHeight - item / 2);}

エフェクト表示：

これで、オーディオ ビジュアライゼーション用のAudioContext (Web テクノロジ共有) に関する記事は終わります。オーディオ ビジュアライゼーション用の AudioContext の詳細については、downcodes.com で以前の記事を検索するか、以下の関連記事を引き続き参照してください。 . ダウンコード.comをサポート！

関連記事