再生位置指定機能と、再生位置フォーカス・スクロール機能の追加 #578

y-chan · 2021-12-12T16:15:27Z

内容

題の通り

スクリーンショット・動画など

2021-12-13.01-13-34.mp4

その他

watchを使っている関係上、開発時点でのホットリロードが入るとバグります。
現状の私には解決策がわからなかったです...

y-chan

議論の余地がある点をコメントしてみました。

src/components/AudioDetail.vue

src/store/audio.ts

Hiroshiba · 2021-12-13T16:44:59Z

UI触ってみました！すごく良いですね！！
更にユーザビリティを増せるような案がいくつか思いついたのでコメントしてみます！

アクセント句を選択していない状態から再生・停止すると、一番最初のアクセント句が選択状態になりますが、再生する前の状態に戻る（無選択状態に戻る）と混乱を減らせるかなと思いました。
無をクリックすると選択状態になりますが、可能なら無じゃなくできるととても良さそうです。アクセント句をマウスオーバーするとアクセント句がマウスオーバーされていることがわかるようにし、かつクリック可能なところはマウスカーソルを変えてあげると良いのかなと感じました。
スクロールの追従ですが、DTMソフトとかはよくページめくりになっているので合わせられると良いかもと感じました。そちらのほうが疲れにくいかもです。（どう感じるか、ちょっと自信ががないです･･･）

あと実装なのですが、おそらくこの「アクセント句の選択」状態は今後もずっと使っていくことになると思うので、ユビキタス言語を何にするかも考えたいかもです。
実装ではPointでしょうか。他にもActiveAccentPhraseやSelectedAccentPhrase、あるいはPointを採用してActivePointとかSelectedPointとかでも良いのかなと感じました！

y-chan · 2021-12-16T06:03:19Z

無選択状態に戻る

そうですね、この挙動は不自然なので、修正します。

無をクリックすると選択状態になり

こちらも対応します。

ページめくり

実験的ですが、少し実装してみました。

2021-12-16.14-59-48.mp4

こちら、アクセント句が一部でも映っていれば、スクロールをしないようにしてみたのですが、どうでしょうか...
一部しか映っていない場合、全部映るようにスクロールすべきですかね...?

この「アクセント句の選択」状態は今後もずっと使っていくことになると思うので、ユビキタス言語を何にするかも考えたい

確かに、私の実装で新たなユビキタス言語が増えてしまっていましたね...
個人的には、AccentPhraseと打つのが長いので、Pointという新たな呼び名を命名したのですが、これはこれでよさそうな気がしていて、かつ今までアクセント句を選択するという概念がなかったので、ActivePoint(ActiveAudioKeyは再生されるものが変わるたびに変わるので、それに従ってみた)が良いかなと思いました。

Hiroshiba · 2021-12-16T16:40:05Z

ページめくり良いですね！！

アニメーションを見たときの疲れを最小化するのが最も良いと思っていて、どうすれば良いのかを考えてました。
たぶん疲れは、時間辺りの見た目の変化量が大きいほど・予測できない動きをするほど増えると思っています。
なので横方向の縮尺をより広くできたり、ページ送りする際に再生中のAccentPhraseが必ず一番左に来たりすると、更に良いのかなと感じました。
（後者は最後の方のAccentPhraseを再生するときに、予測できない動きになったのが気になりました）

あと見た目が全く変わらないという選択もできるように、スクロールのON/OFF機能はぜひほしいなと感じました。

とはいえ、一旦実装してから考えるのがOSS的に良いのかなと思います！
ぱっと実装できそうなところは実装をお願いできると嬉しいです。
難しそうなところはマージ後にissue化しちゃうというのはどうでしょう。

個人的にこのプルリクエストでは、こんな感じの実装になっていればよいのかなと感じています。

自動スクロールができる
ON/OFFが切り替えられる
連続再生・ページ送りが切り替えられる（もしくはoff/連続/ページで３択）

