【AI】Canvas機能で簡易ボイスチェンジャーを作ってもらった【Google Gemini】

自由研究

とりあえず何か作ってもらう

簡易ボイスチェンジャー

ボイスチェンジャーのような何かを作ってとおねだりしたら

お出しされた

こんなそれっぽいのが数分で作られてしまう世の中

簡易ボイスチェンジャーの仕組み

一応どうやってできてるのかをAIに聞いてみた

 

～～～～～～～～～～～～～～～～以下AI～～～～～～～～～～～～～～～～～～～～＾

 

簡易ボイスチェンジャーアプリの仕組み

このドキュメントでは、あなたが体験した「簡易ボイスチェンジャーアプリ」がどのように構築されているか、その技術的な側面を解説します。HTML、CSS、JavaScriptの各要素がどのように連携して、音声の録音、ピッチ調整、フォルマント調整（簡易版）、そして再生機能を実現しているのかを理解することができます。

1. アプリケーションの概要

この簡易ボイスチェンジャーアプリは、Web Audio APIとMediaDevices APIを活用して、ブラウザ上でリアルタイムに音声を録音・加工・再生するデモンストレーションです。ユーザーは自分の声を録音し、ピッチ（声の高さ）とフォルマント（声の音色）をスライダーで調整したり、プリセットを適用したりして、加工された声を聞くことができます。

2. HTML構造：アプリの骨格

アプリのユーザーインターフェースは、単一のHTMLファイルで構成されています。主要な要素は以下の通りです。

  • <head>セクション:
    • charset="UTF-8": 文字エンコーディングを指定します。
    • viewport: レスポンシブデザインのためにビューポートを設定します。
    • title: ブラウザのタブに表示されるタイトルです。
    • tailwindcss.com CDN: Tailwind CSSを読み込み、素早くレスポンシブなスタイルを適用するために使用します。
    • Google Fonts CDN: 日本語フォント「Noto Sans JP」を読み込み、アプリのテキスト表示に使用します。
  • <body>セクション:
    • .container: アプリ全体のコンテンツを中央に配置し、背景色、角丸、影などの基本的なスタイルを適用するメインのコンテナです。
    • タイトルと説明: アプリの目的をユーザーに伝えるための<h1>と<p>要素です。
    • メッセージ表示エリア: id="message"を持つ<p>要素で、アプリの状態（「録音中…」「再生完了。」など）をユーザーにリアルタイムでフィードバックします。
    • ボタン群:
      • 録音開始/停止 (id="recordButton", id="stopButton")
      • 元の声の再生/加工した声の再生 (id="playOriginalButton", id="playProcessedButton")
      • これらはbutton-groupクラスを持つdivでグループ化され、Gridレイアウトで配置されています。
    • 声質プリセット:
      • 「女性の声」「男性の声」「リセット」ボタン (id="femalePresetButton", id="malePresetButton", id="resetPresetButton")
      • これらのボタンは、ピッチとフォルマントのスライダー値を一括で変更し、特定の声質をシミュレートします。
    • ピッチ調整スライダー:
      • id="pitchShiftSlider": ピッチ（声の高さ）を調整するためのレンジ入力（スライダー）です。
      • id="pitchValueDisplay": 現在のピッチ調整値を表示します。
    • フォルマント調整スライダー:
      • id="formantShiftSlider": フォルマント（声の音色）を調整するためのレンジ入力です。
      • id="formantValueDisplay": 現在のフォルマント調整値を表示します。
      • このフォルマント調整は、複数のフィルターを用いた簡易的なデモンストレーションであることが注意書きで示されています。
    • <script>タグ: アプリのすべてのJavaScriptロジックが含まれています。defer属性は使用されていませんが、DOMContentLoadedイベントリスナー内でコードが実行されるため、HTML要素がすべて読み込まれてからJavaScriptが動作します。

3. CSSスタイリング：アプリの見た目

アプリのスタイルは、主にTailwind CSSと一部のカスタムCSSで構成されています。

  • Tailwind CSS:
    • containerクラス: max-width, padding, margin-left: auto, margin-right: autoなどを用いて、コンテンツを中央に配置し、画面サイズに応じて適切な余白を確保します。
    • flex, grid, space-y-*, gap-*: レイアウトの構築と要素間のスペース調整に使用されます。
    • bg-white, rounded-lg, shadow-xl: コンテナやカード要素の背景、角丸、影を設定し、モダンな見た目を提供します。
    • text-center, font-bold, text-stone-*, text-indigo-*: テキストの配置、太さ、色を設定します。
    • px-*, py-*: パディングを調整します。
    • transition: ボタンやスライダーのホバーエフェクトに滑らかなアニメーションを追加します。
  • カスタムCSS (<style>タグ内):
    • body要素: フォントファミリー、背景色、テキストの基本色、そしてコンテンツを画面中央に配置するためのFlexboxプロパティが設定されています。
    • .button-group button: ボタンの背景色、文字色、パディング、角丸、フォントの太さ、ホバー時の背景色変化とわずかなY軸方向への移動（transform: translateY(-2px)）を設定します。disabled状態のボタンのスタイルも定義されています。
    • input[type="range"]: スライダー（レンジ入力）の見た目をカスタマイズします。ブラウザのデフォルトスタイルをリセットし、背景色、高さ、角丸などを設定します。特に、スライダーのつまみ（::-webkit-slider-thumbと::-moz-range-thumb）の形状、色、影を定義し、操作性を向上させています。

