Web Audio APIによって、Webブラウザ上で音楽を奏でられるようになりましたが、このAPIはかなり低レベルなものとなっています。何でもできますが、すべて自分で実装しなければなりません。そのため、なかなか普及していません。 そこで使ってみたいのがフレームワークになるライブラリです。今回はTone.jsを紹介します。

Tone.jsの使い方

Tone.jsのコード例です。

var synth = new Tone.FMSynth().toMaster()

//schedule a series of notes to play as soon as the page loads
synth.triggerAttackRelease('C4', '4n', '8n')
synth.triggerAttackRelease('E4', '8n', Tone.Time('4n') + Tone.Time('8n'))
synth.triggerAttackRelease('G4', '16n', '2n')
synth.triggerAttackRelease('B4', '16n', Tone.Time('2n') + Tone.Time('8t'))
synth.triggerAttackRelease('G4', '16', Tone.Time('2n') + Tone.Time('8t')*2)
synth.triggerAttackRelease('E4', '2n', '0:3')

音がないので分からないですが、ビジュアル的にも音が表現されていて面白いです。

鍵盤を使って音を奏でるデモもあります。

Tone.jsはオクターブ表記で書くので音楽に慣れている人であれば分かりやすいのではないでしょうか。奏でられる音はシンセサイザーのような音になっており、ゲームなどに使ってみると面白そうです。

Tone.jsはJavaScript製のオープンソース・ソフトウェア(MIT License)です。

Tone.js Tonejs/Tone.js: A Web Audio framework for making interactive music in the browser.