diff --git "a/docs/UX\343\203\273UI\343\203\207\343\202\266\343\202\244\343\203\263\343\201\256\346\226\271\351\207\235.md" "b/docs/UX\343\203\273UI\343\203\207\343\202\266\343\202\244\343\203\263\343\201\256\346\226\271\351\207\235.md" index fe22d824bd..6c8a20e3c1 100644 --- "a/docs/UX\343\203\273UI\343\203\207\343\202\266\343\202\244\343\203\263\343\201\256\346\226\271\351\207\235.md" +++ "b/docs/UX\343\203\273UI\343\203\207\343\202\266\343\202\244\343\203\263\343\201\256\346\226\271\351\207\235.md" @@ -45,7 +45,7 @@ - テキストでも手書きの図でもサンプル実装でもなんでも OK です 2. 実際に実装してプルリクエストを作成 - UI/UX デザインは触ってみないとわからない部分が多いので、実装をお願いする形になります - - デザインの変更はコード量が少なくても内容がかさばるので、+-合計80程度の差分に収めておくとマージまでがスムーズです + - デザインの変更はコード量が少なくても内容がかさばるので、+-合計 80 程度の差分に収めておくとマージまでがスムーズです 3. 問題箇所を洗い出す 4. マージ 5. 全体のデザインを見て必要であればメンテナーが微調整 @@ -80,7 +80,7 @@ - 行番号 ・・・ レーンの番号、レーンがユーザー向けになったら「レーン番号」へ - キャラクターアイコン ・・・ キャラクターやスタイルを変更できるボタン - テキスト欄 ・・・ 音声合成するためのテキストを入力する区画 - - テキスト欄追加ボタン 🚷 ・・・ レーンを追加するボタン + - テキスト追加ボタン ・・・ レーンを追加するボタン - パラメータ調整欄 🚷 ・・・ 画面右にあるパラメータなどを調整できるパネル - 詳細調整欄 🚷 ・・・ 画面下にあるイントネーションなどを調整できるパネル - 項目 ・・・ 詳細調整欄のイントネーションやアクセントなどの選択ボタン diff --git a/public/howtouse.md b/public/howtouse.md index 5ac585548b..b0016e7a74 100644 --- a/public/howtouse.md +++ b/public/howtouse.md @@ -40,7 +40,7 @@ GPU をお持ちの方は、音声の生成がずっと速い GPU モードを 音声合成エンジンを起動している様子 -## 音声の生成 +## 音声の生成・再生 キャラクターアイコンの右にある空白をクリックしてテキストを入力してみてください。 @@ -58,6 +58,8 @@ GPU をお持ちの方は、音声の生成がずっと速い GPU モードを テキスト欄が増えた様子 +テキスト欄にマウスカーソルを合わせると出てくるゴミ箱のボタンで、そのテキスト欄を削除できます。 + ## キャラクターの変更 テキスト入力欄の左にあるアイコンをクリックすると、テキストを読み上げてくれるキャラクターを変更することができます。 @@ -76,7 +78,7 @@ GPU をお持ちの方は、音声の生成がずっと速い GPU モードを 例えば「ディープラーニング」がこのように分かれてしまった場合は、 -「ディープラーニング」が「ディープ」と「ラーニング」に分かれた様子 +「ディープラーニング」が「ディープ」と「ラーニング」に分かれた様子 2つの隙間をクリックすると @@ -99,6 +101,23 @@ GPU をお持ちの方は、音声の生成がずっと速い GPU モードを 「ディープラーニング」「↑ ディープラ ↓ アニング」 +## パラメータの変更 + +画面の右の欄で、テキスト欄ごとに話速や抑揚などのパラメータを変更することができます。 + +「イントネーション」をクリックして現れる縦線のバー + +- 話速 + - 読み上げ速度を変更できます。数値が大きいほど速くなります。 +- 音高 + - 読み上げの高さを変更できます。数値が大きいほど高くなります。 +- 抑揚 + - 読み上げの抑揚を変更できます。数値が小さいほど棒読みに近くなります。 +- 音量 + - 音声の音量を変更できます。数値が大きいほど音が大きくなります。 +- 開始無音・終了無音 + - 音声の先頭や末尾の無音の長さを変更できます。数値が大きいほど無音時間が長くなります。 + ## イントネーションの変更 アクセントを変更してもうまく行かなかったときや、抑揚をより拘りたいときに、文字ごとの音の高さ(イントネーション)を直接変更することができます。 @@ -144,10 +163,16 @@ GPU をお持ちの方は、音声の生成がずっと速い GPU モードを 一つの文字のバーが中央で縦に分かれている様子 +## 音声を途中から再生 + +アクセント区間をクリックすることで、その区間から音声を再生できます。もう一度クリックすると解除できます。 + +アクセント区間をクリックした様子。クリックされたアクセント区間が青色になっています。 + ## 音声ファイルの書き出し メニューにある「ファイル」の「音声書き出し」ボタンを押すと、全テキスト欄の音声が WAV ファイルとして書き出されます。 -ファイル保存時、ファイル名は `[何行目]_[キャラ名]_[テキスト冒頭].wav` として保存されます。設定でテキストファイルも一緒に書き出すこともできます。 +ファイル保存時、ファイル名は `[何行目]_[キャラ名]_[テキスト冒頭].wav` として保存されます。設定でテキストファイルも一緒に書き出すこともできます。ファイル名は設定の「書き出しファイル名パターン」で変更できます。 ## テキストファイルの読み込み @@ -245,6 +270,10 @@ GPU をお持ちの方は、音声の生成がずっと速い GPU モードを 単語と読みとアクセントの登録画面 + + ## オプション 「設定」の「オプション」でいろいろな設定を変更することができます。 @@ -263,6 +292,17 @@ Linux は Nvidia 製 GPU のみに対応しています。 ### 「操作」項目 +#### プリセット機能 + +話速や抑揚などのパラメータをまとめて登録できるプリセット機能を利用できるようになります。ソフトウェアが終了しても設定したプリセットは残ります。 +プリセットを再登録する際、同じプリセットを割り当てているテキスト欄のパラメータを一括で変更することもできます。 + +スタイルごとに1つデフォルトプリセットが用意されています。 + +#### スタイル変更時にデフォルトプリセットを適用 + +プリセット機能をオンにしている場合、スタイルを変更したときにデフォルトプリセットを自動的に適用するようになります。 + #### パラメータの引き継ぎ テキスト欄を追加する際、話速や抑揚といったパラメータを引き継ぐようになります。 @@ -271,15 +311,19 @@ Linux は Nvidia 製 GPU のみに対応しています。 再生中の単語が画面内に収まるよう、自動的にスクロールして追従するようになります。 -#### テキスト分割の挙動 +#### テキスト自動分割 -テキストを貼り付け時、句点や改行でテキストを分割するかの挙動を変更できます。 +テキストを貼り付ける時、句点や改行でテキストを分割するかの挙動を変更できます。 -### 「保存」項目 +#### メモ機能 -#### 文字コード +テキストを`[]`で囲むことで、テキスト中にメモを書けます。半角の`[]`と全角の`[]`のどちらにも対応しています。 -読み込み・書き込み用の文字コードを選択できます。 +#### ルビ機能 + +テキストに`{ルビ対象|よみかた}`と書くことでテキストの読み方を変えられるようになります。半角の`{|}`と全角の`{|}`のどちらにも対応しています。書き出しテキストを変えずに読み方を変えたいときに便利です。 + +### 「保存」項目 #### 書き出し先を固定 @@ -293,6 +337,10 @@ Linux は Nvidia 製 GPU のみに対応しています。 同じファイル名のファイルがあった場合に連番として保存します。 +#### 文字コード + +読み込み・書き込み用の文字コードを選択できます。 + #### txt ファイルを書き出し テキスト内容を一緒に保存します。 @@ -301,6 +349,24 @@ Linux は Nvidia 製 GPU のみに対応しています。 リップシンクなどに便利な、音声の音素情報とそのタイミング情報が書かれたラベルファイルを一緒に保存します。 +### 「外観」項目 + +#### テーマ + +デフォルトのライトテーマと、暗めのダークテーマを切り替えることが出来ます。 + +#### フォント + +ソフトウェアで使用するフォントを変更できます。 + +#### 行番号の表示 + +テキスト欄の左に行番号を表示します。 + +#### テキスト追加ボタンの表示 + +テキスト追加ボタンを非表示にできます。ショートカットキー`Shift`+`Enter`でテキスト欄を追加できます。 + ### 「高度な設定」項目 #### マルチエンジン機能 @@ -323,15 +389,6 @@ VOICEVOX API 準拠エンジンを VOICEVOX 内で利用できるようになり 開発中の便利機能を利用することができます。 -#### テーマ変更 - -デフォルトのライトテーマと、暗めのダークテーマを切り替えることが出来ます。 - -#### プリセット機能 - -話速や抑揚などのパラメータをまとめて登録できる機能です。 -ソフトウェアが終了しても設定したプリセットは残ります。 - #### 疑問文自動調整 疑問文のときに自動的に語尾の音を上げて、疑問文っぽい音声を生成するようになります。 @@ -341,6 +398,10 @@ VOICEVOX API 準拠エンジンを VOICEVOX 内で利用できるようになり 対応している音声を混ぜてモーフィングした音声を合成できるようになります。 2つの音声を一度生成してから、音声を機械的に分析・再合成する後処理を行うことで実現しています。 +#### 複数選択 + +複数のテキスト欄を選択できるようになります。 + ### 「データ収集」項目 #### ソフトウェア利用状況のデータ収集を許可する diff --git a/public/res/image12.png b/public/res/image12.png index 7389f572b7..5fa326f359 100644 Binary files a/public/res/image12.png and b/public/res/image12.png differ diff --git a/public/res/image23.png b/public/res/image23.png new file mode 100644 index 0000000000..caa5960dc4 Binary files /dev/null and b/public/res/image23.png differ diff --git a/public/res/image24.png b/public/res/image24.png new file mode 100644 index 0000000000..adf3b6921e Binary files /dev/null and b/public/res/image24.png differ diff --git a/public/res/image5.png b/public/res/image5.png index 6bb0b051f9..a014ec121d 100644 Binary files a/public/res/image5.png and b/public/res/image5.png differ diff --git a/public/res/image9.png b/public/res/image9.png index 8171b2dd44..9426d34ac0 100644 Binary files a/public/res/image9.png and b/public/res/image9.png differ diff --git a/src/components/AudioCell.vue b/src/components/AudioCell.vue index 4fb6270f99..c710c002c0 100644 --- a/src/components/AudioCell.vue +++ b/src/components/AudioCell.vue @@ -567,7 +567,7 @@ const contextMenudata = ref< { type: "separator" }, { type: "button", - label: "内容をテキストのみに適用", + label: "読みを変えずに適用", onClick: async () => { contextMenu.value?.hide(); isChangeFlag.value = false; @@ -676,7 +676,8 @@ const isMultipleEngine = computed(() => store.state.engineIds.length > 1); height: 2rem; width: v-bind(textLineNumberWidth); line-height: 2rem; - margin-right: -0.3rem; + margin-left: -0.1rem; + margin-right: -0.4rem; opacity: 0.6; text-align: right; color: colors.$display; diff --git a/src/components/Dialog.ts b/src/components/Dialog.ts index ff681c4c17..413f190c3f 100644 --- a/src/components/Dialog.ts +++ b/src/components/Dialog.ts @@ -352,7 +352,7 @@ const showWriteErrorDialog = ({ } }; -const NOTIFY_TIMEOUT = 5000; +const NOTIFY_TIMEOUT = 7000; export const showNotifyAndNotShowAgainButton = ( { @@ -373,7 +373,7 @@ export const showNotifyAndNotShowAgainButton = ( timeout: NOTIFY_TIMEOUT, actions: [ { - label: "今後この通知をしない", + label: "今後このメッセージを表示しない", textColor: "toast-button-display" + suffix, handler: () => { dispatch("SET_CONFIRMED_TIP", { @@ -383,6 +383,10 @@ export const showNotifyAndNotShowAgainButton = ( }); }, }, + { + label: "閉じる", + color: "toast-button-display" + suffix, + }, ], }); }; diff --git a/src/components/SettingDialog.vue b/src/components/SettingDialog.vue index 257d06dd37..dec0e96795 100644 --- a/src/components/SettingDialog.vue +++ b/src/components/SettingDialog.vue @@ -43,7 +43,7 @@ /> - +
エンジンモード
{{ @@ -87,7 +84,7 @@ - +
音声のサンプリングレート
操作
- -
パラメータの引き継ぎ
+ +
プリセット機能
- ONの場合、テキスト欄追加の際に、現在の話速等のパラメータが引き継がれます。 + プリセット機能を有効にします。パラメータを登録したり適用したりできます。
- -
再生位置を追従
+ + +
+ +
スタイル変更時にデフォルトプリセットを適用
+
+ + + ONの場合、キャラやスタイルの変更時にデフォルトプリセットが自動的に適用されます。 + + +
+ + + +
+
+
+ +
パラメータの引き継ぎ
- {{ `「${obj.label}」モードの場合、${obj.desc}` }} - 音声再生中の、下部パネルの自動スクロールのモードを選べます。 + ONの場合、テキスト欄追加の際に、現在の話速等のパラメータが引き継がれます。
-
- + + + + +
再生位置を追従
+
+ - {{ obj.desc }} + 音声再生中の、詳細調整欄の自動スクロールのモードを選べます。 - +
+ + + + + +
- -
テキスト分割の区切り
+ +
テキスト自動分割
@@ -218,6 +287,7 @@
+
- +
メモ機能
- +
ルビ機能
- +
非表示にしたヒントを全て再表示
保存
- +
書き出し先を固定
- +
書き出しファイル名パターン
- +
上書き防止
- ONの場合、書き出す際に同名ファイルが既にあった場合に、かわりに連番で保存され、上書きされません。 + ONの場合、書き出す際に同名ファイルが既にあったとき、ファイル名に連番を付けて別名で保存されます。
@@ -498,7 +548,7 @@ >
- +
文字コード
- +
txtファイルを書き出し
- ONの場合、テキストがtxtファイルとして音声書き出し時に追加で書き出されます。 + ONの場合、音声書き出しの際にテキストがtxtファイルとして書き出されます。
@@ -560,10 +610,10 @@ >
- +
labファイルを書き出し
- ONの場合、リップシンク用のlabファイルが音声書き出し時に追加で書き出されます。 + ONの場合、音声書き出しの際にリップシンク用のlabファイルが書き出されます。
@@ -592,7 +642,7 @@
外観
- +
テーマ
@@ -620,7 +670,7 @@ /> - +
フォント
@@ -651,7 +701,7 @@ @update:model-value="changeEditorFont($event)" /> - +
行番号の表示
- +
テキスト追加ボタンの表示
- OFFの場合、右下にテキスト追加ボタンが表示されません。 + OFFの場合、右下にテキスト追加ボタンが表示されません。(テキスト欄は + Shift + Enter で追加できます)
@@ -706,16 +757,16 @@
高度な設定
- +
マルチエンジン機能
複数のVOICEVOX準拠エンジンを利用可能にする @@ -728,7 +779,7 @@ > - +
音声をステレオ化
再生デバイス
@@ -780,7 +831,7 @@ v-model="currentAudioOutputDeviceComputed" :disable="!canSetAudioOutputDevice" dense - label="再生デバイス" + name="audioOutputDevice" :options="availableAudioOutputDevices" class="col-7" > @@ -794,63 +845,7 @@
実験的機能
- -
プリセット機能
-
- - - プリセット機能を有効にします。あらかじめ登録しておいた話速などのパラメータを呼び出せるようになります。 - - -
- - - -
- -
スタイル変更時にデフォルトプリセットを適用
-
- - - ONの場合、キャラやスタイルの変更時にデフォルトプリセットが自動的に適用されます。 - - -
- - - -
- +
疑問文を自動調整
- +
モーフィング機能
- モーフィング機能を有効にします。2つのスタイルの中間を選べるようになります。 + モーフィング機能を有効にします。2つの音声混ぜられるようになります。
@@ -905,7 +900,7 @@ >
- +
複数選択
@@ -929,8 +924,8 @@ > - -
調整結果の保持
+ +
[開発時のみ機能] 調整結果の保持
@@ -964,7 +959,7 @@
データ収集
- +
ソフトウェア利用状況のデータ収集を許可
= { - CONTINUOUSLY: { - label: "連続", - desc: "現在の再生位置を真ん中に表示します。", - }, - PAGE: { - label: "ページめくり", - desc: "現在の再生位置が表示範囲外にある場合にスクロールします。", - }, - OFF: { - label: "オフ", - desc: "自動でスクロールしません。", - }, -}; const experimentalSetting = computed(() => store.state.experimentalSetting); // 非表示にしたヒントの再表示 @@ -1108,34 +1083,8 @@ const [enableMultiEngine, setEnableMultiEngine] = const [showTextLineNumber, changeShowTextLineNumber] = useRootMiscSetting("showTextLineNumber"); -// エディタの+ボタン表示設定 -const showAddAudioItemButton = computed( - () => store.state.showAddAudioItemButton -); -const changeShowAddAudioItemButton = async ( - showAddAudioItemButton: boolean -) => { - store.dispatch("SET_ROOT_MISC_SETTING", { - key: "showAddAudioItemButton", - value: showAddAudioItemButton, - }); - - // 設定をオフにする場合はヒントを表示 - if (!showAddAudioItemButton) { - const result = await store.dispatch("SHOW_CONFIRM_DIALOG", { - title: "エディタの+ボタンを非表示にする", - message: "テキスト欄は Shift + Enter で追加できます", - actionName: "非表示", - }); - if (result === "CANCEL") { - // キャンセルしたら設定を元に戻す - store.dispatch("SET_ROOT_MISC_SETTING", { - key: "showAddAudioItemButton", - value: true, - }); - } - } -}; +const [showAddAudioItemButton, changeShowAddAudioItemButton] = + useRootMiscSetting("showAddAudioItemButton"); const [enableMemoNotation, changeEnableMemoNotation] = useRootMiscSetting("enableMemoNotation"); @@ -1351,10 +1300,6 @@ const renderEngineNameLabel = (engineId: EngineId) => { @use '@/styles/visually-hidden' as visually-hidden; @use "@/styles/colors" as colors; -.visually-hidden { - @include visually-hidden.visually-hidden; -} - .text-h5 { margin: 0; } @@ -1381,32 +1326,12 @@ const renderEngineNameLabel = (engineId: EngineId) => { background: colors.$background; } -.scroll-mode-toggle { - background: colors.$background; - border-radius: 3px; -} - -.scroll-mode-button { - background: colors.$background; - color: colors.$display; - transition: 0.5s; -} - -.scroll-mode-button-selected { - background: colors.$primary; - color: colors.$display-on-primary; -} - .text-ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } -.scroll-mode-button:hover { - background: rgba(colors.$primary-rgb, 0.2); -} - .setting-dialog .q-layout-container :deep(.absolute-full) { right: 0 !important; .scroll {