Tone.jsはブラウザで音楽を作ることができるJSライブラリ。Web Audio APIの技術が使われています。Tone.jsを習得するためにやってみたことをここにまとめます(随時更新です!)
※2019/12/1追記:四和音(セブンス、シックスス)を追加
その他のJSライブラリについてはこちら
※参考:JSライブラリ&フレームワークを試してみたシリーズまとめ(随時更新)
Web Audio APIについてはこちら
※参考:Web Audio APIの機はもうすぐ熟しそう!ブラウザ対応状況♪
鍵盤楽器作成
CDNでTone.jsを読み込んで「ポーン」という一音だけがなる1音鍵盤を作る。
1音鍵盤を13音鍵盤に拡張。コードの冗長な部分をリファクタリング。
※参考:【tone.js】一音鍵盤を1オクターブに拡張したらコードが冗長だったので書き直した
シンセ音の変更
Tone.jsに用意されたいろいろなシンセ音を知る。
13音鍵盤のシンセ音を変更してみる(その1)
※参考:【Tone.js】十三音鍵盤のシンセ音を変更してみる(その1)
13音鍵盤のシンセ音を変更してみる(その2)
※参考:【Tone.js】十三音鍵盤のシンセ音を変更してみる(その2)
メロディ打ち込み、音の加工
マリオのメロディを打ち込んで再生してみる。シンセ音を加工したりエフェクターを加えてみたりする。
※参考:【Tone.js】メロディ再生、シンセ音源加工、エフェクター接続(マリオを打ち込んだ!)
前回のメロディは音の長さやタイミングか均一だったため、もう少しタイミングや長さ、音量を調整してみる。
※参考:【Tone.js】Tone.Part()でメロディのタイミング、音の長さ、音量を調節する(マリオのゲームオーバー音)
和音楽器作成
PolySynth()メソッドを使って複数の音を同時に鳴らす(和音)。まずは3コードから。
※参考:【Tone.js】PolySynth()で和音を鳴らす(3コード楽器を作る)
コード数を増やそうとしたが、拡張性が悪く感じたため、ループやイベントを使ってリファクタリングする。
※参考:【Tone.js】3コード楽器のコードをリファクタリング(ループとイベントと即時関数)
3コード楽器を1オクターブに拡張する。メジャーコード版とマイナーコード版を作る。
※参考:【Tone.js】3コード楽器を1オクターブに拡張する
メジャーコードとマイナーコードを切り替えるボタンを作成。選択しているコードの文字をリアルタイムに表示(音とは未連動)
※参考:【Tone.js】コード切り替えボタンを設置(鍵盤とは未連動)
コード切り替えボタンと音を連動!
コード音のコードが読みにくかったので配列の書き方を変更(2019/11/17追記)
※参考:【Tone.js】コード音が読みやすくなるようにリファクタリング
三和音(トライアド・コード)のコードを追加(2019/12/01追記)
※参考:【Tone.js】和音鍵盤に三和音(トライアド・コード)を追加する
四和音(セブンス、シックスス)のコードを追加(2019/12/08追加)
※参考:【Tone.js】和音鍵盤に四和音(セブンス、シックスス)を追加する
今後も更新していきます!