# カラオケ採点デモ（ブラウザ版）｜音程・ビブラート・しゃくり・こぶしをリアルタイム検出｜テクノスフィア

> マイクの歌声からYINアルゴリズムで基本周波数(F0)をリアルタイム推定し、音程のズレ(セント)・ビブラート・しゃくり・こぶしをブラウザだけで検出する技術デモ。音声はすべてブラウザ内で処理され、サーバーには一切送信されません。マイクなしで試せるシミュレーション歌唱モード付き。

URL: https://technosphere.co.jp/labs/karaoke/

REAL-TIME SINGING ANALYSIS × WEB AUDIO API

# カラオケ採点デモ 音程・ビブラート・しゃくり・こぶしを検出

 マイクの歌声から基本周波数(F0)を **YINアルゴリズム** でリアルタイム推定し、
 音程のズレ(セント単位)と歌唱テクニックをブラウザだけで検出する技術デモです。
 音声は**すべてブラウザ内で処理**され、サーバーには一切送信されません。            G3 (196Hz) A3 (220Hz) C4 (262Hz) D4 (294Hz) E4 (330Hz) G4 (392Hz) A4 (440Hz)

「マイクで歌う」でマイク解析を開始。マイクがない場合は「シミュレーション歌唱」で合成音声の解析をご覧いただけます。      ** 音程OK (±30セント以内) ** 音程のズレ ** ビブラート ** しゃくり ** こぶし

### PITCH — いま歌っている音  — ズレ **—** セント

### TECHNIQUES & SCORE — 検出結果  0.0sビブラート 0しゃくり 0こぶし 0%音程正確率 0スコア

## これは何？

 業務用カラオケの「精密採点」的な歌声解析を、Web Audio APIとVanilla JavaScriptだけでブラウザ上に再現した技術デモです。 マイク入力から **YIN法**（de Cheveigné & Kawahara, 2002）で基本周波数を推定し、 そのピッチ軌跡を解析して「音程のズレ（セント）」「ビブラート」「しゃくり」「こぶし」を検出しています。

 各テクニックの音響的な定義、YINアルゴリズムの中身、検出ロジックの設計は [解説記事「カラオケ採点システムの仕組み」](https://technosphere.co.jp/blog/karaoke-scoring-engine)で詳しく紹介しています。

## 使い方・楽しみ方
1. **音程チェック**：「ガイド音を鳴らす」で基準音を再生し、同じ高さで「あー」と歌うと、ゲージにセント単位のズレが表示されます。±30セント以内でキープできれば音程OK（シアン色）です。
2. **ビブラート**：声を伸ばしながら高さを規則的に揺らしてみてください。毎秒5〜7回・±20〜50セント程度の規則的な揺れが約1秒続くと「ビブラート」と判定されます。
3. **しゃくり**：目標の音より低い音から「ずり上げて」歌い出すと「しゃくり」バッジが出ます。
4. **こぶし**：音を伸ばしている途中で「うぅん↑」と一瞬だけ音を持ち上げてすぐ戻すと「こぶし」と判定されます（演歌の要領で）。
5. マイクがない環境では**「シミュレーション歌唱」**を押すと、合成音声（ストレート→しゃくり→ビブラート→こぶし）が同じ解析パイプラインを通る様子を確認できます。

## プライバシーについて
- マイクの音声は、お使いのブラウザの中だけで解析されます。**録音データ・解析結果がサーバーへ送信されることは一切ありません**（本ページは静的配信のみで、送信先そのものがありません）。
- マイクの使用はブラウザの許可ダイアログで制御されます。「停止」を押すとマイクは完全に解放されます。
- 本デモの採点ロジックは学習用の簡易モデルであり、実際の業務用カラオケ採点機の仕様とは無関係の独自実装です。

## 技術メモ
- F0推定: YIN法（差分関数＋累積平均正規化＋放物線補間）を2048サンプル窓で毎フレーム実行
- 音程: 平均律（A4=440Hz）の最寄り半音とのズレをセント値 `1200×log2(f/f_ref)` で算出
- ビブラート: ピッチ残差のゼロ交差から揺れの速さ(4〜8.5Hz)・深さ(8セント以上)・規則性を判定
- しゃくり: ノート確定直前の軌跡が「80セント以上低い位置から概ね単調に上昇」していたら検出
- こぶし: 保持中の音から+60セント以上の山が出て400ms以内に戻ったら検出（ビブラート中は除外）
- 対応ブラウザ: Chrome / Edge / Firefox / Safari の最新版（マイク使用にはHTTPSが必要）

音声信号処理・リアルタイム解析・エッジAIの開発はテクノスフィアの得意分野です。  [技術解説記事を読む](https://technosphere.co.jp/blog/karaoke-scoring-engine) [開発の相談をする](https://technosphere.co.jp/contact)