VOICEVOX / voicevox

無料で使える中品質なテキスト読み上げソフトウェア、VOICEVOXのエディター
https://voicevox.hiroshiba.jp/
Other
2.47k stars 298 forks source link

再生/停止ボタンの表示状態を厳密に制御し、ちらつきを解消する #1541

Open thiramisu opened 1 year ago

thiramisu commented 1 year ago

内容

1534 で2つの停止ボタンが共用になる中、#1533 で「再生/停止ボタン」関連の処理が統一されていないことによる弊害が表出しました。折角なので、この機会に再生/停止関連ボタンの表示・disabled条件とショートカットキーの作動条件を再考し、可能ならなるべく統一して分かりやすい形を目指したいです。

実現方法

パズルを解いたら以下のような感じになりました。この「上2つ合わせたUIの状態」の通りに実装すればうまくいくはず? image

Pros 良くなる点

Cons 悪くなる点

999.999.999

その他

Hiroshiba commented 1 year ago

@thiramisu 非常にわかりやすい表ありがとうございます!!! ちなみに準備中、再生中などが2列ある意味はなんでしょうか👀

チラつきは課題に感じました! 今までもちらつきが起こってたはずなのですが、あまり気にしてなかった記憶があります。 #1534 で発生し始めたという認識で合っていそうでしょうか…?

キャンセル処理はとりあえず見かけ上だけそういう実装にするのは実はできるのではとふと思いました。たしかpromiseはキャンセルできたはず……?(うろ覚えです)

キャンセルが難しそうであれば、以前の再生・停止ボタンと同じにしておくのが変化が少なくできるので丸そうですかねぇ。

ちょっと認識色々ずれてるかもなので、頓珍漢なこと言ってたらすみません🙇

thiramisu commented 1 year ago

ちなみに準備中、再生中などが2列ある意味はなんでしょうか

対応表というよりも時系列順な感じで書いてました。(uiLock中だけは違いますが…) nowPlayingContinuouslyが既に存在する以上、連続再生は行を分ける必要があるかなと思ってたんですが、結果的には同一なものになってます。

チラつきは課題に感じました!

連続再生中のことなら、元は隠れていたので特に考慮されていなかったところを深く考えずに常時表示するようにして、かつ共通化してしまったので起こっているように見えます。 単独再生時は変わってないと思います。もし変わってたらそれは自分が気付いていないバグですね…

キャンセル処理はとりあえず見かけ上だけそういう実装にするのは実はできるのでは

一応作れました。ただuiLockされたままだったり生成中のぐるぐるが表示されたりで、そこら辺をもう少し考える必要がありそうだなという感じです。

以前の再生・停止ボタンと同じにしておく

生成が早い場合にちらつくことはありそうですが、一旦はこれが早いかもです

Hiroshiba commented 1 year ago

キャンセル処理はとりあえず見かけ上だけそういう実装にするのは実はできるのでは

一応作れました。ただuiLockされたままだったり生成中のぐるぐるが表示されたりで、そこら辺をもう少し考える必要がありそうだなという感じです。

なるほどです! 音声生成Promiseがキャンセルされる(errorになる?)時の処理が書かれてないからかもとか思いました。ちょっと大変かもですね・・・。


ひとつだけ再生と連続再生の挙動を共通化したのに、連続再生だけちらつくのがなんか不思議だなと思いました。 これもしかしたら生成中や再生中という状態の変化が原因というより、activeAudioKeyが変わるタイミングと再生停止状態が変わるタイミングが完全一致していないことに起因しているかも・・・・?

とりあえずちらつくことに関しては既知の不具合として別でissueを作っちゃってもいいかも。 (このissueタイトルからその不具合が解決できることがパッとわからないかもなので) 認識あってたら作っちゃおうと思います!

thiramisu commented 1 year ago

uiLockとか生成中のぐるぐるとかを出さないこともできると思います。 ただその場合も、簡単な実装だとエンジン側に音声生成リクエストが内部的に多重に飛ぶのでそれはそれでどうかという感じですね…。 やっぱり一旦は生成中は停止ボタンを無効化した方が良いかもです。


ひとつだけ再生と連続再生の挙動を共通化したのに、連続再生だけちらつくのがなんか不思議だなと思いました。

