生成AIと作るリアルタイム音声ビジュアライザー (準備編)

はじめに

CoreAudioまわりのサンプルは、理解しようとすると少しハードルが高い領域です。
今回は題材として リアルタイム音声ビジュアライザー を選び、AIコーディングツール Codex を使って SwiftUI ベースのサンプルアプリを作ってみます。

この記事では、

  • SwiftUI
  • AVAudioEngine
  • Accelerate (FFT)
  • Codex

を使いながら、AIとペアプロする形でサンプルアプリを完成させていく過程をまとめます。

なお、最初から完成コードを出すのではなく、

  1. AIに実装を依頼する
  2. ビルドエラーや挙動の問題を修正する
  3. 最終的に動くサンプルへ育てていく

という流れで進めます。

今回はまず Codexに指示を出す前の準備までを扱います。


作るアプリ

今回作るアプリはシンプルです。

マイク入力の音をリアルタイムで解析し、周波数スペクトラムを表示するアプリです。

次のような構造で動作します。

Microphone

AVAudioEngine

Audio Buffer

FFT(Accelerate / vDSP)

Spectrum Data

SwiftUI View

表示は以下のようなイメージになります。

█ ▇ ▅ ▃ ▄ ▆ █ ▇ ▅ ▃ ▄ ▆ █


なぜSwiftUIを使うのか

今回は UIKit ではなく SwiftUI を使用します。

理由は主に2つです。

UIコードを短くできる

音声ビジュアライザーの主役は 音声処理(Audio Processing) です。
UIKitを使うと、どうしても次のような実装が必要になります。

  • AutoLayout
  • CALayer
  • drawRect
  • View更新管理

結果として UIコードの比率が大きくなり、本筋の音声処理から離れてしまうことを避けるためです。

SwiftUIなら、スペクトラム表示も非常にシンプルに書けます。

例えば、HStack の中で Rectangle を並べるだけでバー表示のベースを作ることができます。

  • HStack で横方向に配置
  • ForEach でスペクトラムデータをループ
  • Rectangle でバーを描画

このように 少ないコード量でリアルタイムグラフの基礎が作れるため、今回はSwiftUIを使用します。

AI生成コードとの相性が良い

今回の記事では AIを使用して音声処理アプリを実装する をテーマにしています。

SwiftUIは宣言的UI(Declarative UI)のため、

  • UIKit
  • AutoLayout
  • CALayer操作

などと比較して AIが生成するコードの成功率が高い傾向があります。

特に次の点で相性が良いと感じています。

  • View構造がシンプル
  • 状態管理が明確
  • UI更新がデータバインディング中心

UIKitの場合、AIが生成したコードでは次のような問題が起きることがあります。

  • AutoLayout制約が崩れる
  • View更新のタイミングが不適切
  • CALayer描画処理が複雑になる

一方SwiftUIでは、UIの更新は基本的に 状態の変化によって自動的に反映されます。

そのため、

  • データ(スペクトラム配列)を更新する
  • SwiftUIが自動で画面を更新する

というシンプルな構造になります。

今回のサンプルでも、

  1. マイク入力を取得する
  2. FFTでスペクトラムデータを作る
  3. 配列を更新する
  4. SwiftUIがグラフを再描画する

という 非常に素直なデータフローを作ることができます。

結果として、AIが生成したコードをそのまま動かせる確率が高くなるため、
手動による修正や追加実装のコストを下げる事にも有用です。

プロジェクト作成

まずは XcodeでSwiftUIプロジェクトを作成します。

メニューから次を選択します。

File → New Project → App

プロジェクト設定は以下のようにします。

Product Name : LiveAudioVisualizer
Interface : SwiftUI
Language : Swift
Deployment : iOS 17+

プロジェクトを作成すると、最小構成のSwiftUIアプリが生成されます。

LiveAudioVisualizer
├ LiveAudioVisualizerApp.swift
└ ContentView.swift

この段階では、まだ音声処理のコードは存在していません。


マイク権限の設定

iOSでマイクを使用するアプリでは、
Info.plistに使用理由を記述する必要があります。

この設定が無い場合、アプリはマイクにアクセスできません。

SwiftUIテンプレートの場合、Info.plist がファイルとして見えないことがあります。
その場合は Target設定のInfoタブから追加します。

TARGETS
→ LiveAudioVisualizer
→ Info

追加するキーはこちらです。

Privacy - Microphone Usage Description

値は例えば次のようにします。

Microphone access is required for audio visualization.

この文章は、ユーザーが初めてマイクアクセスを許可する際に表示されるメッセージになります。

まとめ

今回は、リアルタイム音声ビジュアライザーを作るための 準備段階として、

  • SwiftUIを採用した理由
  • Xcodeでのプロジェクト作成
  • マイク権限の設定

までを行いました。

この段階ではまだアプリとしての機能はほとんどありませんが、
音声入力を扱うiOSアプリの土台は整った状態になります。

次のステップでは、いよいよ AI(今回はCodex)に実装を依頼します。

具体的には、

  • マイク入力の取得(AVAudioEngine)
  • 音声データの解析(Accelerate / FFT)
  • スペクトラムデータの生成
  • SwiftUIでのリアルタイム表示

といった部分を、AIと協業する形で実装していきます。

また、AIが生成したコードは必ずしもそのまま動くとは限らないため、

  • ビルドエラーの修正
  • 動作の調整
  • 表示の安定化

といった作業も含めて、実際の開発フローに近い形で進めていきます。

次回は、Codexに渡した 実際のプロンプト と、
そこから生成されたコードを見ながら、実装を進めていきます。

一覧に戻る

contact

お問い合わせ

サービスに関するお問い合わせはこちら

採用・求人に関する情報はこちら