ログインなしでもお遊びいただけます。
https://sound-hit.vercel.app/
おんぴしゃは、カラオケや楽器演奏で最初の1音目をドンピシャで当てれるように練習するための音声測定サービスです。
- デバイスから発生した音と同じ高さの声・音が出たか測定します。
- 何回連続で音を当てれたか記録し、ランキング形式で表示します。
カラオケや楽器演奏の上達の要因の1つとして、自分のイメージしている音がすぐに出せるかどうかがあると思います。
今以上に気持ちよく歌ったり、上手に演奏することができるためにゲーム感覚で音感を鍛えたいと考え、このアプリを作ろうと思いました。
- 歌い初めや演奏し初めに音がぶれてしまう方。
- 音感を鍛えたい方。
- イメージどおりの音を出せることに自信のある方。
私自身、歌いだしにぴったり音を当てることに困難を感じているため、そのような方を対象としています。また、音をぴったり当てれる方にもランキング形式を採用することで上位ランクインを目的にご利用いただけると考えています。
カラオケや楽器演奏がうまくなりたい方、音感で競いたい方などが対象です。
一定の音域の中でランダムに音を発生させ、その後ユーザーが発生した音の高さと揃っているか判定します。
| トップ画面 |
会員登録 |
 |
 |
| ドロップダウンからモードを選び次の画面に進めます。また右上のボタンからログイン・会員登録ができます。 |
ユーザー名、メールアドレス、パスワードを入力して登録を行うことができます。 |
| ログイン画面 |
遊び方画面 |
 |
 |
| メールアドレスとパスワードでのログイン、またGithub・Googleでもログインをすることができます。 |
このサービスの使い方と主な機能の紹介を見ることができます。 |
| プロフィール画面 |
プロフィール編集画面 |
 |
 |
| ユーザー名、性別、音域の他にゲームスコアを確認できます。 |
ユーザー名、性別、音域を編集することができます。 |
| パスワードリセット画面 |
お問い合わせ画面 |
 |
 |
| 登録されているメールアドレスを入力することでパスワードリセット用のメールが届きます。 |
お問い合わせメールを送ることができます。 |
| 難易度・性別選択画面 (通常モード) |
ゲーム画面 |
 |
 |
| ゲーム難易度と性別を選択できます。プロフィール画面もしくはこのページで性別を選択すると、対応した音域の中から出題される音が決まります。 |
スピーカボタンを押すと出題された音を確認できます (難易度:難しいを除く)。マイクボタンを押すと収音し、音程が一致しているか判定を行います。 |
| 結果画面 |
ランキング画面 |
 |
 |
| 判定結果を表示します。また、結果をLINE・Xで共有することができます。 |
登録しているユーザーのスコアを各難易度で確認できます。 |
カラオケアプリ、再生された音の高さを当てるアプリ、発声した音程をチェックするアプリはありますが、デバイスからランダムで出た音と実際に自分が発した音声が合っているか判定するサービスはありませんでした。
吹奏楽などで使うチューナーやカラオケとは異なり、第1音の発生に焦点を置いているところがポイントです。
| カテゴリ |
技術 |
| 開発環境 |
Docker |
| フロントエンド |
TypeScript / React / Next.js |
| バックエンド |
Ruby / Ruby on Rails(API モード) |
| データベース |
PostgreSQL |
| 認証 |
NextAuth.js / devise-token-auth |
| UI構築 |
shadcn/ui |
| CI/CD |
Github Actions |
| CSSフレームワーク |
Tailwind CSS |
| インフラ |
Vercel / fly.io |
| Web API |
Web Audio API |
Figma : https://www.figma.com/file/ATFMmWCGUM49Lc8pyUutuV/sound_hit?type=design&node-id=0%3A1&mode=design&t=DmyONjpwjUrwYCXh-1
-
ピアノの鍵盤を表示してクリックで音を再生。音階の確認ができる
-
出題された音階とハモる音（ドを出題した場合はミを発声するなど）を出す練習をする機能。
なお、このアプリではハモる音を主旋律の3度上もしくは3度下とする。
-
連続で音当てをし、10回中何回当てれたかを計測する機能。
