From 9f7563f90ba72eb6f88c64203b66cfef9205cd01 Mon Sep 17 00:00:00 2001 From: tiramisu_oTATo Date: Sun, 27 Aug 2023 19:46:01 +0900 Subject: [PATCH 1/7] =?UTF-8?q?refactor:=2010ms=E9=96=93=E9=9A=94=E3=81=AE?= =?UTF-8?q?`setInterval`=E3=82=92`requestAnimationFrame`=E3=81=AB=E3=81=99?= =?UTF-8?q?=E3=82=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/AudioDetail.vue | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/src/components/AudioDetail.vue b/src/components/AudioDetail.vue index a37c49ff81..3652a0efab 100644 --- a/src/components/AudioDetail.vue +++ b/src/components/AudioDetail.vue @@ -575,15 +575,15 @@ const scrollToActivePoint = () => { }; // NodeJS.Timeout型が直接指定できないので、typeofとReturnTypeで取ってきている -let focusInterval: ReturnType | undefined; +let requestId: number | undefined; watch(nowPlaying, async (newState) => { if (newState) { const accentPhraseOffsets = await store.dispatch("GET_AUDIO_PLAY_OFFSETS", { audioKey: props.activeAudioKey, }); - // 現在再生されているaudio elementの再生時刻を0.01秒毎に取得(監視)し、 + // 現在再生されているaudio elementの再生時刻を描画毎に取得(監視)し、 // それに合わせてフォーカスするアクセント句を変えていく - focusInterval = setInterval(() => { + const focusAccentPhrase = () => { const currentTime = store.getters.ACTIVE_AUDIO_ELEM_CURRENT_TIME; for (let i = 1; i < accentPhraseOffsets.length; i++) { if ( @@ -593,12 +593,14 @@ watch(nowPlaying, async (newState) => { ) { activePoint.value = i - 1; scrollToActivePoint(); + requestId = window.requestAnimationFrame(focusAccentPhrase); } } - }, 10); - } else if (focusInterval !== undefined) { - clearInterval(focusInterval); - focusInterval = undefined; + }; + requestId = window.requestAnimationFrame(focusAccentPhrase); + } else if (requestId !== undefined) { + window.cancelAnimationFrame(requestId); + requestId = undefined; // startPointがundefinedの場合、一旦最初のアクセント句までスクロール、その後activePointの選択を解除(undefinedに)する activePoint.value = startPoint.value ?? 0; scrollToActivePoint(); From fffc6b9733f7514b69693c126a8147087f140aaa Mon Sep 17 00:00:00 2001 From: tiramisu_oTATo Date: Sun, 27 Aug 2023 20:23:57 +0900 Subject: [PATCH 2/7] =?UTF-8?q?refactor:=20`currentTime=20=3D=3D=3D=20unde?= =?UTF-8?q?fined`=E3=81=AE=E5=88=A4=E5=AE=9A=E3=82=92=E3=83=AB=E3=83=BC?= =?UTF-8?q?=E3=83=97=E3=81=AE=E5=A4=96=E3=81=AB=E5=87=BA=E3=81=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/AudioDetail.vue | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/AudioDetail.vue b/src/components/AudioDetail.vue index 3652a0efab..5fde227e99 100644 --- a/src/components/AudioDetail.vue +++ b/src/components/AudioDetail.vue @@ -585,9 +585,11 @@ watch(nowPlaying, async (newState) => { // それに合わせてフォーカスするアクセント句を変えていく const focusAccentPhrase = () => { const currentTime = store.getters.ACTIVE_AUDIO_ELEM_CURRENT_TIME; + if (currentTime === undefined) { + throw new Error("currentTime === undefined)"); + } for (let i = 1; i < accentPhraseOffsets.length; i++) { if ( - currentTime !== undefined && accentPhraseOffsets[i - 1] <= currentTime && currentTime < accentPhraseOffsets[i] ) { From b5addca7bd028af98dc194730e4a9773d49d82c8 Mon Sep 17 00:00:00 2001 From: tiramisu_oTATo Date: Sun, 27 Aug 2023 21:04:04 +0900 Subject: [PATCH 3/7] =?UTF-8?q?refactor(playingAccentPhraseIndex):=20findI?= =?UTF-8?q?ndex=E3=81=B8=E7=A7=BB=E8=A1=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/AudioDetail.vue | 21 ++++++++++++--------- 1 file changed, 12 insertions(+), 9 deletions(-) diff --git a/src/components/AudioDetail.vue b/src/components/AudioDetail.vue index 5fde227e99..73b1b4eefd 100644 --- a/src/components/AudioDetail.vue +++ b/src/components/AudioDetail.vue @@ -588,16 +588,19 @@ watch(nowPlaying, async (newState) => { if (currentTime === undefined) { throw new Error("currentTime === undefined)"); } - for (let i = 1; i < accentPhraseOffsets.length; i++) { - if ( - accentPhraseOffsets[i - 1] <= currentTime && - currentTime < accentPhraseOffsets[i] - ) { - activePoint.value = i - 1; - scrollToActivePoint(); - requestId = window.requestAnimationFrame(focusAccentPhrase); - } + const playingAccentPhraseIndex = + accentPhraseOffsets.findIndex( + (currentOffset) => currentTime < currentOffset + ) - 1; + if (playingAccentPhraseIndex === -1) { + throw new Error("playingAccentPhraseIndex === -1"); + } + if (playingAccentPhraseIndex === -2) { + return; } + activePoint.value = playingAccentPhraseIndex; + scrollToActivePoint(); + requestId = window.requestAnimationFrame(focusAccentPhrase); }; requestId = window.requestAnimationFrame(focusAccentPhrase); } else if (requestId !== undefined) { From 64f77d241671139a3807287214f0740cdeceed44 Mon Sep 17 00:00:00 2001 From: tiramisu_oTATo Date: Sun, 27 Aug 2023 21:09:15 +0900 Subject: [PATCH 4/7] =?UTF-8?q?docs(playingAccentPhraseIndex):=20=E3=82=A8?= =?UTF-8?q?=E3=83=A9=E3=83=BC=E3=83=8F=E3=83=B3=E3=83=89=E3=83=AA=E3=83=B3?= =?UTF-8?q?=E3=82=B0=E3=81=AE=E7=90=86=E7=94=B1=E3=82=92=E6=9B=B8=E3=81=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/AudioDetail.vue | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/components/AudioDetail.vue b/src/components/AudioDetail.vue index 73b1b4eefd..92a09fb141 100644 --- a/src/components/AudioDetail.vue +++ b/src/components/AudioDetail.vue @@ -593,9 +593,12 @@ watch(nowPlaying, async (newState) => { (currentOffset) => currentTime < currentOffset ) - 1; if (playingAccentPhraseIndex === -1) { + // accentPhraseOffsets[0] は必ず 0 なので到達しないはず throw new Error("playingAccentPhraseIndex === -1"); } if (playingAccentPhraseIndex === -2) { + // データと音声ファイルの長さに誤差があるため許容 + // see https://github.com/VOICEVOX/voicevox/issues/785 return; } activePoint.value = playingAccentPhraseIndex; From ef43094025c1c80b5eeb6ae66cbbef470d255546 Mon Sep 17 00:00:00 2001 From: tiramisu_oTATo Date: Mon, 28 Aug 2023 08:07:31 +0900 Subject: [PATCH 5/7] =?UTF-8?q?docs:=20=E4=B8=8D=E8=A6=81=E3=81=AA?= =?UTF-8?q?=E3=82=B3=E3=83=A1=E3=83=B3=E3=83=88=E3=82=92=E5=89=8A=E9=99=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/AudioDetail.vue | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/AudioDetail.vue b/src/components/AudioDetail.vue index 92a09fb141..a2ef4ff9ad 100644 --- a/src/components/AudioDetail.vue +++ b/src/components/AudioDetail.vue @@ -574,7 +574,6 @@ const scrollToActivePoint = () => { } }; -// NodeJS.Timeout型が直接指定できないので、typeofとReturnTypeで取ってきている let requestId: number | undefined; watch(nowPlaying, async (newState) => { if (newState) { From f8bfa11a6d6af3b93d3de833011f41af5045c672 Mon Sep 17 00:00:00 2001 From: tiramisu_oTATo Date: Mon, 28 Aug 2023 22:11:07 +0900 Subject: [PATCH 6/7] =?UTF-8?q?refactor:=20`=E5=BF=85=E8=A6=81=E6=99=82(sc?= =?UTF-8?q?rollToActivePoint`=E3=81=AE=E5=A4=89=E6=9B=B4=E6=99=82)?= =?UTF-8?q?=E3=81=AE=E3=81=BF=E3=82=B9=E3=82=AF=E3=83=AD=E3=83=BC=E3=83=AB?= =?UTF-8?q?=E5=87=A6=E7=90=86=E3=81=8C=E5=AE=9F=E8=A1=8C=E3=81=95=E3=82=8C?= =?UTF-8?q?=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/AudioDetail.vue | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/AudioDetail.vue b/src/components/AudioDetail.vue index a2ef4ff9ad..62b2ba1b37 100644 --- a/src/components/AudioDetail.vue +++ b/src/components/AudioDetail.vue @@ -600,8 +600,10 @@ watch(nowPlaying, async (newState) => { // see https://github.com/VOICEVOX/voicevox/issues/785 return; } - activePoint.value = playingAccentPhraseIndex; - scrollToActivePoint(); + if (activePoint.value !== playingAccentPhraseIndex) { + activePoint.value = playingAccentPhraseIndex; + scrollToActivePoint(); + } requestId = window.requestAnimationFrame(focusAccentPhrase); }; requestId = window.requestAnimationFrame(focusAccentPhrase); From 8f50ef4cb118fba14de6a36b944a8fea94518c31 Mon Sep 17 00:00:00 2001 From: tiramisu_oTATo Date: Mon, 28 Aug 2023 22:22:12 +0900 Subject: [PATCH 7/7] =?UTF-8?q?=E8=A8=82=E6=AD=A3:=20refactor:=20=E5=BF=85?= =?UTF-8?q?=E8=A6=81=E6=99=82=E3=81=AE=E3=81=BF`scrollToActivePoint`?= =?UTF-8?q?=E3=81=8C=E5=AE=9F=E8=A1=8C=E3=81=95=E3=82=8C=E3=82=8B=E3=82=88?= =?UTF-8?q?=E3=81=86=E3=81=AB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit