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

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

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

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

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

Web Audio API

まず、Tone.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】和音鍵盤に四和音(セブンス、シックスス)を追加する

五和音(テンション)コード他を追加(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切り替え可能)

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

i-ryo
フロントエンドエンジニア。神奈川に住まう四十路のオジキ。 DTP→Webデザイナーから転向し今に至る。引き続きコツコツの日々。ブログも書いてます。 Webづくり やりたい時が 始め時!
https://www.i-ryo.com
Why not register and get more from Qiita?
  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