ブラウザで開いて、好きな音をスイーツのキャラクターに渡す。それだけで小さな曲ができる音楽ミキサー「PATI♪BEAT（パティビート）」を作りました。
きっかけは、「音楽の知識がなくても、音を重ねる楽しさだけを味わえるものがほしい」と思ったことです。一般的な作曲ソフトは便利ですが、最初に見るボタンや数字が多く、音を出す前に迷ってしまうことがあります。そこで今回は、音楽用語をできるだけ減らし、音を選ぶ → キャラに担当させる → 再生するの3段階に絞りました。
この記事では遊び方だけでなく、音をブラウザ内で作る仕組み、手持ちの曲を読み込む機能の注意点、開発中に失敗したことまでまとめます。先に触ってみたい方は、下のボタンからどうぞ。音が出るので、最初は端末の音量を少し小さめにしておくと安心です。
PATI♪BEATでできること
- 8人のスイーツキャラに、ドラム・ベース・メロディなどの音を割り当てる
- 16マスのリズムをタップして、自分だけのパターンに変える
- テンポ、キー、ハネ具合、全体の音量を調整する
- 用意されたレシピから、8人編成の曲をすぐに鳴らす
- 手持ちの音楽ファイルを読み込み、低音・中音・高音の3役に分けて演奏させる
インストールや会員登録は不要です。画面の幅に合わせて配置が変わるので、パソコンでもスマートフォンでも使えます。
最初の3分で遊ぶ方法
- 「おとのパレット」から、気になる音をひとつ選びます。
- 円形ステージにいるキャラをタップして、その音の担当にします。
- 別の音を選び、別のキャラにも担当させます。
- 中央の再生ボタン、またはパソコンのスペースキーで再生します。
- 担当済みのキャラをもう一度タップすると、16マスのリズムを編集できます。
最初から8人ぶん選ぶのが大変なら、「いちごパフェ」「チョコミント」「ゆめかわ」「まんぷく」のレシピを押してみてください。完成した組み合わせが入るので、そこから1人ずつ音を交換するほうが仕組みをつかみやすいです。
音がまとまりやすい組み合わせ
自由に組み合わせてよいのですが、最初は次の順番で足すと曲らしくまとまりやすくなります。
- ビートを1人：曲の土台。まずキックやスネア系を選びます。
- ベースを1人：低音が加わると、短いループにも流れが生まれます。
- メロディを1〜2人：同時に増やしすぎると混み合うので、少しずつ足します。
- ボイスやキラキラを最後に：空いている場所を飾る感覚で使います。
テンポは90〜110くらいから始めると、各キャラの動きと音の関係を追いやすいです。音がごちゃごちゃしたときは、新しい音を足すより、リズム編集でいくつかのマスを消して「鳴らさない場所」を作ると整理できます。作曲では音を選ぶことと同じくらい、休符を作ることが大切だと実感しました。
円形ステージにした理由
画面の中央には再生ボタンがあり、その周りを16個のステップがぐるっと進みます。一般的な音楽ソフトの横長タイムラインではなく円形にしたのは、ループが「終わったら最初へ戻る」ことを視覚で伝えたかったからです。
登場するのは、モカ（マカロン）、ドナ（ドーナツ）、プリン、ベリィ（いちご）、ソフィ（ソフトクリーム）、キャンディ、ロール（ロールケーキ）、ゼリィの8人です。担当が決まると、ドラムスティックやマイクなどの小物が現れます。鳴る瞬間には腕と口も動くため、「どの音が誰なのか」を耳だけでなく目でも追えるようにしました。
音源ファイルを使わず、ブラウザで音を作る
内蔵しているキック、スネア、ハイハット、ベース、ベル、マリンバ、ボイスなどは、録音済みの音声を再生しているわけではありません。ブラウザ標準のWeb Audio APIを使い、再生するたびに波形とノイズを組み合わせて合成しています。
たとえばキックは、低いサイン波の音程を短時間で下げることで「ドン」という感触を作ります。ハイハットはノイズから低い成分を削り、ベルは2つの波を掛け合わせるFM合成です。ボイスも人の録音ではなく、人声らしく聞こえる周波数の山をフィルターで再現しています。
この方式には、読み込みが速い、テンポやキーを変えやすい、使用素材の出所が明確になるという利点があります。一方で、本物の楽器を録音した音ほど自然ではありません。今回はその弱点を隠さず、お菓子のキャラクターに合う、少し電子音らしい音色としてまとめました。
手持ちの曲を3つの役に分ける機能
音楽ファイルをドロップすると、テンポを推定し、音を次の3帯域に分けてキャラへ割り当てられます。
- 低音：キックやベースが多い帯域
- 中音：歌声、コード、主旋律が集まりやすい帯域
- 高音：ハイハットや明るい装飾音が多い帯域
ここで行っているのは、AIによるボーカル分離のような高度な「パート抽出」ではなく、フィルターで周波数を3つに分ける処理です。そのため、声だけ・ドラムだけをきれいに取り出せるわけではありません。ただ、3人が同じ曲の違う部分を担当しているように聞こえ、リズムのマスを抜けばチョップしたような変化も作れます。
読み込んだ音楽ファイルは端末のブラウザ内だけで処理し、サーバーへ送信しません。ページを閉じれば、アプリ側に曲のデータは残りません。なお、他人の楽曲を使って録音物を公開・配布する場合は、その曲の利用条件や著作権を別途確認してください。
開発中にうまくいかなかったこと
150BPMを75BPMと判定してしまう
テンポの自動判定では、速い曲を半分のBPMとして読む問題が出ました。150BPMと75BPMは拍の位置が重なるため、機械にとってはどちらも筋が通ります。
そこで、半分の周期にも強い拍がある場合は速い候補を優先する条件を追加しました。手元の11パターンでは10パターンが想定どおりになりましたが、175BPMを87.6BPMと解釈する例は残りました。自動判定を万能に見せるより、利用者が直せるほうが誠実だと考え、テンポを手動調整できるようにしています。
音とキャラの口がずれる
もうひとつは、取り込んだ曲でキャラの口パクがずれる不具合です。4小節ぶんを解析しているのに、動きには1小節ぶんの情報しか渡していなかったことが原因でした。コード上ではエラーが出ないため、実際に鳴らして初めて分かりました。音楽アプリでは「処理が動くこと」と「気持ちよく同期して聞こえること」は別の確認が必要です。
外部ライブラリを外して作り直した理由
初期版はReactを外部から読み込む構成でした。開発はしやすかったのですが、通信できない環境では必要なファイルを取得できず、画面が開きません。誰かにURLやHTMLを渡したとき、「環境によって動かない」という状態を減らしたかったため、途中で素のHTML・CSS・JavaScriptへ書き直しました。
現在はキャラクターもSVGで描き、画面、音、操作をひとつのHTMLにまとめています。機能を増やすだけでなく、依存するものを減らすことも使いやすさにつながると学びました。
AIに任せたこと、人が決めたこと
今回はAIと相談しながら、画面構成、音色を作るコード、テンポ解析、キャラクターのSVGなどを組み立てました。ただし、出てきた案をそのまま公開したわけではありません。実際に何度も鳴らし、音が重すぎる部分、操作が分かりにくい部分、キャラの動きがずれる部分を人の目と耳で確認して直しています。
特に音楽は、プログラムが正しく動いていても、聞くと落ち着かなかったり単調だったりします。「この音は気持ちいいか」「初めて見た人が次に押す場所を分かるか」といった判断は、最後まで自分で行いました。AIは制作速度を上げてくれますが、公開してよい品質かを決める役割まで任せないことが大切だと感じています。
使う前に知っておきたいこと
- ブラウザの仕様により、最初の音は再生ボタンなどを操作した後に鳴ります。
- 端末やイヤホンによって音量差があるため、最初は小さめの音量をおすすめします。
- 古いブラウザでは、音声ファイルの形式によって読み込めない場合があります。
- BPM推定や3帯域分割は補助機能です。曲によっては手動調整が必要です。
- 読み込んだ曲はアップロードされませんが、公開や配布に使う場合は楽曲の権利を確認してください。
まとめ
PATI♪BEATは、本格的な作曲ソフトの代わりではありません。音楽を難しく考える前に、「この音とこの音を一緒に鳴らすとどうなるだろう」と試すための、小さな入口として作りました。
まずはレシピをひとつ鳴らし、好きなキャラの音を交換してみてください。慣れてきたら、リズムのマスを減らしたり、テンポやキーを変えたりすると、同じ8人でもかなり違う曲になります。