クモのようにコツコツと

フロントエンドエンジニア イイダリョウの技術ブログ。略称「クモコツ」

【Tone.js】十三音鍵盤のシンセ音を変更してみる(その2)

ブラウザで音を出そう「Tone.js」シリーズの続きです。前回はTone.jsに用意されたシンセ音の半分を紹介しました。今回は後編です。それではいってみましょう!

【目次】

※参考:【Tone.js】十三音鍵盤のシンセ音を変更してみる(その1)_ - クモのようにコツコツと

INSTRUMENTの順番が入れ替わっている??

前回、チュートリアルサイトの「INSTRUMENT」メニューを上から順番に紹介して上半分くらいで終わったつもりなだったのだが、今回ページを見てみたら順番が入り乱れています。しばらく見ない間にメニューの順番が変わるような更新があったのでしょうか??

現在の「INSTRUMENT」メニューの順番は下記です。■は前回紹介済み。□は未紹介です。

  • ■Instrument
  • □NoiseSynth
  • ■Synth
  • ■AMSynth
  • ■DuoSynth
  • □Sampler
  • ■FMSynth
  • □MonoSynth
  • □PluckSynth
  • ■MetalSynth
  • □PolySynth
  • ■Monophonic
  • □MembraneSynth

仕方がないので、前回未紹介分を上から紹介していきます。

NoiseSynth

まずは未紹介分の一番目、NoiseSynth。

うーん、ノイズシンセとのことだけど、どうも音がでない?Chromeだけ一瞬「ザッ」というノイズが鳴ったような気がしたが…

//シンセ生成
var synth = new Tone.NoiseSynth().toMaster();

※参考:NoiseSynth

ちょっと研究必要。保留で次いきます。

Sampler

「サンプラー」という名の通り、こちらはmp3ファイルを読み込んで再生します。

「キーン」「キーン」という刀の音源が鳴ります。

//シンセ生成
var sampler = new Tone.Sampler({
    "C3" : "audio/hoge.mp3",
}).toMaster();

引数の中に連想配列が入っており、キーに主音の位置、値にmp3ファイルのパスを入れます。

鍵盤を叩くと音の高さが相対的に変化します。今回はC3が元の高さになります。

※参考:Sampler

なお、今回のmp3ファイルはこちらのフリー音源「刀で打ち合う1」を使用させていただきました!

※参考:戦闘[1]|効果音ラボ

MonoSynth

次はモノシンセ。モノラルのシンセということですかね。

「ビヨ〜ン」「ビヨ〜ン」といった感じの音です。音の立ち上がりに倍音が混ざっている感じ。

//シンセ生成
var synth = new Tone.MonoSynth().toMaster();

※参考:MonoSynth

PluckSynth

次、プラックシンセと読めばいいのかな?辞書で見ると「Pluck」は「引き抜く」という意味があるようです。

「トッ、テッ、トッ、テッ」という可愛い音ですw

//シンセ生成
var synth = new Tone.PluckSynth().toMaster();

※参考:PluckSynth

PolySynth

ポリシンセ。さっきのモノに対してポリですね。

表の音は「ポーン」という普通の響きですが、奥の方に残響音があるような。一度に複数の音が鳴るという意味かもしれない。(さっきのモノシンセも複数の音が混ざったように聞こえたんだけどなー?)

//シンセ生成
var synth = new Tone.PolySynth().toMaster();

※参考:PolySynth

MembraneSynth

メンバランスシンセ。「Membrane」は「膜」という意味のようです。

表に「チュン」とスズメのような音。奥の方で「コーン」「コーン」と木琴みたいな小さな音が聞こえます。

//シンセ生成
var synth = new Tone.MembraneSynth().toMaster();

※参考:MembraneSynth

最後に

というわけで「その1」「その2」の2回に渡って急ぎ足ですがTone.jsに用意されているシンセ音を一通り確認しました。

f:id:idr_zz:20181101223534j:plain

そのうち下記の3つはうまく音がうまくなりませんでした。

  • Instrument():音がならない(その1)
  • MetalSynth():ピシーという打楽器音だが全音階は鳴らない(その1)
  • NoiseSynth():Chromeで一瞬「ザッ」と鳴った気がする程度(その2)

この3つは他のシンセとちょっと仕組みが違うっぽい。名前的にもメロディ向きではないしね。引き続き検証します。

次にTone.jsでやりたいこと。

  • 和音を出す
  • メロディを打ち込む
  • ポルタメント(滑らかな音階)を出す

早く実現できそうな順で着手していきます。

※2018年はこちらの記事が最後になります。来年も引き続きよろしくオナシャス!!!


※参考:Tone.jsを習得するためにやった事まとめ qiita.com