Zenn
🎤

【KanaKara開発ログ #1】読めない外国語の歌詞を自動でカナ読み化してくれるカラオケアプリを作りたい

に公開
Next.js
個人開発
FastAPI
OpenAI
Whisper
idea

こんにちは！北米のとある大学でCSを専攻している みゃおち（@MeowNotFound） です。
今回から、個人開発中のWebアプリ「KanaKara（カナカラ）」の開発ログをZennで記録していきます！

なにを作るの？

KanaKara は、YouTubeの音源動画と .lrc ファイル（タイムスタンプ付きの歌詞ファイル）を組み合わせて、
オリジナル歌詞＋カナ読み表示を実現するカラオケ風Webアプリです。

特に、英語や韓国語など「文字自体は読めないけど実際に発音して歌いたい」語学学習者や、外国語の曲を気軽にカラオケ風にして歌いたい日本語ネイティブをターゲットにしています。

開発のきっかけ（長文注意）

私は小学生の頃からK-POPオタクで、中高生のときに韓国語の勉強を始めました。
ハングルを読むところから始めて、完全独学で2年間学習し、TOPIK（韓国語能力試験）では6級（最高級）を取得しました。

学習の一環として、好きな韓国語の曲を選び、日本語訳とハングルの読みをカタカナでふった歌詞を毎週アメーバブログにアップしていました。残念ながら当時の記事は残っていませんが、下書きとして残していたものがあったので一部抜粋。こんな感じです。：

もちろん、ハングルの歌詞すべてに手動でカナルビ（カタカナの読み方）をつけていく作業は非常に時間がかかり、効率も悪いものでした。

当時からこの“カナルビ”は、K-POPファンや韓国語学習者の間でよく使われており、今もなお根強い人気があります。
最近では、人気グループの新曲が出ると、YouTubeにカナルビ＋和訳付きの動画が数日以内にアップされることもあります。

ただ、マイナーな曲やリリース直後の曲では、カナルビ付きの動画がなかったり、検索しても見つからないことも。

そこで、ふと思ったのです。

ハングルが読めなくても、
リリース直後の曲でも、
認知度の低い曲でも——

たった数回の操作で自動的にカナルビが生成され、気軽に日本語の感覚で歌えるようになったら、どれだけ便利だろう？

この発想はまさに、

「私だからこそ思いついたアイデア」であり、
「この生成AI時代だからこそ叶えられる構想」

だと感じました。

というわけで、ものすごく個人的な原体験からスタートしたプロジェクトですが、
ここまで読んでくださった方、本当にありがとうございます！笑

そんな経緯もあって、このプロジェクトにはめちゃくちゃ情熱を注いでいます🔥

現時点の構想（MVP）

  • 曲名・アーティスト名からYouTubeで音源（MVではなく音源版）を検索
  • .lrc ファイルをユーザーがアップロード（将来的には音源から自動生成も視野に）
  • 歌詞とカタカナ表示（カナルビ）を動画と同期させて1行ずつハイライト表示
  • 英語 → カタカナ変換は CMUdict ベースのルール
  • 韓国語は g2pk（Pythonライブラリ）＋ 自作マッピング辞書で対応予定

※g2pk（grapheme-to-phoneme for Korean）とは、ハングルから音声的な読み（発音記号ベース）への変換を行うPythonライブラリです。
例）같이 → g2pk → 가치（読み）→ カタカナに整形 →「カチ」
このように、ハングル→発音→カタカナという2段階処理をすることで、
表記と発音が一致しにくい韓国語にもこの神ライブラリで対応できる仕組みです。

技術スタック（予定）

分類 使用技術
フロント Next.js + Tailwind CSS
バックエンド FastAPI（Python）
英語カナルビ JavaScript + CMUdict 辞書
韓国語カナルビ g2pk + カタカナ変換
音声認識（拡張予定） Whisper（OpenAI）
デプロイ Vercel（フロント） + Render または Railway（API）

やったこと

  • MVPの要件定義と大雑把に拡張予定も見越した段階的な実装計画
  • Whisperを使った音声→歌詞→LRCの自動化構想を設計段階で整理した。
  • ChatGPTで要件などをまとめた.md式の仕様書を作成し、それを用いてV0にて簡単なUI作成
  • リポジトリ作成、V0のUIで初コミット
  • 要件定義と設計を下に作ったマーメイド図は今のところこんな感じ:

詰まっていることと、検討中のこと

  • はじめに設計時に詰まったのは.lrc ファイルの取得：スクレイピングは著作権的にNG。外部API（Genius API など）も有料が多いため、
    • 現時点では「ユーザーアップロード方式」
    • 将来的には Whisper など音声処理AIで .lrc を自動生成したい
  • .lrc と動画のタイミング同期処理の最適化どうする

次にやること

  • .lrc ファイルのアップロード処理
  • カナルビ変換ロジックの辞書設計
  • YouTube 再生時間と歌詞の同期機構の実装

おわりに

今回は、プロジェクトを立ち上げたきっかけと、KanaKaraが目指すものの概要についてご紹介しました。

次回は .lrc ファイルの読み込みと、英語歌詞のカタカナ変換処理までを中心に開発ログを書いていく予定です。

今後の開発の様子が気になる方は、ぜひフォローして続きをお待ちください☺️

ではでは。

Discussion