Tone.jsはブラウザで音楽を作ることができるJSライブラリ。Web Audio APIの技術が使われています。Tone.jsを習得するためにやってみたことをここにまとめます(随時更新です!)
その他のJSライブラリについてはこちら
※参考:JSライブラリ&フレームワークを試してみたシリーズまとめ(随時更新)
※2023/12/31追記:シンセジェネレーター
シンセジェネレーター(2023/12/31追加)
Web Audio API
まず、Tone.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】和音鍵盤に四和音(セブンス、シックスス)を追加する
五和音(テンション)コード他を追加(2020/01/05追加)
※参考:【Tone.js】和音楽器に五和音(テンションコード)他を追加する
リズム音
シンセでリズムを作る方法を調べた。(2020/03/01追加)
※参考:【Tone.js】シンセでリズム音を作る方法を調べた
シンセのリズム音でドラムパッドを作った!(2020/04/04追加)
※参考:【Tone.js】リズム系のシンセ音でドラムパッドを作った
ドラムパッドにエンベロープとエフェクトを設定(2020/04/27追加)
※参考:【Tone.js】ドラムパッドにエンベロープ(ADSR)とエフェクトを設定する
ビート打ち込み
ビートの打ち込み事始め。まずはエイトビートから。(2020/05/12追加)
※参考:【Tone.js】Tone.Loop()でエイトビートを鳴らす
Tone.Part()で細かいタイミングのエイトビート打ち込み(2020/05/24追加)
※参考:【Tone.js】Tone.Part()で細かいタイミングのエイトビートを鳴らす
Tone.Part()で1〜8拍子を鳴らす。変拍子もいけた!(2020/05/31追加)
※参考:【Tone.js】Tone.Part()でいろいろなリズムを鳴らす ※1〜8拍子編
Tone.Part()で16ビートなど細かいリズム。跳ねたシャッフルビートも(2020/06/08追加)
※参考:【Tone.js】Tone.Part()でいろいろなリズムを鳴らす ※12〜32拍子&シャッフル編
BPMとリズムが切り替えられるビート・プレイヤーを作った!(2020/06/20追加)
※参考:【Tone.js】いろいろなリズムが鳴らせるビート・プレイヤーを作った(BPM切り替え可能)
React + Tone.jsアプリ
コードプレイヤー(2021/09/16追加)
※参考:【React & Tone.js】ビートプレイヤーを作った(ビートとBPMを変更可能)
ビートプレイヤー(2021/10/27追加)
※参考:【React & Tone.js】コードプレイヤーを作った(鍵盤でいろいろなコードを調べるアプリ)
スケールプレイヤー(2021/11/28追加)
※参考: 【React & Tone.js】スケールプレイヤーを作った(いろいろなスケールを調べて音も聴けるアプリ)
シンセジェネレーター(2023/12/31追加)
※参考:【Tone.js & Next.js】Tone.jsでシンセジェネレーターを作った
今後も更新していきます!