質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.46%
Web Audio

Web Audioは、音声を処理・合成するためのWebアプリケーション向けJavaScript APIです。HTML5から導入されました。オーディオソースの選択、エフェクト・ビジュアライゼーションの追加、パンニングなど特殊効果の適用など多くの機能を持ちます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

308閲覧

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

momonga_

総合スコア1

Web Audio

Web Audioは、音声を処理・合成するためのWebアプリケーション向けJavaScript APIです。HTML5から導入されました。オーディオソースの選択、エフェクト・ビジュアライゼーションの追加、パンニングなど特殊効果の適用など多くの機能を持ちます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2024/01/02 16:11

編集2024/01/03 02:26

実現したいこと

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等で検索した
  • ソースコードを自分なりに変更した
  • 知人に聞いた
  • その他
上記の詳細・結果

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

補足

特になし

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

int32_t

2024/01/04 03:50

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

2024/01/04 04:10

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

回答1

0

ベストアンサー

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 }

https://developer.mozilla.org/ja/docs/Web/API/AnalyserNode/getByteFrequencyData

配列の各項目は、固有の周波数のデシベル値を表します。周波数はサンプルレートの 0 から 1/2 まで直線的に広がります。例えば、サンプルレートが 48000 の場合、配列の最後の項目は 24000 Hz のデシベル値を表します。

また、既にお気づきかもしれませんが、mp3 データがローカルファイルだと CORS 制限により MediaElementAudioSourceNode は動作しません。HTMLとmp3データを同じウェブサーバからロードする必要があります。

投稿2024/01/04 04:09

編集2024/01/04 05:26
int32_t

総合スコア21074

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

momonga_

2024/01/04 18:21

ありがとうございます。 仰る通りで、取ってくる値が違ったがために上手く値が導出できていませんでした。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問