Web Audio APIを用いて音の周波数を出したい

実現したいこと

Web Audio APIを用いてラの音を440Hzとする一般的な音程の周波数の取得、表示がしたいです。

現状

Web Audio APIを用いて指定されているmp4形式の音源を流しつつ分析して各周波数成分ごとの値の取得と基本的なグラフ表示はできました。その後、1番大きな値をもつ周波数成分の周波数を表示しようとしたところ想定通りの値が出なくて詰まっている状況です。div要素表示用配列の中に周波数成分の値が入っているかと思い表示させましたが同様の想定より少ない値が表示されました。また、画面に表示させるために周波数成分の値はどこかしらで取ってきているはずだと思い、配列や変数の中身を全て確認しましたが周波数になりそうな値が入っているものはありませんでした。そもそもフーリエ変換でなにをどう変換し値を取得しているのかが分からず、求める音程等に使われる周波数を取得できるのかすら分かっていない状況です。(公式サイトによると周波数は取得できるようですが、それが音程判別に使える周波数かは不明)

発生している問題・分からないこと

今の状態だと音声がなっていない状態でも周波数が8Hzほどと表示されてしまいます。
また、ピアノのドレミファソラシドの音階を音源として読み込ませても最大の周波数が9.6Hzほどと正確な値からは程遠い周波数で表示されてしまいます。
特にエラー等は表示されていないです。

該当のソースコード

html
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="UTF-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6    <meta name="color-scheme" content="dark" />
7  </head>
8  <body>
9    <div class="container"></div>
10    <audio src="sound/get.mp3" id="audio" loop controls></audio>
11    <div id="frequencyDisplay"></div>
12    <script src="./sctipt.js"></script>
13  </body>
14</html>
15

JavaScript
1/** フーリエ変換を行う分割数。2の乗数でなくてはならない */
2const FFT_SIZE = 256;
3
4// HTML要素
5const containerElement = document.querySelector(".container");
6const audioElement = document.querySelector("#audio");
7const frequencyDisplay = document.getElementById("frequencyDisplay");
8
9audioElement.addEventListener("play", init);
10
11// -------------------------------------
12// HTML要素の初期化
13// -------------------------------------
14
15/** @type {HTMLElement[]} */
16const boxes = [];
17// div要素の配置
18for (let i = 0; i < FFT_SIZE / 2; i++) {
19  const div = document.createElement("div");
20  div.classList.add("box");
21  containerElement.append(div);
22  boxes[i] = div;
23}
24
25/**
26 * サウンドを再生します
27 */
28function init() {
29  // --------------------------------
30  // アナライザーの設定を行います
31  // --------------------------------
32  const context = new AudioContext();
33
34  // アナライザーを生成
35  const nodeAnalyser = context.createAnalyser();
36  nodeAnalyser.fftSize = FFT_SIZE;
37  nodeAnalyser.smoothingTimeConstant = 0.85;
38  nodeAnalyser.connect(context.destination);
39
40  // audio 要素と紐付ける
41  const nodeSource = context.createMediaElementSource(audioElement);
42  nodeSource.connect(nodeAnalyser);
43
44  // --------------------------------
45  // 繰り返し処理
46  // --------------------------------
47  loop();
48
49  /** 描画します */
50  function loop() {
51    requestAnimationFrame(loop);
52
53    // 波形データを格納する配列の生成
54    const freqByteData = new Uint8Array(FFT_SIZE / 2);
55    nodeAnalyser.getByteFrequencyData(freqByteData);
56
57    // 高さの更新
58    for (let i = 0; i < freqByteData.length; i++) {
59      const freqSum = freqByteData[i];
60      const scale = freqSum / 256;
61      const div = boxes[i];
62      div.style.scale = `1 ${scale}`;
63    }
64
65    // 基本周波数を取得
66    const maxFrequencyIndex = freqByteData.indexOf(Math.max(...freqByteData));
67    const baseFrequency = getBaseFrequency(maxFrequencyIndex);
68
69    // 周波数情報を表示
70    frequencyDisplay.innerText = `基本周波数: ${baseFrequency}`;
71  }
72
73  /**
74   * 周波数のインデックスをもとに対応する音名を取得
75   * @param {number} index - 周波数のインデックス
76   * @returns {string} - 対応する音名
77   */
78  function getBaseFrequency(index) {
79    // ラの音（A4）を440Hzとした場合の音名を取得
80    const baseFrequencyA4 = 440;
81    const baseFrequencyIndexA4 = 69; // MIDIノート番号でのA4のインデックス
82    const frequencyRatio = Math.pow(2, 1 / 12); // 半音の周波数の比率
83
84    const baseFrequency = baseFrequencyA4 * Math.pow(frequencyRatio, index - baseFrequencyIndexA4);
85    return baseFrequency.toFixed(2) + " Hz";
86  }
87}

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

周波数成分の中で一番値の大きなもののことを基本周波数と呼ぶようでその値が一般的な音楽等で扱う音程の周波数のことだと知りました。
そのためその値を取得しようと公式ドキュメントやサイト等を見てみましたがうまくいかないです。

補足

特になし

int32_t

2024/01/04 03:50

HTML/JSとmp3はローカルファイルですか、それともウェブサーバ経由でアクセスしていますか。

momonga_

2024/01/04 04:10

全てローカルファイルでアクセスしています。

行動規範の内容に同意します

回答1件

ベストアンサー

getBaseFrequency() の実装が間違っていると思います。MIDIノート番号が出てくる理由がありません。

freqByteData の最後の要素がサンプリングレートの半分なので、以下のような計算じゃないでしょうか。

js
1  function getBaseFrequency(index) {
2    const baseFrequency = index * (context.sampleRate / 2) / (FFT_SIZE / 2 - 1);
3    return baseFrequency.toFixed(2) + " Hz";
4  }