Help us understand the problem. What is going on with this article?

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

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

2019/12/1追記四和音(セブンス、シックスス)を追加

その他のJSライブラリについてはこちら
※参考:JSライブラリ&フレームワークを試してみたシリーズまとめ(随時更新)

Web Audio APIについてはこちら
※参考:Web Audio APIの機はもうすぐ熟しそう!ブラウザ対応状況♪

鍵盤楽器作成

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

※参考:はじめの一音!tone.js事始める

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】コード切り替えボタンを設置(鍵盤とは未連動)

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

※参考:【Tone.js】コード切り替えボタンと鍵盤の連携

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

※参考:【Tone.js】コード音が読みやすくなるようにリファクタリング

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

※参考:【Tone.js】和音鍵盤に三和音(トライアド・コード)を追加する

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

※参考:【Tone.js】和音鍵盤に四和音(セブンス、シックスス)を追加する

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

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away