オーディオビジュアライザーは、サウンドを動きに変換します。ミュージックビデオやポッドキャストで、カラフルなバーや波として見たことがあるかもしれません。面白いのは、簡単なコードを使って自分で作れることです。このガイドでは、HTML、CSS、JavaScriptでオーディオビジュアライザーを作成する方法を学びます。

Web Audio APIやCanvasのような組み込みブラウザツールを使用します。マイクを使って自分の声を視覚化することもできます。クリアなサウンドには、Hollyland LARK M2のようなマイクが非常に役立ちます。ノイズの少ないクリアなオーディオをキャプチャするため、ビジュアルは音楽、スピーチ、または楽器によく反応します。

Hollyland LARK M2 - Mini Lavalier Microphone

An incredibly lightweight and compact wireless button microphone that captures high-fidelity audio.

Key Features: 9g Button Size | 48 kHz/24-bit | 40 Hours Battery

Check on Amazon

TML/CSS/JSオーディオビジュアライザーを作成するための必須ツール

構築を開始する前に、いくつかの重要なツールが準備できていることを確認してください。ここのすべては無料で、初心者にも優しいです。

• 最新のブラウザ（Chrome、Firefox、またはEdge）
• コードエディタ（VS Code、Sublime Textなど）
• ローカルオーディオファイル（MP3またはWAV）
• HTMLとJavaScriptの基本的な理解
• オプション：リアルタイム入力用のマイク（LARK M2など）

最初に視覚化するファイルをアップロードし、次にマイクを使用する方法を示します。

オーディオビジュアライザーとは？

オーディオビジュアライザーは、サウンドを聞き、それを図形として描画するツールです。バー、円、波、またはその他のものがあります。図形は、ピッチと音量に基づいて変化します。ビジュアライザーは、リアルタイムで周波数と振幅を読み取り、そのデータを動きに変換します。

特にポッドキャスト、音楽、またはライブストリームの場合、オーディオをより魅力的にします。

Web Audio APIの理解

Web Audio APIを使用すると、JavaScriptでサウンドを分析および操作できます。これにより、次のようなことができます。

• オーディオファイルを再生する
• マイクを使用する
• 周波数を視覚化する
• フィルターとエフェクトを適用する

AnalyserNodeを使用してリアルタイムの周波数データを読み取り、Canvas APIを使用してそれに反応するバーを描画します。

HTML/JSでオーディオビジュアライザーをコーディングするための完全なチュートリアル

HTMLに慣れていない場合は、心配しないでください。このコードブロックが何をするかを順を追って説明します。これにより、構築しているものと、各部分が重要な理由を正確に理解できます。

ステップ1：ドキュメントタイプを宣言し、HTMLドキュメントを開始します

この行は、HTML5ドキュメントを作成していることをブラウザに伝えます。これは常にHTMLファイルの先頭に配置されます。次に、タグでHTMLドキュメントを開始します。

ステップ2：HTMLドキュメントを開始します

これにより、HTMLページのメインコンテナが開きます。lang=”en”属性は、ページが英語で記述されていることをブラウザ（および検索エンジン）に伝えるだけです。

ステップ3：headセクション

タグ内のすべてには、Webページのセッティングとメタデータが含まれています。

• ：これにより、ページが特別な記号を含むすべての標準文字をサポートすることが保証されます。
• ：これにより、HTMLページが外部CSSファイルにリンクされます。これにより、ビジュアライザーの外観が制御されます。

ステップ4：bodyコンテンツ

Webページのすべての表示可能でインタラクティブな部分がここに入ります。

• オーディオビジュアライザー

  ：見出し。これは、ツールが何であるかをユーザーに知らせるために、ページの上部に表示されます。