あと、追加でこうしたほうが良さそうと思ったのですが、連続再生時はAccentPhraseの左側の位置を固定ではなく、中心の位置を固定できると嬉しいかもです。
それと、AccentPharseの区切りは背景色が無い方がわかりやすいかなと感じました。

プルリクエストの範囲をどこまでにするかはお任せします･･･！
（個人的にはできるかぎり小さめだと嬉しいです。）

ActivePoint

良いと思います！

… point

y-chan · 2021-12-17T03:27:06Z

横方向の縮尺をより広くできたり、ページ送りする際に再生中のAccentPhraseが必ず一番左に来たりする

縮尺の変更は破壊的変更になりそうで、例えば縮尺を開くすると操作UIが小さくなりUXが下がることが見込まれ、私には実装も難しそうなので、要議論な気がしました。
必要であればIssueへの切り分けをすべきだと思います。

AccentPhraseが必ず左に来るようにするのは、仰る通りUIの崩壊が起きる気がしていて、私にもパッときれいに実装する方法が思い浮かばないので、妥協案として現状のままで行きたいというのが私の今の考えです。
また、再生したいアクセント句を中央辺りで選択した場合に、それがいきなり左に動くのは疲れを伴う挙動な気がした(フォーカス部分が行ったり来たりすることになると思うので)のですが、どうですかね...

連続再生・ページ送りが切り替えられる（もしくはoff/連続/ページで３択）

個人的には、最後にこの状態になればいいかなと思っています(ユーザーにとっては選択肢が多い方がいろいろな使い方ができると思うので)
切り替えまでこのPRで実装するのは変更量が肥大化するので、一旦避け、ページめくりのみ有効化したいと思います。

連続再生時はAccentPhraseの左側の位置を固定ではなく、中心の位置を固定できる

こちら、以下のように実装しました(現在はコメントアウトしており、ページめくりが有効化されています)。

2021-12-17.11-02-37.mp4

完全なセンタリング(端のアクセント句は除く)になったので、結構動きが少し少なくなって見やすくなった気がします。
なので、これに切り替え出来るようにすれば、うれしい人もいるのではないか(私は逐次追従のほうがうれしい人です)と思います。
ただ、先ほども言った通り、切り替えは別PRにて実装するつもりです。

AccentPharseの区切りは背景色が無い方がわかりやすい

確かにそう思ったのですが、では読点(、)はどうしようか、と少し思いました(現状は読点の時間もフォーカスをしています)。
どうすべきなんでしょう...

ActivePoint

現状、playPoint/PlayPointとなっている点を、activePoint/ActivePointに変更しました。

Hiroshiba · 2021-12-17T17:15:23Z

縮尺

要望いただいたこともあるし、必要そうな気がしているのでissue化したいかなと思いました･･･！

また、再生したいアクセント句を中央辺りで選択した場合に、それがいきなり左に動くのは疲れを伴う挙動な気がした(フォーカス部分が行ったり来たりすることになると思うので)のですが、どうですかね...

たしかにフォーカスしている箇所が即左に表示されるのは良くないと思います。ページ送りする際に一番左に来るイメージでした。

では読点(、)はどうしようか

たしかに･･･
まあ、読点も含めなくてもそこまで問題ないのでは、とちょっと思いました。

y-chan · 2021-12-21T02:15:17Z

issue化したい

なるほど、では別問題として扱うということで、ここでは考えないこととします。

ページ送りする際に一番左に来るイメージでした。

すみません、最初からそう書いてあったのに文意が読み取れてなかったですね...

読点も含めなくてもそこまで問題ない

これに関しては、読点の左右どちらでもアクセント句の結合操作ができることがまず問題な気がしています。
現状の仕様から変更するということはしないでおこうと思いますが、別Issueとして切り出したい問題のように思っています。
ただ、現状の作り的に読点の間もフォーカスが続くのと、読点の時間も制御可能であることから、読点部分の右側の区切り(本当のアクセント句の区切り)部分だけをフォーカスしないように作ろうかと思いますが、どうでしょうか？

Hiroshiba · 2021-12-21T02:56:49Z

