どうも、まさとらん（@0310lan）です！
今回は、自分の好きな音楽をJavaScriptでプログラミングしながら作編曲できてしまうライブラリをご紹介します！
簡単なJavaScriptを記述するだけで直感的に音楽を作れるのが特徴で、プログラミングのスキルをフル活用してあなたのオリジナル楽曲を演奏することも可能になります。また、音源のクオリティも高いのですぐにでも本格的な曲を演奏できるのも魅力的です。
音楽に興味のある方はぜひ挑戦してみてください！
なお、JavaScriptの基本はpaizaラーニングの「JavaScript入門編」で学ぶことができますので合わせてチェックしてみてください！
【 Ongaq JS 】
■「Ongaq JS」の使い方
それでは最初に「Ongaq JS」をどのように使えばよいのかについて見ていきましょう。
サイトのトップページにある【登録/ログイン】をクリックして、まずはユーザー登録をしておきます。
ログイン画面が表示されたら【新しくユーザ登録する】のリンクをクリックします。
新規登録画面が表示されるので、メールアドレス・パスワードを入力して登録を済ませましょう！
登録が完了すると自分専用のダッシュボードが表示されます。画面上部には「Ongaq JS」を利用するための【APIキー】が表示されているのでメモしておきましょう。
また【APIキー】を使用するWebサイトのドメインを設定する必要があります。
たとえばですが、https://mysite.comというWebページでOngaq JSを利用する場合は【アクセス許可】の項目に【mysite.com】を入力して保存すればOKです。
ここで登録しているドメインからのみAPIキーが有効になる点に注意しましょう。（複数ドメインの登録が可能）
もしドメインがまだない場合は、下段に表示されている自分の【リモートIPアドレス】の数値を登録することでも利用できます。
■「Ongaq JS」を使ってみよう！
ここからは「Ongaq JS」のライブラリを実際に使いながらプログラムを組み立てていきましょう！
ライブラリ自体は公式のGitHubからダウンロードして使うか、以下のCDN経由からでも利用可能です。
https://cdn.jsdelivr.net/gh/codeninth/ongaq-js/build/ongaq.js
今回は基本的なHTMLファイルを1つ作成して、その中で音楽プログラミングを実行していきたいと思います。そこで、以下のようなHTMLをまずは準備しましょう。
<body> <h1>Ongaq JS Sample</h1> <button id="button">実行</button> <script src="https://cdn.jsdelivr.net/gh/codeninth/ongaq-js/build/ongaq.js"></script> <script> //ここに音楽プログラミングを記述する </script> </body>
ボタンを1つだけ画面に配置しています。このボタンをクリックすることでプログラミングした音楽を再生するようなイメージです。
今回の音楽プログラムはscriptタグ内に記述していますが、もちろん外部ファイルとして読み込んでも問題ありません。
次にOngaq JSの使い方ですが、次のような構文でインスタンスを作成することから始めます。
const ongaq = new Ongaq ({ api_key:【APIキー】, bpm:【テンポ】, volume:【全体の音量】, onReady:【関数】 })
ここで設定するのは冒頭でメモした自分のAPIキーや、楽曲全体のテンポ・音量などになります。【onReady】については、Ongaq JSが音楽を再生できる準備が完了した時点で実行できる関数を設定します。
たとえば、音量90でBPM110の設定で再生準備が完了したらコンソールログに「スタート」と出力するには次のように記述します。
const ongaq = new Ongaq ({ api_key: '************', volume: 90, bpm: 110, onReady: () => console.log('スタート') })
また、便利なプロパティやメソッドも提供されており、【ongaq.params】を利用すると以下のように現在の状態をオブジェクトで取得できます。
{ currentTime: 0 isPlaying: false loading: false originTime: 1578270899351 volume: 90 }
特に【isPlaying】を参照することで、音楽を再生中なのかどうかをプログラム上から確認できるので便利です。
提供されているメソッドでよく使うものとしては以下の2種類です。
ongaq.start() //音楽を再生する ongaq.pause() //音楽を停止する
このメソッドを実行するだけで音楽の再生・停止をコントールできるわけです。
これらの内容を踏まえて、Ongaq JSのインスタンスを作成するときに【onReady】の項目へ次のような記述を追記してみましょう！
const ongaq = new Ongaq ({ ・ ・ onReady: () => { const button = document.getElementById("button"); button.onclick = () => { if (ongaq.params.isPlaying) { ongaq.pause() } else { ongaq.start() } } } })
【ongaq.params】で参照できる【isPlaying】をIF文の条件式にすることで、ボタンをクリックするたびに再生と停止を交互に切り替えることができるわけです。
あとは再生する音楽をプログラミングするだけですね！
ちなみに、ここまでのソースコードは以下のリンクから閲覧できますので合わせて参考にしてみてください！
＜参考リンク＞
■基本的な音をプログラミングしてみよう！
Ongaq JSでは、何らかの音を出すときにあらかじめ音色となる楽器を決めておく必要があります。
ピアノ、ベース、ギター、シンセ、パッド、ストリングス…など、2020年1月時点でおよそ70種類（無料プランの場合は13種類）から選択できるようになっています。（詳細はこちら）
楽器を設定するための構文は以下の通りです。
const instrument = new Part({ sound: 【楽器名】, measure: 【基準の小節数】, mute: 【ミュート機能】 })
【sound】に自分が使いたい楽器名を記述します。
【measure】は繰り返す小節数の基準を決めるのですが、たとえば、4を記述すれば4小節を1つのまとまりとして繰り返すことができます。
【mute】は文字通りミュート機能のことで、trueにすると再生しないように設定できます。
今回はサンプルとしてピアノを次のように設定してみましょう！
const piano = new Part({ sound: 'my_piano', measure: 2, mute: false });
これでピアノの音色を選択したことになり、2小節分を繰り返し再生できるようになるわけです。
さて、実際の音をプログラミングする方法ですが、以下のような構文で組み立てていきます。
instrument.add(new Filter({ type: 【種類】, key: 【音名、コード】, length: 【発音の長さ（拍数）】, volume: 【音量】, active: 【関数】 }))
簡単な和音として【ド・ミ・ソ】を奏でるように記述してみましょう。
piano.add( new Filter({ type: 'note', key: ['C3', 'E3', 'G3'], length: 16 }));
【type】は設定できる種類を以下の3つから選択します。
- 【note】音名を入力できるようにする
- 【arpeggio】アルペジオ奏法を奏でる
- 【pan】音の聞こえる方向を決める
音をプログラミングする場合は【note】を選択するようにしましょう。
【key】には配列で音名を指定するようにします。上記の例ではド(C3)・ミ(E3)・ソ(G3)を指定しています。（音名の詳細はこちら）
【length】は音が発音する長さを拍数で指定します。上記の例だと1回発音すると16拍分の長さ（1小節）で再生されます。（ピアノの場合は発音すると余韻が残るので長めにしておくとよいでしょう）
最後に、いつ発音するのかタイミングを指定しなければいけません。
Ongaq JSでは1小節が16拍で構成されているので、何小節目の何拍目で発音させるかをプログラムしていくわけです。
この発音タイミングをプログラムするときに利用するのが【active】プロパティになります。たとえば、0拍目のときだけ発音するのであれば次のように記述できます。
piano.add( new Filter({ type: 'note', key: ['C3', 'E3', 'G3'], length: 16, active: beat => beat === 0 })); ongaq.add(piano);
【active】プロパティの記述に注目してください。
【beat】という引数を設定していますが、ここに現在の拍数が数値で格納されています。1小節が0〜15までの16拍分ありますので、この数値を利用して発音タイミングを決めることができるわけです。つまり、上記の場合だと各小節ごとに0拍目だけピアノの和音が繰り返し発音されます。
最後にongaq.add()メソッドを利用して楽器を追加すればプログラムは完成です！
実際に和音を奏でている音声は以下のデモを再生してみてください。
ピアノ以外の楽器も基本的には同じ方法で音を奏でることができるようになります。たとえば、ドラムを利用してリズムを組み立ててみましょう。
まずは楽器名を設定します。
const drum = new Part({ sound: 'my_band_drums', measure: 1, mute: false })
次に、ドラムのキックとスネアを4拍分ずつ交互に発音するようにしてみましょう。
drum.add(new Filter({ type: 'note', key: beat => { switch(beat) { case 0: return ['kick'] case 4: return ['snare'] case 8: return ['kick'] case 12: return ['snare'] } }, active: beat => beat % 4 === 0 }))
【key】へ音名を入力するとき、4拍ごとにキックとスネアを交互に選択しているのがポイントです。あとは【active】プロパティで4拍ごとに発音させればよいわけです。
実際のキックとスネアの音声は以下のデモを再生してみてください。
ちなみに音はどんどん追加していくことが可能なので、さらに複雑なリズムやメロディなどをプログラムしていくことができます。一般的なポップスだけでなく、ジャズ・クラシック・ダンスミュージックなどさまざまな音楽を作れるでしょう。
ここまでのサンプルプログラムのソースコードは以下のリンクから閲覧可能です！
＜参考リンク＞
■おまけ（便利機能の紹介）
Ongaq JSには便利な機能が搭載されているので、いくつかピックアップしてご紹介しておきます。
1つ目は【Chordオブジェクト】です。
これは音楽で一般的に利用されているコード名をそのまま指定できるようになる機能で、【ド・ミ・ソ】のように音名をいちいち記述する必要がなくなります。
たとえば【CM9】のコードを作るには次のように記述します。
const CM9 = new Chord ( "CM9",{ octave: 2 } )
この1行だけで以降は【CM9】という変数名をコードとして利用できるようになるわけです。ちなみにoctaveオプションを設定すればルート音の高さを指定できます。
このコード名をたとえば、ピアノの【key】に当てはめると次のようになります。
piano.add( new Filter({ type: 'note', key: CM9, length: 16, active: (beat, measure) => beat % 8 === 0 }));
【key】プロパティにコード名を記述して音を奏でられるようになるわけです。
2つ目は【アルペジオ奏法】です。
これは和音を同時に鳴らすのではなく、1音ずつ順番に連続して発音していく演奏方法になります。たとえば、先ほどのCM9コードを発音するピアノのプログラムを見てみましょう。
piano.add( new Filter({ type: 'note', key: CM9, length: 16, active: (beat, measure) => beat % 8 === 0 }));
このままだとCM9の和音を同時に発音してしまうのですが、このあとに【type】プロパティをアルペジオに設定した記述を追記してみます。
piano.add(new Filter({ type: 'arpeggio', step: 2 }))
【step】はアルペジオの1音ずつ発音するタイミングを拍数で指定できます。
この設定を追記するだけで、和音がアルペジオ奏法に切り替わるわけです。実際の音声は以下のデモを再生してみてください！
3つ目は【パン】です。
これは音が聞こえる方向を左右に振り分けることができる機能になります。値としては-90〜90までの範囲で自由に設定できます。
たとえば、8拍目だけ音が聞こえる方向を逆にするには次のように記述します。
instrument.add( new Filter ({ type: "pan", x: beat => beat % 8 === 0 ? -90 : 90 }) )
アルペジオと同様に【type】を変えた記述を追記するだけです。【x】プロパティに値を指定するのですが、上記のように拍数を条件式にして振り分けることも可能です。
左右に振り分けている実際の音声は以下のデモを再生して聞いてみてください！（イヤホン推奨）
これらの便利機能を活用することで、さらに独自の音楽をプログラミングによって組み立てていくことができるでしょう。
■動画でプログラミングが学べるpaizaラーニング
動画でプログラミングが学べるpaizaラーニングでは、Python、Java、C言語、C#、PHP、Ruby、SQL、JavaScript、HTML/CSSなど、プログラミング初心者でも動画で学べる入門レッスンを公開しています。
「Python入門編」「C#入門編」「ITエンジニアの就活準備編」といった人気講座も完全無料となっておりますので、プログラミングを学びたい方・ITエンジニアを目指したい方はぜひごらんください。
■まとめ
今回はJavaScriptで音楽をプログラミングできるライブラリについてご紹介しました！
公式サイトの作品集にはOngaq JSでプログラムされた素敵な音源も公開されていたり、より詳しいドキュメントやチュートリアルも提供されているので合わせて参考にしてみるとよいでしょう。
ぜひ、みなさんもオリジナルソングをプログラミングして楽しんでみてください！
＜参考リンク＞
「paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。
詳しくはこちら
そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。
詳しくはこちら