• ：これにより、ファイルアップロードボタンが作成されます。ユーザーがクリックすると、コンピューターからオーディオファイルを選択できます。これは、サウンドをビジュアライザーに供給する方法です。
• ：これは描画領域です。後で記述するJavaScriptは、このキャンバスを使用して、オーディオに合わせて移動するカラフルなバーと図形を描画します。
• ：これにより、JavaScriptファイルがロードされます。そこには、サウンドの再生やバーのアニメーションなど、ビジュアライザーのすべてのロジックがあります。

ステップ5：HTMLを閉じます

これは、ファイルの入力とビジュアルを描画するためのキャンバスを追加しながら、HTMLドキュメントを終了するだけです。

ステップ6：ページをスタイルします（style.css）

プロジェクトのこの部分は、ページの外観を制御します。何も機能を変えるのではなく、ユーザーにどのように表示されるかを変えるだけです。ステップごとに分解してみましょう。

bodyスタイル

body {

background-color: #111;

color: white;

font-family: Arial, sans-serif;

text-align: center;

}

• background-color: #111; これにより、ページ全体に暗い灰色（ほぼ黒）の背景が与えられます。カラフルなオーディオバーが目立つようになります。
• color: white;
  ページ上のすべてのテキスト（見出しなど）は白で表示されます。
• font-family: Arial, sans-serif;
  最初にArialフォントを使用するようにテキストを設定します。使用できない場合は、一般的なsans-serifフォントに戻ります。これにより、テキストの見栄えがクリーンでモダンに保たれます。
• text-align: center;
  これにより、見出しやその他のテキスト要素がページの中央に配置されます。

canvasスタイル

canvas {

background-color: black;

margin-top: 20px;

display: block;

margin-left: auto;

margin-right: auto;

border: 2px solid #444;

}

• background-color: black;
  キャンバス（アニメーションが発生する領域）を純粋な黒に設定します。これにより、ビジュアライザーに洗練された外観が与えられます。
• margin-top: 20px;
  キャンバスと見出しまたはファイル入力の間にスペースを追加します。
• display: block;
  キャンバスがブロックレベル要素として扱われるようにし、適切にスタイルを設定できるようにします。
• margin-left: auto;
  margin-right: auto;
  これらの2行は、キャンバスをページ上で水平方向に中央に配置します。
  
• border: 2px solid #444;
  キャンバスの周りに薄い、濃い灰色の境界線を描画します。これにより、ビジュアライザーにフレーム付きの洗練された外観が与えられます。

ステップ7：JavaScriptを追加します（app.js）

これらの行は、HTMLから要素を取得します。

• fileInputはファイルピッカーです
• canvasはアニメーションが表示される場所です
• ctxは描画コンテキストです。これにより、2D図形を使用してキャンバスに描画できます

ステップ8：キャンバスサイズを設定します

これにより、キャンバスの寸法が幅800ピクセル、高さ300ピクセルに設定されます。

ステップ9：ファイルのアップロードをリッスンします

この行はブラウザに伝えます。「誰かがオーディオファイルをアップロードしたら、この関数内のコードを実行します。」

ステップ10：オーディオコンテキストを設定します

これにより、新しいオーディオコンテキストが作成されます。これは、サウンドを分析または変更できる特別な環境です。

ステップ11：ファイルをロードします

これにより、ユーザーが選択したファイルが取得され、それをデコードするためのリーダーが設定されます。

ステップ12：オーディオファイルをデコードします

ファイルがロードされると、この関数はオーディオデータをブラウザが理解できる形式にデコードします。

ステップ13：オーディオソースを作成します

これにより、新しいオーディオソースが作成され、デコードされたオーディオに接続されます。

ステップ14：アナライザーを作成します

ここでは、周波数データを読み取るようにAnalyserNodeが設定されています。fftSizeは、読み取りの詳細度を制御します。dataArrayは、ビジュアルを描画するために使用できる数値として、これらの周波数値を格納します。

ステップ15：ノードを接続します

これにより、すべてがチェーンで接続されます。