ただ、現状の作り的に読点の間もフォーカスが続くのと、読点の時間も制御可能であることから、読点部分の右側の区切り(本当のアクセント句の区切り)部分だけをフォーカスしないように作ろうかと思いますが、どうでしょうか？

なるほどです、確かに読点の右の隙間（アクセント区の右端）が含まれなければOKな気がしました！そちらでお願いします！

Hiroshiba · 2021-12-27T05:48:29Z

@Segu-g @MT224244 レビューお願いできると助かります･･･！

MT224244

レビューが遅れて申し訳ありません…。
気になった点をコメントしました。

tests/unit/store/Vuex.spec.ts

src/components/AudioDetail.vue

Hiroshiba

ちょっとまだ全部見れていないのですが、コメントしてみました！！

src/components/AudioDetail.vue

src/store/audio.ts

src/components/AudioDetail.vue

…selectable-play-point

y-chan · 2022-01-18T18:30:12Z

本PR内で、挙がっていた問題の修正、設定画面の追加までやってしまいました。
少し変更量が多いですが、よろしくお願いします...!

2022-01-19.03-26-41.mp4

P.S. 加えて、アクセント句追従の間隔を0.1秒から0.01秒に変更しました。
やはり0.1秒だとちょっとラグいように感じてしまうのと、0.01秒でもCPU使用率等問題がなさそうであることを確認したので、適用した次第です。

…play-point # Conflicts: # src/components/AudioDetail.vue

src/components/AudioDetail.vue

Hiroshiba · 2022-01-19T02:34:13Z

src/components/AudioDetail.vue

+      });
+    };
+
+    // 再生開始位置・話速変更時に、play offsetを更新する


いろんなとこでsetPlayOffsetが必要になってて、ステートの変更がややこしくなってそうだなと感じました。
将来この関数を呼ぶべきタイミングで呼び忘れてしまうことがそこそこ想像できそうです。

startPointをvuex側で持っておいてplayOffsetを再生時のタイミングで計算するようにすると綺麗になるかもです。

将来的な改変(音素単位等での再生位置指定)のことを考えてaudioPlayOffsetのみをVuexに持たせていましたが、もはやその必要もなさそうな気がするので、仰る通り再生開始アクセント位置をVuexに持たせ、再生する度に算出するのが綺麗そうですね...
その方向で修正してみます。

あ、仮にそうなった場合はおそらくstartPointに音素単位の再生位置情報が含まれると思います。
であれば、startPointをVuexに持たせておけば自然な拡張でaudioPlayOffsetを計算できるかもです･･･！

audioPlayOffsetをstore内で持つ必要がなくなったこと(将来的な目的で残してもいいが、冗長になる)から、audioPlayStartPointに変更し、accentPhraseOffsetsをGET_AUDIO_PLAY_OFFSETS actionとしてVuexに移動させました。
若干気持ち悪さが残りますが、私的にはこれ以上綺麗に書けそうになかったです....

src/components/AudioDetail.vue

src/store/type.ts

src/store/audio.ts

…play-point # Conflicts: # src/components/SettingDialog.vue

y-chan · 2022-01-21T16:02:55Z

頂いた指摘の改善をしてみました。
レビューお願いします...!

Hiroshiba

LGTM！！

１つだけ、修正してもしなくてもというコメントをしてみました。

src/components/AudioDetail.vue

Hiroshiba

すみません･･･。
試しに利用していたときに気づいたことを１つだけ修正お願いしたいです。

途中から再生し始めたとき、一瞬だけ１つ前のアクセントフレーズが光りそうです。
https://user-images.githubusercontent.com/4987327/150687927-65697741-8295-406e-b275-8d1f37383e4b.mp4

たぶんユーザーさんから目が疲れる的な指摘をもらいそうなので、なんとかして防ぎたく。。

y-chan · 2022-01-23T16:45:08Z

