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

はじめに

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

私、つい最近までプログラミング未経験だったのですが、「音楽×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=["*"],
)

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

これから追加したい機能

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

まとめ

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

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

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

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

ライセンス

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