Three.js & Tone.jsでシューティングゲームを作る-2: 音設定

[ryo-i]

シューティングゲーム #12 のつづき Tone.jsと連携させて効果音やBGMを追加したい

構想

• ブロックの位置によって違う音を出す
• ブロックが手前に来る時に音が鳴る
• 縦軸で音程を変える
• 横軸で音量を変える
• 前後で音を出すタイミングを変える
• 岩を打って赤くなる時にコーーンと長い音がなる（高音）
• 以降、その岩の音は高音になる
• 岩を打って白くなる時にボーーンと長い音がなる（低音）
• 以降、その岩の音は低音になる
• ヒット数が増えるほど高音が増えていき、クリアで完成する
• 全体的にミニマルミュージックのような曲の完成を目指す
• 位置がランダムなので二度と同じ曲にはならない

[ryo-i]

こちらの画面のプレイボタンを押すと「ポーン」って音が鳴る。はじめの一歩。 しかし2回目以降の音の発声が変なので修正必要

[ryo-i]

ページを開いた直後は音が想定通りになるが、リロードするとエラーになる

1. synthはページロード時に一回表示される

2. 最初にボタンを押しても音が鳴らない

3. ２回目にボタンを押すと長音がしばらくなる（本当はポーンと短い長さの音のはず） そして下記のメッセージがでる

bug.js:8 Uncaught Error: Start time must be strictly greater than previous start time

[ryo-i]

ボリュームの単位はデシベル-60〜0で良さそう https://groups.google.com/g/tonejs/c/Ag9vix_d2L4

[ryo-i]

input range スタイル参考 https://www.webdesignleaves.com/pr/css/input-range-style.html

[ryo-i]

• スタートボタンで音が鳴らず、最初の岩を打った時にスタート音が鳴る時がある
• デベロッパーツールのSPモードやラインのwebビューで開いた時になる
• input rangeのツマミをクリックではなく左右ドラッグで変更するとクリックイベントと認識されない
• Tone.context.stateが"suspended"になって自動再生扱い（正常はrunning）

https://github.com/Tonejs/Tone.js/wiki/Autoplay

resume()でsuspendedをrunningにできるようだがうまくいかない https://developer.mozilla.org/ja/docs/Web/API/AudioContext/resume https://tonejs.github.io/docs/r13/Context#resume

[ryo-i]

同時に複数の音が鳴る時に下記のエラーになったため 「Max polyphony exceeded. Note dropped.」 maxPolyphonyを追加

[ryo-i]

Tone.jsでクリックノイズはrampToを使うと抑えられるとアドバイスをもらって成功！ https://groups.google.com/g/tonejs/c/OgE6ocGcXVk

[ryo-i]

当初やりたかった最低限の形になったのでいったんクローズ