調べてみたところ、currentTimeをセットした後、再生時に小さい値が切り捨てられることによって少し時間が戻るということが起きているようでした。
微小かつ、切り捨てられないギリギリの値を加算することで対応してみました。
また、AudioDetail.vue内のactivePointの移動条件を厳密化しました(<から<=へ)。

Hiroshiba

素早い修正ありがとうございます！！

何回もリクエストをお願いしてすみません。。
よくあるページ送りの実装は、見えていない部分があるときに先にスクロールする感じになっていると思うので、アクセント句のうち見えないところがあったらスクロールという処理に変えて頂けると･･･。。

y-chan · 2022-01-23T18:18:21Z

アクセント句のうち見えないところがあったらスクロール

対応しました...!

Hiroshiba

LGTM！！！

需要の有りそうな２つの機能の実装、ありがとうございました！！！

y-chan added 5 commits December 9, 2021 14:49

add audio play offset

63a8b28

apply offset to audio play

2d76790

add audio elem current time getter

e321ae5

make start point selectable and focus play point

d0eb15e

scroll to play point

493eb83

y-chan commented Dec 12, 2021

View reviewed changes

src/components/AudioDetail.vue Outdated Show resolved Hide resolved

src/store/audio.ts Outdated Show resolved Hide resolved

fix vuex test

b51a40e

Hiroshiba requested review from Hiroshiba, MT224244 and Segu-g December 13, 2021 16:45

y-chan added 7 commits December 17, 2021 10:48

strictly centering accent phrase

8de82b3

doesn't automatically select start point if user doesn't select start…

4eaf23a

… point

centering accent phrase -> scroll page by page for accent phrases

f4a142a

play point -> active point

6c2aeef

audio elem current time -> active audio elem current time

1bc17b3

add accent phrase focus color

a0d567a

add hover style

92d1b9e

Hiroshiba mentioned this pull request Dec 27, 2021

同じアクセント句にあるピッチや音の長さを一緒に増減できるようにする #551

Closed

MT224244 suggested changes Dec 29, 2021

View reviewed changes

tests/unit/store/Vuex.spec.ts Outdated Show resolved Hide resolved

src/components/AudioDetail.vue Outdated Show resolved Hide resolved

Hiroshiba requested changes Jan 10, 2022

View reviewed changes

src/components/AudioDetail.vue Outdated Show resolved Hide resolved

src/components/AudioDetail.vue Outdated Show resolved Hide resolved

src/store/audio.ts Outdated Show resolved Hide resolved

src/components/AudioDetail.vue Outdated Show resolved Hide resolved

y-chan added 2 commits January 12, 2022 14:56

Merge commit '5644c9fad3f8121ecf6c042137ae7cd872a2121f' into feature/…

b250a7a

…selectable-play-point

fix type error

be3fd94

add setting of active point scroll mode to setting dialog

2c55281

y-chan added 3 commits January 19, 2022 03:38

Merge remote-tracking branch 'upstream/main' into feature/selectable-…

7ffbc3d

…play-point # Conflicts: # src/components/AudioDetail.vue

fix test

78b8d69

update key name and color, fix miss

11174d6

Hiroshiba requested changes Jan 19, 2022

View reviewed changes

y-chan added 2 commits January 19, 2022 22:26

move accent phrase offsets and refactor

bd7b0b3

fix test

4d7d0ba

y-chan force-pushed the feature/selectable-play-point branch from 1dbb197 to 4d7d0ba Compare January 19, 2022 13:58

Hiroshiba requested changes Jan 20, 2022

View reviewed changes

y-chan added 7 commits January 22, 2022 00:19

use next tick

cec90a7

null -> undefiend

b5e77e1

fix get mode

d0afd30

throw error if query or accent phrases is undefined

13abb79

do error handling

d5db60c

add comment

233acc9

Merge remote-tracking branch 'upstream/main' into feature/selectable-…

ae2dd21

…play-point # Conflicts: # src/components/SettingDialog.vue

Hiroshiba approved these changes Jan 21, 2022

View reviewed changes

src/components/AudioDetail.vue Outdated Show resolved Hide resolved

comment to code

