Javascriptで音楽を作る

今やデスクトップPCからスマホなど幅広いツールでDTM作業ができる時代になりました。
またYoutubeをはじめとする個人動画投稿サイトが注目を浴びる中、作曲や編曲・簡単なBGMの作成など
音楽制作のニーズも高まってきていると思います。
今回はプログラミングで音楽を制作できるJavascriptのライブラリOngaq Jsについて紹介していきたいと思います。

Ongaq jsの紹介

Ongaq Jsとは、株式会社コードナインスがリリースしているJavaScriptのライブラリです。
基本的に利用料金はフリーで、試しで利用する分には十分な13種類の楽器が利用できます。
有料版になると、使える楽器が大幅に増え70種類の楽器が使え、Ongaq Jsの作品集への投稿もできます。（審査有り）
用途としては、楽曲の制作やドラムマシーン、コード進行シミュレーターなどが可能です。

Ongaq Js導入方法

Ongaq js ログイン

Ongaq Jsをプロジェクトに導入

チュートリアル

Ongaq Jsの中身をみてみよう

まずOngaq Jsを動かすにあたり、基盤となる概念を理解する必要があります。
Ongaq Jsには主要なオブジェクト　Ongaq, Part, Filterがあります。
Ongaqオブジェクトは楽曲全体のボリュームやBPM、また接続するAPIの設定を行うなど基盤となるオブジェクトで、Partはギターやドラム、
ベースなど楽曲を構成するパーツのようなものです。一般的なバンド音楽だとボーカル用のメロディ、ギター、ベース、ドラムなどで構成されていると思いますがこれらのことがPartオブジェクトにあたります。
最後にFilterですが、上記のPartオブジェクトをどの部分で、どのぐらいの長さを、どんな音程で鳴らすか設定するオブジェクトで例えばドという音階を1小節目の0拍目に鳴らす。というようなイメージです。

チュートリアルにも書かれていますが、先程述べた全体の設定のためのOngaqオブジェクトは以下のように設定します。

const ongaq = new Ongaq ({
	api_key: "先程ログイン時に控えたAPIキー",
	volume: 100,　//音量
	bpm: 60, //速さ
	onReady: ()=>{
		const button = document.getElementById("button")
		button.className = "button start"
		button.onclick = () => {
			if (ongaq.params.isPlaying) {
				ongaq.pause()
				button.className = "button start"
			} else {
				ongaq.start()
				button.className = "button pause"
			}
		}
	}
})

またPartは以下のように設定します。

const my_guitar = new Part ({
	sound: "jazz_guitar", 
　　　　　　　　//どの楽器を使うか選択する。一覧はこちら(https://www.ongaqjs.com/api/name_sound/)
	measure: 8,　//小節
	repeat: false,　//繰り返し再生の有無
	beatsInMeasure:16,　//小節内の拍数
	maxLap:0　//ループする場合の最大ループ数
})

さらに上で設定したPartを以下のようにFilterで調整します。

my_guitar.add( new Filter ({
	key: "C2",　//音階
	length: 8,　//音を鳴らす長さ
	active: (beat, measure) => beat === 0 && measure === 0
	// 何小節目の何拍目に鳴らす設定。ここでみると1小節目の1泊目に鳴らすという設定。
	//プログラミングのカウント自体は1ではなく0からカウントするため0と表記
}) )

Ongaq Jsを使って簡単な作曲をしてみよう

【カエルの歌】をつくってみよう

では実際に上記したオブジェクトを利用しカエルの歌の最初のパートをつくってみました。

const ongaq = new Ongaq ({
	api_key: "先程ログイン時に控えたAPIキー",
	volume: 100,
	bpm: 60,
	onReady: ()=>{
		const button = document.getElementById("button")
		button.className = "button start"
		button.onclick = () => {
			if (ongaq.params.isPlaying) {
				ongaq.pause()
				button.className = "button start"
			} else {
				ongaq.start()
				button.className = "button pause"
			}
		}
	}
})
const my_guitar = new Part ({
	sound: "jazz_guitar",
	measure: 8,
	repeat: false,
	beatsInMeasure:16,
	maxLap:0
})

function melody($key, $beat, $measure){
	my_guitar.add( new Filter ({
		key: $key,
		length: 8,
		active: (beat, measure) => beat === $beat && measure === $measure
	}) )
}

// Filterを複数書かないようにFunction化しています。

// １小節目
melody('C2',0,0);　//ド
melody('D2',4,0);　//レ
melody('E2',8,0);　//ミ
melody('F2',12,0);　//ファ

// 2小節目
melody('E2',0,1);　//ミ
melody('D2',4,1);　//レ
melody('C2',8,1);　//ド

// 3小節目
melody('E2',0,2);　//ミ
melody('F2',4,2);　//ファ
melody('G2',8,2);　//ソ
melody('A2',12,2);　//ラ

// 4小節目
melody('G2',0,3);　//ソ
melody('F2',4,3);　//ファ
melody('E2',8,3);　//ミ

// 5小節目
melody('C2',0,4);　//ド
melody('C2',8,4);　//ド

// 6小節目
melody('C2',0,5);　//ド
melody('C2',8,5);　//ド

// 7小節目
melody('C2',0,6);　//ド
melody('C2',2,6);　//ド
melody('D2',4,6);　//レ
melody('D2',6,6);　//レ
melody('E2',8,6);　//ミ
melody('E2',10,6);　//ミ
melody('F2',12,6);　//ファ
melody('F2',14,6);　//ファ

// 8小節目
melody('E2',0,7);　//ミ
melody('D2',4,7);　//レ
melody('C2',8,7);　//ド

ongaq.add( my_guitar );
//最後にPartとFilterで定めた構成をOngaqに追加している

今回はわかりやすいようにmelodyというFunctionを作り各音の構成を一つ一つ表示しましたが、さらにそれぞれの音の構成を配列化しよりスリムにすっきり記述することもできると思います。

プログラミングと音楽の今後について

既存のDTMに依存しない自分だけのDTMを作る

この記事を書いている私自身もそうなのですが、DTMを自作するというようなことは考えたこともありませんでした。
もちろん専用に開発されたデバイスやプログラムは昔から存在していますがどうしても機能が多い分学習コストがかかります。
このOngaq Jsを利用し簡単な自分だけのDTMを作りより簡単に楽曲の制作ができ、さらに既存のDTMの足りない部分を補うなどより整った楽曲制作の環境を作れるのではないでしょうか。

参考

https://www.ongaqjs.com/tutorial/