プログラミング未経験者が一ヶ月で歌姫を作ってみた

はじめに

みなさん、こんにちは！🎵

私、つい最近までプログラミング未経験だったのですが、「音楽×AI」という夢のコラボで楽曲制作アプリを作ってみました。今回は、FastAPIとReactを使って作った「あなたの青春ソングメーカー」の開発秘話をお届けします！

✨ このアプリで何ができるの？

あなたの青春時代について5つの質問に答えるだけで、AIがオリジナルの歌詞を作ってくれます
答えは声で話しかけるだけでOK！（音声認識搭載）
質問は可愛らしい声で読み上げてくれます（VOICEVOXさん大活躍）
黒板をイメージしたレトロ可愛いデザイン

🔧 どんな技術を使ったの？

フロントエンド（見た目の部分）は：

React（JavaScriptのフレームワーク）
Tailwind CSS（デザインを簡単にするやつ）
Lucide Icons（かわいいアイコン集）

バックエンド（裏側で動く部分）は：

FastAPI（Pythonのフレームワーク）
VOICEVOX（音声合成の神アプリ）
Google Cloud Speech-to-Text（音声認識の賢い子）
AWS Bedrock（歌詞を作ってくれる魔法使い）

どんな仕組みで動いてるの？

アプリの中身はこんな感じです：

実装のポイント（ここが大変だった！）

1. 見た目の部分（フロントエンド）

かわいい黒板風デザイン

チョークで書いたような雰囲気を出すために、Tailwind CSSを使ってこんな感じにしました：

<div className="min-h-screen bg-gradient-to-b from-wood-light to-wood-DEFAULT">
  <div className="bg-chalkboard rounded-lg shadow-2xl p-8 relative border-8 border-wood-dark">
    {/* ここに中身を書いていきます */}
  </div>
</div>

音声録音機能

スマートフォンのマイクみたいな機能を作るのにこんなコードを書きました：

const startRecording = async () => {
  try {
    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
    mediaRecorder.current = new MediaRecorder(stream);
    const chunks = [];

    mediaRecorder.current.ondataavailable = (e) => chunks.push(e.data);
    mediaRecorder.current.onstop = async () => {
      const blob = new Blob(chunks, { type: 'audio/webm' });
      // ここで録音した声をサーバーに送ります
    };

    mediaRecorder.current.start();
    setIsRecording(true);
  } catch (error) {
    console.error('録音開始でエラーが出ちゃいました...:', error);
  }
};

2. サーバー側の部分（バックエンド）

FastAPIで作った主要な機能はこんな感じ：

@app.post("/start")
async def start_interview():
    """インタビューを始めるところ"""
    greeting = "こんにちは！青春ソングを作るためのインタビューを始めましょう。"
    return {"message": greeting, "status": "success"}

@app.post("/speak")
async def speak_text(text: dict):
    """VOICEVOXさんに喋ってもらうところ"""
    await synthesize_voicevox(text["message"])
    return {"status": "success"}

ハマったところとその解決策

1. 音声合成が遅くてイライラ問題

何が起きたの？：
VOICEVOXさんが音声を作るのに時間がかかって、ユーザーさんを待たせてしまう...😢

どうやって解決したの？：

音声を作る処理を非同期（平行して動かせるように）にしました
「ただいま音声を準備中です♪」みたいな表示を追加
音声を作ってる間は他のボタンを押せないようにしました

2. 開発中によく出たエラー（CORS）との戦い

何が起きたの？：
ブラウザからサーバーにアクセスしようとすると怒られる...😱

どうやって解決したの？：

app.add_middleware(
    CORSMiddleware,
    allow_origins=["http://localhost:3000"],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

このコードで「大丈夫だよ〜」ってブラウザに教えてあげました。

これから追加したい機能

実際に曲も作れるようにしたい！
もっといろんな質問パターンを増やしたい
ユーザーさんに合わせた質問ができるようにしたい
作った歌詞を編集できるようにしたい

まとめ

プログラミング未経験でも、「作りたい！」という気持ちがあれば、こんな感じのアプリが作れちゃいました！
特に大事だと感じたポイントは：

少しずつ機能を追加していく
エラーが出ても慌てない（必ずどこかに解決策があります！）
使う人のことを考えながら作る
非同期処理って大事！

参考にさせていただいたサイト

みなさんも、ぜひチャレンジしてみてください！わからないことがあったら、コメントで質問してくださいね！😊

ソースコード

このプロジェクトのソースコードは、以下のGitHubリポジトリで公開しています：

🔗 ai-song-creator-planB

実装の詳細やセットアップ方法について、より詳しく知りたい方はぜひリポジトリをチェックしてみてください！

ライセンス

このプロジェクトはMITライセンスで公開しています（著作権表示だけ忘れずに、あとは自由に使ってね！）