b87154b

Hiroshiba requested changes Jan 23, 2022

View reviewed changes

y-chan added 2 commits January 24, 2022 01:42

make conditions strict

0e8bcaa

add the smallest value to current time of audio element

837b1d4

Hiroshiba requested changes Jan 23, 2022

View reviewed changes

start -> end

7f995c6

Hiroshiba approved these changes Jan 23, 2022

View reviewed changes

Hiroshiba merged commit 0da89dc into VOICEVOX:main Jan 23, 2022

thiramisu mentioned this pull request Sep 22, 2023

詳細調整欄で、編集不可のモーラでもカーソルがpointerなのをなんとかする #1572

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

再生位置指定機能と、再生位置フォーカス・スクロール機能の追加 #578

再生位置指定機能と、再生位置フォーカス・スクロール機能の追加 #578

y-chan commented Dec 12, 2021 •

edited

Loading

y-chan left a comment

Hiroshiba commented Dec 13, 2021

y-chan commented Dec 16, 2021 •

edited

Loading

Hiroshiba commented Dec 16, 2021

y-chan commented Dec 17, 2021

Hiroshiba commented Dec 17, 2021

y-chan commented Dec 21, 2021 •

edited

Loading

Hiroshiba commented Dec 21, 2021

Hiroshiba commented Dec 27, 2021

MT224244 left a comment

Hiroshiba left a comment

y-chan commented Jan 18, 2022 •

edited

Loading

Hiroshiba Jan 19, 2022

y-chan Jan 19, 2022 •

edited

Loading

Hiroshiba Jan 19, 2022

y-chan Jan 19, 2022

y-chan commented Jan 21, 2022

Hiroshiba left a comment

Hiroshiba left a comment

y-chan commented Jan 23, 2022 •

edited

Loading

Hiroshiba left a comment

y-chan commented Jan 23, 2022 •

edited

Loading

Hiroshiba left a comment

再生位置指定機能と、再生位置フォーカス・スクロール機能の追加 #578

再生位置指定機能と、再生位置フォーカス・スクロール機能の追加 #578

Conversation

y-chan commented Dec 12, 2021 • edited Loading

内容

関連 Issue

スクリーンショット・動画など

その他

y-chan left a comment

Choose a reason for hiding this comment

Hiroshiba commented Dec 13, 2021

y-chan commented Dec 16, 2021 • edited Loading

Hiroshiba commented Dec 16, 2021

y-chan commented Dec 17, 2021

Hiroshiba commented Dec 17, 2021

y-chan commented Dec 21, 2021 • edited Loading

Hiroshiba commented Dec 21, 2021

Hiroshiba commented Dec 27, 2021

MT224244 left a comment

Choose a reason for hiding this comment

Hiroshiba left a comment

Choose a reason for hiding this comment

y-chan commented Jan 18, 2022 • edited Loading

Hiroshiba Jan 19, 2022

Choose a reason for hiding this comment

y-chan Jan 19, 2022 • edited Loading

Choose a reason for hiding this comment

Hiroshiba Jan 19, 2022

Choose a reason for hiding this comment

y-chan Jan 19, 2022

Choose a reason for hiding this comment

y-chan commented Jan 21, 2022

Hiroshiba left a comment

Choose a reason for hiding this comment

Hiroshiba left a comment

Choose a reason for hiding this comment

y-chan commented Jan 23, 2022 • edited Loading

Hiroshiba left a comment

Choose a reason for hiding this comment

y-chan commented Jan 23, 2022 • edited Loading

Hiroshiba left a comment

Choose a reason for hiding this comment

y-chan commented Dec 12, 2021 •

edited

Loading

y-chan commented Dec 16, 2021 •

edited

Loading

y-chan commented Dec 21, 2021 •

edited

Loading

y-chan commented Jan 18, 2022 •

edited

Loading

y-chan Jan 19, 2022 •

edited

Loading

y-chan commented Jan 23, 2022 •

edited

Loading

y-chan commented Jan 23, 2022 •

edited

Loading