ソング：音声プレビュー時に使用できる、BPMと拍子に合わせたメトロノームを実装する

[Escobar1616]

内容

FL Studioのように、音声プレビュー時に鳴らすことができるメトロノームがあると良いと思います。

VOICEVOXには既にテンポの他に拍子が実装されていますので、それに合わせたものだとより良いかと。
(強拍は音を高くする 等)

ユーザー側で音量も変更できると便利です。

Pros 良くなる点

「歌わせてみた」等、instが存在する音源に対して音声を作成するときに、リズムが打ち込みやすくなります。

Cons 悪くなる点

画面内の要素が増える 等

実現方法

画面上部に、トグル式の丸いメトロノームのアイコンのボタンを置く。
ほかのボタンと同様、ロールオーバー時やトグル時に色が変わると分かりやすいです。

VOICEVOXのバージョン

0.25.1

その他

一通りissue内は検索しましたが、重複していたらゴメンなさい。

[Akikukeo1]

仮実装してみたのですが、UIが狭くなってしまいますね。これは仕方ないと割り切るか、表示方法を変えたり？
特に、小さめなウィンドウだと、入り切りませんね。

[Hiroshiba]

たしかにちょっと幅が狭いですねぇ。。。
UIは工事予定（完成時期未定）で、そのタイミングでもっと空くかもですが、今どうしようかというところ･･･。
･･･かなりバッドUIだけど、とりあえずショートカットキーでオンオフ切り替えられるようにするだけにして実装だけするとか･････？
（ご相談cc 🙇 @romot-co ）

あとメトロノーム機能は @sigprogramming さんたちと相談した感じ、他の音楽を同時再生できない現状は有用なはずだとなりました。
となると他の音楽（インストとか）を同時再生できるようになったらメトロノームをあまり使われなくなるかもなので、そういう意味でも目立つ場所に置いとかずに知る人ぞ知る機能にしても良かったり･････はしないかなぁ。ちょっと言い訳寄りですね。。
やっぱり本当は表示したほうが良いけど、場所がないからとりあえずショートカットキーのみでどうでしょうって感じかなぁ。。。
かなり苦肉の選択ですが。。

[romot-co]

@Hiroshiba
さすがに当初想定よりも量が多くなってきたので、ツールバーのレイアウト修正早めにやったほうがいいかもですね…！

---

面積問題は物理的にどうしようもないところがあるので、

1. 目的ごとに整理して分割する
   a. トランスポート系をまとめて下部などに移動させてスペースを確保する(レイアウト修正)
2. 隠す・割り切る
   a. メトロノームON/OFFボタンのみ表示し、ボリュームは横ボタンか右クリックのポップオーバーで開く
   b. メトロノームON/OFFボタンのみ表示し、ボリュームは変更できなくてよしとする
   c. メトロノームON/OFFボタンについても設定で表示・非表示を切り替えられる(デフォルト非表示)
   d. ショートカットキーのみで、そもそも表示しない
3. 小さくする
   a. 全体にボタンを小さくする(レイアウト修正)
   b. メトロノームON/OFFボタンの下もしくは横(縦)に小さくボリュームバー
   c. メトロノームON/OFFボタンの横にクリック音と連動する小さなインジケータを置いて、それをドラッグなどでボリューム編集

などいろいろありそうですが、
個人的にはまずはキーボードショートカットのみか、ボタンのみ(2bか2c)でもよさそうかと思っています！

[Hiroshiba]

@romot-co ありがとうございます！！

メトロノームのボリュームを変えられたほうが良いという視点に気づいてませんでした、なるほどぉ。。。
ますます面積問題が。。

メトロノームのボリュームは編集したい頻度が多くないかもと割り切って（そもそもメトロノーム利用者数が超多くはないため）、
メトロノームのボリューム編集だけ設定に逃がすとかもありかもとか思いました。
（まあ今の設定画面はスライダー置けないはずなので、もし実装するならわりと大変ですが 😇 ）

一旦2c（設定画面でON/OFF切り替え）か、あるいは2d（ショートカットキーのみ）が良さそうに思いました！！

[Hiroshiba]

📝
たしか @sigprogramming さんに聞いたのですが、メトロノーム実装は結構複雑で難度が高いとのことでした！
無限に音が鳴り続けないとでそのイベント登録の実装方法を考えない･･･とかだったかな？

なのでもしやるならまず設計からになりそうです 🙏

[sigprogramming]

設計についてですが、再生される音声はすべて同期して処理される必要があり（そうしないと音ズレが発生する）、
単一のTransportで制御され、単一のAudioContextで処理＆出力される必要があります。ちなみにループもTransportで制御されています。
なので、Transportで制御（スケジューリング）できるように、メトロノーム用のSequenceとEventSchedulerの実装が必要になると思います。

それぞれ、以下のような形をイメージしています。

export type MetronomeSequence = {
  readonly type: "metronome";
  readonly instrument: Instrument;
  readonly tempos: Tempo[];
  readonly timeSignatures: TimeSignature[];
  readonly tpqn: number;
};

class MetronomeEventScheduler implements EventScheduler {
  // フィールドは省略

  constructor(
    instrument: Instrument,
    tempos: Tempo[],
    timeSignatures: TimeSignature[],
    tpqn: number,
  ) { /* 省略 */ }

  start(contextTime: number, time: number) { /* 省略 */ }
  schedule(untilTime: number) { /* 省略 */ }
  stop(contextTime: number) { /* 省略 */ }
}

この形だと、メイン（歌やインスト）の音量を変えるとメトロノームの音量も変わりますが、それで問題ないかなと思います。

また、音声書き出し時（オフラインレンダリング時）は、メトロノームの音が乗らないようにする必要があります。