【Web Audio】Tone.jsを習得するためにやったことまとめ（随時更新）

Tone.jsはブラウザで音楽を作ることができるJSライブラリ。Web Audio APIの技術が使われています。Tone.jsを習得するためにやってみたことをここにまとめます（随時更新です！）

その他のJSライブラリについてはこちら
※参考：[JSライブラリ&フレームワークを試してみたシリーズまとめ（随時更新）](https://qiita.com/i-ryo/items/a2431232d62d87161f7f)

※**2023/12/31追記**：[シンセジェネレーター](#react--tonejsアプリ)

シンセジェネレーター（**2023/12/31追加**）

# Web Audio API

まず、Tone.jsが利用しているWeb Audio APIを理解する

※参考：[Web Audio APIの機はもうすぐ熟しそう！ブラウザ対応状況♪](https://www.i-ryo.com/entry/2018/01/30/085317)

# 鍵盤楽器の作成

CDNでTone.jsを読み込んで「ポーン」という一音だけがなる1音鍵盤を作る。

※参考：[はじめの一音！tone.js事始める](https://www.i-ryo.com/entry/2018/06/08/000326)

1音鍵盤を13音鍵盤に拡張。コードの冗長な部分をリファクタリング。

※参考：[【tone.js】一音鍵盤を1オクターブに拡張したらコードが冗長だったので書き直した](https://www.i-ryo.com/entry/2018/06/27/220230)

# シンセ音の変更

Tone.jsに用意されたいろいろなシンセ音を知る。

13音鍵盤のシンセ音を変更してみる（その1）

※参考：[【Tone.js】十三音鍵盤のシンセ音を変更してみる（その1）](https://www.i-ryo.com/entry/2018/11/01/223606)

13音鍵盤のシンセ音を変更してみる（その2）

※参考：[【Tone.js】十三音鍵盤のシンセ音を変更してみる（その2）](https://www.i-ryo.com/entry/2018/12/31/103708)

# メロディ打ち込み

マリオのメロディを打ち込んで再生してみる。シンセ音を加工したりエフェクターを加えてみたりする。

※参考：[【Tone.js】メロディ再生、シンセ音源加工、エフェクター接続（マリオを打ち込んだ！）](https://www.i-ryo.com/entry/2019/05/21/222200)

前回のメロディは音の長さやタイミングか均一だったため、もう少しタイミングや長さ、音量を調整してみる。

※参考：[【Tone.js】Tone.Part()でメロディのタイミング、音の長さ、音量を調節する（マリオのゲームオーバー音）](https://www.i-ryo.com/entry/2019/06/03/201728)

# コードの研究

### スリーコード鍵盤

PolySynth()を使って複数の音を同時に鳴らす（和音）。まずは3コードから。

※参考：[【Tone.js】PolySynth()で和音を鳴らす（3コード楽器を作る）](https://www.i-ryo.com/entry/2019/06/12/235650)

コード数を増やそうとしたが、拡張性が悪く感じたため、ループやイベントを使ってリファクタリングする。

※参考：[【Tone.js】3コード楽器のコードをリファクタリング（ループとイベントと即時関数）](https://www.i-ryo.com/entry/2019/06/30/234008)

### コード鍵盤（マイナー/メジャー）

3コード鍵盤を1オクターブに拡張する。メジャーコード版とマイナーコード版を作る。

※参考：[【Tone.js】3コード楽器を1オクターブに拡張する](https://www.i-ryo.com/entry/2019/07/30/235136)

メジャーコードとマイナーコードを切り替えるボタンを作成。選択しているコードの文字をリアルタイムに表示（音とは未連動）

※参考：[【Tone.js】コード切り替えボタンを設置（鍵盤とは未連動）](https://www.i-ryo.com/entry/2019/08/20/075751)

コード切り替えボタンと音を連動！

※参考：[【Tone.js】コード切り替えボタンと鍵盤の連携](https://www.i-ryo.com/entry/2019/09/08/190342)

コード音のコードが読みにくかったので配列の書き方を変更（2019/11/17追記）

※参考：[【Tone.js】コード音が読みやすくなるようにリファクタリング](https://www.i-ryo.com/entry/2019/11/17/193131)

### コード鍵盤（トライアド/セブンス/テンション）

三和音（トライアド・コード）のコードを追加（2019/12/01追記）

※参考：[【Tone.js】和音鍵盤に三和音（トライアド・コード）を追加する](https://www.i-ryo.com/entry/2019/12/01/220308)

四和音（セブンス、シックスス）のコードを追加（2019/12/08追加）

※参考：[【Tone.js】和音鍵盤に四和音（セブンス、シックスス）を追加する](https://www.i-ryo.com/entry/2019/12/08/133406)

五和音（テンション）コード他を追加（2020/01/05追加）

※参考：[【Tone.js】和音楽器に五和音（テンションコード）他を追加する](https://www.i-ryo.com/entry/2020/01/05/113631)

# リズム音

シンセでリズムを作る方法を調べた。（2020/03/01追加）

※参考：[【Tone.js】シンセでリズム音を作る方法を調べた](https://www.i-ryo.com/entry/2020/03/01/160443)

シンセのリズム音でドラムパッドを作った！（2020/04/04追加）

※参考：[【Tone.js】リズム系のシンセ音でドラムパッドを作った](https://www.i-ryo.com/entry/2020/04/04/191333)

ドラムパッドにエンベロープとエフェクトを設定（2020/04/27追加）

※参考：[【Tone.js】ドラムパッドにエンベロープ（ADSR）とエフェクトを設定する](https://www.i-ryo.com/entry/2020/04/27/082039)

# ビート打ち込み

ビートの打ち込み事始め。まずはエイトビートから。（2020/05/12追加）

※参考：[【Tone.js】Tone.Loop()でエイトビートを鳴らす](https://www.i-ryo.com/entry/2020/05/12/185309)

Tone.Part()で細かいタイミングのエイトビート打ち込み（2020/05/24追加）

※参考：[【Tone.js】Tone.Part()で細かいタイミングのエイトビートを鳴らす](https://www.i-ryo.com/entry/2020/05/24/153505)

Tone.Part()で1〜8拍子を鳴らす。変拍子もいけた！（2020/05/31追加）

※参考：[【Tone.js】Tone.Part()でいろいろなリズムを鳴らす ※1〜8拍子編](https://www.i-ryo.com/entry/2020/05/31/194741)

Tone.Part()で16ビートなど細かいリズム。跳ねたシャッフルビートも（2020/06/08追加）

※参考：[【Tone.js】Tone.Part()でいろいろなリズムを鳴らす ※12〜32拍子&シャッフル編](https://www.i-ryo.com/entry/2020/06/08/060621)

BPMとリズムが切り替えられるビート・プレイヤーを作った！（**2020/06/20追加**）

※参考：[【Tone.js】いろいろなリズムが鳴らせるビート・プレイヤーを作った（BPM切り替え可能）](https://www.i-ryo.com/entry/2020/06/20/055657)

# React + Tone.jsアプリ

コードプレイヤー（2021/09/16追加）

※参考：[【React & Tone.js】ビートプレイヤーを作った（ビートとBPMを変更可能）](https://www.i-ryo.com/entry/2021/09/16/072438)

ビートプレイヤー（2021/10/27追加）

※参考：[【React & Tone.js】コードプレイヤーを作った（鍵盤でいろいろなコードを調べるアプリ）](https://www.i-ryo.com/entry/2021/10/27/064429)

スケールプレイヤー（2021/11/28追加）

※参考：[ 【React & Tone.js】スケールプレイヤーを作った（いろいろなスケールを調べて音も聴けるアプリ）](https://www.i-ryo.com/entry/2021/11/28/153950)

シンセジェネレーター（**2023/12/31追加**）

※参考：[【Tone.js & Next.js】Tone.jsでシンセジェネレーターを作った](https://www.i-ryo.com/entry/2023/12/31/170449)

今後も更新していきます！