ブラウザ上でビートメイク（作曲）して投稿できるアプリ を作りました。
このアプリの解説をしていきたいと思います。

バナナビートメーカー

バナナビートメーカー

このアプリは無料で利用できます。
ブラウザがあれば開くことができて、誰でもすぐに使うことができます。

作曲できるビートの長さは一小節です。
ハットやスネアなどのリズムパターンを入力し、再生ボタンを押すと、そのリズムが再生されます。
停止ボタンで再生を停止できます。

投稿ボタンを押せば、その作曲したビートを投稿することができます。
他の人が作曲したビートを見るには右上の「ビートの一覧」をクリックします。

複数選べるドラムセット

バナナビートメーカーの作曲ではドラムセットを複数から選ぶことができます。
ドラムセットはそれぞれバスドラやスネアの音が違っており、ドラムセットを選ぶだけで音を変えることができます。

ローファイなドラムセットもあれば、ベースが強調されているドラムセットもあります。
打ち込みでビートを刻んだらドラムセットを変更して、どういう音になるか確認してみるのも面白いです。

また、他のユーザーが投稿したビートもドラムセットを変えれば音を変えることができます。
ですので、他人のビートでドラムセットを変えて音を楽しむ、ということも可能です。

使い方ガイド：はじめてのビート作成

バナナビートメーカーの使い方を解説します。

まず適当に「クローズハット」の行の横に並んでいる四角いボタンをクリックしてみてください。
クリックすると色がハイライトされます。この状態が「ON」状態です。ハイライトされてない状態は「OFF」状態です。

下にある「再生」ボタンを押します。するとON状態の音源が時間軸にそって再生されます。
再生を停止したい場合は「停止」ボタンを押します。

クローズハットは4個の集まりの先頭をそれぞれONにしてみてください。
それから「バスドラ」と「スネア」も適当にONにします。
ONにしたら一度停止して再生ボタンを押してください。するとONにした音源が再生されます。

ズン、チャ、ズンズン、チャ、というようなバスドラとスネアの配置にしてみてください。
これはエイトビートです。

ビートの速さを変えたい場合は下にある「BPM」を変更します。デフォルトでは120になってますが、これを100などにするとビートが遅くなります。変更した場合は停止ボタンを押して再生ボタンを押してください。

良い感じのビートが出来たら下の「投稿」ボタンを押してビートを投稿してみましょう。
投稿すると右上のメニューの「ビートの一覧」から投稿したビートを聴くことができます。

制作で苦労した点

作曲アプリは作るのが初めてでした。
そのため、どういう設計が定石なのかわからない状態で作りました。

私の長年の勘で設計してみたところ、無事にハマりました。
簡単な計算式を書くだけでちゃんと動くようになったので、意外と作曲ソフトもそんなにハードルは高くないのか、と思いました。

ビートメイキングの思い出

思えば私がビートメイクを始めたのは20代の頃でした。
あの頃はまだ私もピチピチちゃぷちゃぷで、イケメンのナイスガイだったような気がします。

ビートメイクしようにもお金が無かったので、フリーソフトで最初は始めました。
midiの作曲ソフトが無料で使えたので、それを使って作曲していたような記憶があります。

一時期ニコニコ動画にも楽曲を投稿してたことがありましたが、今では全部消してしまってます。
残しておけば懐かしい気分になれたかなと今は思っています。

その内、お金ができてFL Studioという作曲ソフトを買いました。
それで今も作曲はしています。

バナナビートメーカーを作ってわかったこと

このアプリを作ってわかったことですが、一小節のループでもいろいろ試し用はあるということです。
人によっては違うセンスで作曲して、他の聞く人を驚かせることもあるかもしれません。

このアプリは気軽に楽曲を投稿できますので、そういう意味ではハードルの低い良いアプリと言えます。

私はもうプログラミングをはじめて何十年も経ってますが、昔の私がこのアプリを見たら驚くかもしれません。
「え、俺、こんなアプリ作れるの？」
となって、目ん玉ガクガクでしょう。

音源の用意

ドラムセットの音源を用意するわけですが、難しいのが音量調節です。
新しいドラムセットを作っていたのですが、ベースの音量がでかくなってしまいました。

ベースにはイコライザーと歪み系のエフェクトを掛けていたんですが、それで音量が大きくなったみたいです。
開発環境では気付かずにアップロードしてみてやっと気付いたぐらいです。

やはり開発環境だとわからないことが多いですね。
ベースがでかくて他のスネアが小さいとか、そんなことも。

再調整するのも面倒なのでそのままにしてますが・・・（おいおい）。

HipHop系のビートメイクの思い出

私は20代のころからHipHop系のビートメイクをするようになりました。
あまり上手ではないんですが……。

最初はmidiを使って作曲していました。
midiでHipHopトラック作ってたんです。凄いですよね（笑。

というのも当時はお金がなくて、高いソフトは買えなかったからなんですが……。
ドラムが貧相なので、ドラムだけはmidiじゃなくて別のフリーソフトで組んでましたね。
それをmidiで作った上ネタと重ねてトラックにしてました。

いや～今思い出しても、無料ツールだけでよく頑張ってたな～と言う感じです。

ただ、サンプリングとかするなら、ドラムループと上ネタがあれば、それをAudacityなどのフリーソフトで合成しちゃえば、一応HipHopトラックみたいにはなりますよね。

そういう意味ではHipHopトラックは作るのが簡単なので、敷居は低い感じです。

おわりに

私の開発したアプリ、バナナビートメーカー をよろしくお願いします。
無料で遊べるので気軽に遊んでみてください。
では～。