1. ソースはサウンドをアナライザーに送信します。
2. アナライザーはサウンドをスピーカーに送信します。
3. ソースが再生を開始します。

ステップ16：アニメーション関数

この関数はバーを描画し、それ自体を呼び出し続け、1秒あたり約60回実行されるループを作成します。

ステップ17：周波数データを取得します

これにより、dataArrayに0から255までの周波数値が入力されます。

ステップ18：キャンバスをクリアします

これらの行は、新しいバーを描画する前にキャンバスを黒く塗りつぶすため、視覚的な混乱が発生しません。

ステップ19：バーの寸法を設定します

各バーの幅を計算し、左から（x = 0）描画を開始します。

ステップ20：バーを描画します

各バーの高さは、周波数値に基づいています。色は高さによってわずかに変化し、クールなアニメーション効果が作成されます。

• ctx.fillRect()は各長方形を描画します。
• バーを均等に配置するために、毎回xを前方に移動します。

ステップ21：アニメーションを開始します

これにより、オーディオの再生時にアニメーション関数が開始されます。

ステップ22：オーディオデータを読み取ります

最後に、この行はリーダーにアップロードされたオーディオファイルの処理を開始するように指示します。

ライブオーディオの視覚化にマイクを使用する方法

ファイルの代わりにライブサウンドをキャプチャする方法を次に示します。

これは、LARK M2が輝く場所です。ワイヤレスで軽量、クリーンでバランスの取れたオーディオを提供します。ライブサウンドを視覚化する場合、マイクの品質が重要です。LARK M2は、ドロップアウトやノイズスパイクを回避するのに役立ちます。

ファイルとマイク：どちらを使用する必要がありますか？

ボーナス：ユニークな外観のために円形のオーディオビジュアライザーを試してください

何か違うものが欲しいですか？この放射状のビジュアルを試してください。

これは、音楽や瞑想トラックに最適な、ドットのパルスリングを作成します。

オーディオビジュアライザーをスタイルしてパーソナライズする方法

• ctx.createLinearGradient()でグラデーションを試してください
• ウィンドウサイズでキャンバスのサイズを変更する
• ユーザー制御用のポーズ/再生ボタンを追加する
• 画面を録画してビデオにする
• フェーディングトレイルにctx.globalAlphaを使用する

コードからWebへ：ビジュアライザーを簡単に公開する

あなたの作品を共有したいですか？

1. GitHub PagesまたはNetlifyで無料でホストする
2. HTML、CSS、JSをアップロードする
3. ライブページへのリンク
4. ボーナス：オーディオとビジュアルブランディングを追加して、パーソナルにする

結論

独自のオーディオビジュアライザーを構築しました！ファイルを使用するか、Hollyland LARK M2のようなライブマイクを使用するかにかかわらず、サウンドを生き生きとさせるプロジェクトができました。

あなたは次の方法を学びました：

• Web Audio APIを使用してサウンドを分析する
• キャンバスにビジュアルを描画する
• ファイルまたはマイクからサウンドをキャプチャする
• バーと円形のアニメーションを作成する

今すぐ実験してください。新しい図形を試したり、ツールを組み合わせたり、音楽アプリに接続したりしてください。創造的な可能性は無限大です。

よくある質問

1. 音楽ストリーミングアプリでこれを使用できますか？

直接的にはできません。ブラウザのセキュリティと著作権により、Spotifyのようなアプリからのストリームにアクセスできません。代わりに、ダウンロードしたファイルまたはマイク入力を使用してください。

2. これはモバイルデバイスで動作しますか？

ほとんどの場合、はい。ただし、一部のブラウザでは、オーディオの再生とマイクへのアクセスが制限されています。最初にデスクトップでテストしてから、モバイル用に調整するのが最善です。

3. これをビデオとして保存するにはどうすればよいですか？

OBSやLoomのような画面録画ソフトウェアを使用します。次に、ビジュアライザーをミュージックビデオ、リール、またはイントロに編集できます。