概要
Drum Fills & Chops Generator
ソースコード
一部のマニアックなドラマーにしか需用の無さそうなサービスを作ってしまった。
ドラムにはフィルインというものがある。
「ドツタツドツタツ」
というのが普通のビートとすると、フィルインというのは
「タカトン」
みたいな奴だ。
そのフィルインの中でも1小節、2小節という長めのフィルインを無限に自動生成できるというものだ。
使った技術
Nuxt.js、Firebase、Ongaq.js
Ongaq.jsは最近出てきたライブラリなので聞いたことが無い人が多いと思う。
Ongaq.jsの簡単な説明
API経由で呼び出して、無料でもなかなか良い音色の楽器を使用して音楽をJSで作成出来る。
簡単に音が鳴るところまで作ることが出来る。
SetInterval()は実は精度が低かったり、シーケンサーみたいのをJSで一から実装するのは結構メンドイのだ。
const ongaq = new Ongaq ({
api_key: "YOUR API KEY",
volume: 40,
bpm: 130,
onReady: ()=>{
ongaq.start();
}
})
const my_drums = new Part ({
sound: "small_cube_drums"
})
my_drums.add( new Filter ({
key: "kick",
active: beat => beat % 8 === 0
}))
ongaq.add( my_drums )
API KEYの取得とアクセス制限の解除、ongaq.jsのインポートは要りますが、ほぼ上記のような感じで簡単にドラムが鳴ります。
Nuxt.jsとFirebase
SSRをしなくてもNuxtは十分恩恵があると思っているので、使うようにしている。
初期の環境構築の手間を省けるし、規約に乗っかるので破綻しにくいのも良い。
Googleアカウントでログインし、作ったフィルインを保存できる機能を実装したかったので、Firebase AuthenticationとFirestoreを使って実現した。
もはや個人開発ではFirebase一択では無いかと思う。
唯一AuthenticationとVuexの連携でハマってしまった。
別記事：Firebase Authenticationで「[vuex] Do not mutate vuex store state outside mutation handlers.」エラー
良いところ
生成されたフィルのアイデアを貰ったり、保存して練習したり出来る。
奇数割のパターンを4/4の16分音符に当てはめたり、現代のドラムっぽいフィルの作り方が出来るのがポイントだと思っている。
課題
といってもまだまだ課題有
・3連符に対応していない（結構痛い）
・パターンを再生成した時に音楽の再生を止めてしまう（シームレスに変わればもっと良い）
・スマホだと結構見づらい
・Googleアカウントでしかログイン対応してない
まとめ
今後は上の課題を解決したり、一回パターンが演奏された毎に別のパターンが生成されて無限に人間とドラムバトルが出来たりようになると面白いと思っているのでいつかやりたいですね。
類似のサービスはほぼ無かったか、あっても少し不便なものでした。
個人開発をするときは、「自分以外誰も使わなかったとしても自分は使いたい」と思えるようなものを作れれば良いと思います。
そういう意味では今回は成功です！