これらのスタイルが組み合わさることで、アプリはクリーンでプロフェッショナルな見た目を持ち、様々なデバイスで快適に利用できるようになっています。

4. JavaScriptロジック：アプリの動作

JavaScriptは、アプリのインタラクティブな動作のすべてを制御する核となる部分です。

  • 変数の初期化とDOM要素の取得:
    • mediaRecorder, audioChunks, audioContext, originalAudioBuffer: 音声の録音と処理に必要な変数を宣言します。
    • pitchShiftValue, formantShiftValue: ピッチとフォルマントの現在の調整値を保持します。
    • document.getElementById(): HTML要素をIDで取得し、JavaScriptから操作できるようにします。
  • スライダーの表示更新 (updateSliderDisplays):
    • ピッチとフォルマントのスライダーが操作されるたびに、その現在の値を対応する表示要素（pitchValueDisplay, formantValueDisplay）に反映させます。
  • プリセットボタンの機能:
    • femalePresetButton, malePresetButton, resetPresetButtonのクリックイベントリスナーが設定されています。
    • これらのボタンがクリックされると、pitchShiftSlider.valueとformantShiftSlider.valueが特定の推奨値に設定され、updateSliderDisplays()が呼び出されてUIが更新されます。これにより、ユーザーはワンクリックで特定の声質（女性の声、男性の声）を試すことができます。
  • 録音機能 (recordButton):
    • navigator.mediaDevices.getUserMedia({ audio: true }): ユーザーのマイクへのアクセスを要求します。
    • AudioContext: Web Audio APIの主要なインターフェースで、音声処理グラフを構築するために使用されます。
    • MediaRecorder: マイクからの音声ストリームを録音するために使用されます。
    • ondataavailable: 音声データが利用可能になったときにaudioChunks配列にデータを追加します。
    • onstop: 録音が停止したときに、録音されたaudioChunksをBlobに結合し、audioContext.decodeAudioData()でAudioBufferにデコードしてoriginalAudioBufferに保存します。その後、再生ボタンとスライダーを有効にし、録音ボタンを無効にします。
    • mediaRecorder.start(): 録音を開始します。
  • 録音停止機能 (stopButton):
    • mediaRecorder.stop(): 録音を停止します。
    • mediaRecorder.stream.getTracks().forEach(track => track.stop()): マイクのストリームを停止し、マイクの使用を終了します。
  • 元の声の再生機能 (playOriginalButton):
    • audioContext.createBufferSource(): AudioBufferを再生するためのノードを作成します。
    • source.buffer = originalAudioBuffer: 録音された音声データをソースに設定します。
    • source.connect(audioContext.destination): 音声ソースをオーディオ出力（スピーカーなど）に接続します。
    • source.start(): 音声の再生を開始します。
  • 加工した声の再生機能 (playProcessedButton):
    • ピッチ調整:
      • source.playbackRate.value = Math.pow(2, pitchShiftValue / 12): playbackRateプロパティを調整することで、音声の再生速度を変更し、ピッチを擬似的にシフトさせます。pitchShiftValueは半音単位で、Math.pow(2, X / 12)はX半音分の周波数比を計算します。
    • フォルマント調整（簡易版）:
      • audioContext.createBiquadFilter(): 複数のBiquadFilterNode（filter1, filter2）を作成し、peakingタイプに設定します。
      • filter.Q.value: フィルターのQ値（帯域幅）を設定します。
      • filter.frequency.value: フィルターの中心周波数を設定します。formantShiftValueに基づいて周波数をシフトさせます。
      • filter.gain.value: フィルターのゲイン（強調または減衰の量）を設定します。formantShiftValueに基づいてゲインを調整します。
      • source.connect(filter1); filter1.connect(filter2); filter2.connect(audioContext.destination);: 音声ソースをフィルターに接続し、フィルターを直列に接続して最終的にオーディオ出力に接続します。これにより、複数の周波数帯域が同時に強調または減衰され、より複雑な音色の変化をシミュレートします。
    • source.start(): 加工された音声の再生を開始します。
  • DOMContentLoadedイベントリスナー:
    • HTMLドキュメントが完全に読み込まれて解析された後に、すべてのJavaScriptコードが実行されるようにします。これにより、JavaScriptがHTML要素にアクセスしようとしたときに、まだ存在しないというエラーを防ぎます。

5. まとめ

この「簡易ボイスチェンジャーアプリ」は、HTMLで構造を定義し、Tailwind CSSとカスタムCSSで見た目を整え、そしてJavaScript（特にWeb Audio APIとMediaDevices API）で録音、ピッチ調整、フォルマント調整、再生といったインタラクティブな機能を実現しています。

特に、フォルマント調整においては、複数のピークフィルターを組み合わせることで、声の音色に影響を与える周波数帯域をより細かく操作する試みが行われています。これは、実際の音声変換技術が声の複雑な音響特性をどのように分析し、操作しているかを示す、簡略化されたデモンストレーションとなっています。

このアプリを通じて、Web技術がどのように音声処理のような複雑なタスクに応用されているか、そして音声変換の基本的な原理を視覚的・聴覚的に体験できることを願っています。

 

～～～～～～～～～～～～ここまでAI～～～～～～～～～～～～～～

コメント