このissueの解決が直接ちらつきの根本原因の解消になると思います。 image 0.14.7ではこんな感じだったんですが、黒い部分はいわば「楽屋」みたい感じで、あんまり見られることが想定されてない実装でした。それをとりあえず見せること優先で実装したので、若干の無理が生じてました。 あと0.14.7でも連続再生中かつ生成中は「キャンセル」不可にもかかわらずメニューバーの「停止」が見た目上は有効になっていたりして、若干整理されていない感じがありました。 そこら辺をあまり考えずに修正・統一しようとしてしまったので、ちらつくようになってしまった感じですかね。

issueタイトルを少し変えてみましたが、いかがでしょうか?

activeAudioKeyが変わるタイミング

これは多分関係ない気がします。

Hiroshiba commented 1 year ago

uiLockとか生成中のぐるぐるとかを出さないこともできると思います。 ただその場合も、簡単な実装だとエンジン側に音声生成リクエストが内部的に多重に飛ぶのでそれはそれでどうかという感じですね…。 やっぱり一旦は生成中は停止ボタンを無効化した方が良いかもです。

こちらはキャンセルを実装する場合の話という認識であってそうでしょうか?(どれの引用かわからなかったので念のため) とりあえず停止ボタン無効化に賛成です。

そこら辺をあまり考えずに修正・統一しようとしてしまったので、ちらつくようになってしまった感じですかね。

activeAudioKeyが変わるタイミング

これは多分関係ない気がします。

ここちょっとまだ疑っています。 たぶん @thiramisu さん的には停止中→生成中→再生中の状態遷移が一瞬で行われるから生成中で一瞬ボタンがちらつく、という感じだと思うのですが、1回生成したものはキャッシュが残っているので生成中に状態遷移しないからこの線はうすそうだなと思っている感じです。 https://github.com/VOICEVOX/voicevox/blob/c2f9ca4441bc0dd5a14c5cdad2582c18eca6c85a/src/store/audio.ts#L1771-L1789

またそもそもなのですが、チラツキってこの動画のように連続再生してactiveなレーンが移ったときにツールバーの停止ボタンが明滅する件じゃなかったりしますか・・・? 👀

動画 https://github.com/VOICEVOX/voicevox/assets/4987327/2da3ec04-c641-486d-ab86-d74ae3157371

どこか勘違いあったらすみません。。

issueタイトルを少し変えてみましたが、いかがでしょうか?

とりあえず良いのかなと思いました。

thiramisu commented 1 year ago

張っていただいた動画がまさに自分が直した方が良さそうだなと思った挙動ですね。

たぶん @thiramisu さん的には停止中→生成中→再生中の状態遷移が一瞬で行われるから生成中で一瞬ボタンがちらつく

ここが認識ずれてますね…。 動画は#1534 適用後の999.999.999だと思いますが、動画内で停止ボタンが一瞬無効になっているのは、「生成中」ではなく「再生準備中」のタイミングだと思います。

あ、ちなみに「再生準備中」は再生ボタンを押してから実際にaudioElementが.play()されるまでの状態のことで、生成済みかにかかわらず発生します。 コードで言うとhttps://github.com/VOICEVOX/voicevox/blob/c2f9ca4441bc0dd5a14c5cdad2582c18eca6c85a/src/store/audio.ts#L1790 から https://github.com/VOICEVOX/voicevox/blob/c2f9ca4441bc0dd5a14c5cdad2582c18eca6c85a/src/store/audio.ts#L1864 を通って https://github.com/VOICEVOX/voicevox/blob/c2f9ca4441bc0dd5a14c5cdad2582c18eca6c85a/src/store/audio.ts#L1845 までですね

Hiroshiba commented 1 year ago

ああ、なるほどです!!! ありがとうございます、再生準備中というのが何を示しているのか完全に理解しました。 最初にいろいろ確認しておくべきでした、すみません・・・

たしかに、この状態を区別できるようにしてあげて、ボタンは生成中と同様の感じにするのが良さそうに感じました(ちらつきますが)。

ちょっと雑なちらつき防止案としては、getAudioElement().play()を実行した直後くらいにcommit("SET_AUDIO_NOW_PLAYING", { audioKey, nowPlaying: true })したらとりあえず解消するかもです。 あるいはそれらの状態をthrottoleでうまくちらつかないようにできるととても良さそうかもです。