VoiceVoxで設定画面から一部のパラメータを更新できるようにする

tegnike · Aug 22, 2024 · 8f8b3d6 · 8f8b3d6
1 parent dfca741
commit 8f8b3d6
Show file tree

Hide file tree

Showing 7 changed files with 106 additions and 14 deletions.
diff --git a/locales/en/translation.json b/locales/en/translation.json
@@ -16,6 +16,8 @@
  "ConversationContinuityModeInfo3": "gpt-4o, gpt-4-turbo, claude-3-opus, claude-3.5-sonnet work relatively stably.",
  "StatusOn": "Status: ON",
  "StatusOff": "Status: OFF",
+ "Select": "Select",
+ "TestVoice": "Test Voice",
  "SelectAIService": "Select AI Service",
  "LocalLLM": "Local LLM",
  "SelectModel": "Select Model",
@@ -47,6 +49,9 @@
  "KoeiromapInfo": "Using Koeiromap API from Koemotion. It only supports Japanese. For more details, please refer to the link below.",
  "UsingVoiceVox": "VOICEVOX",
  "VoiceVoxInfo": "Using VOICEVOX. It only supports Japanese. It uses a local API, you need to download and launch the app that suits your environment from the site below.",
+ "VoicevoxSpeed": "Speed",
+ "VoicevoxPitch": "Pitch",
+ "VoicevoxIntonation": "Intonation",
  "UsingGoogleTTS": "Google TTS",
  "UsingStyleBertVITS2": "Style-Bert-VITS2",
  "StyleBertVITS2Info": "Using Style-Bert-VITS2. It supports only Japanese, English, and Chinese. It uses a local API, you need to download and launch the app that suits your environment from the site below.",

diff --git a/locales/ja/translation.json b/locales/ja/translation.json
@@ -16,6 +16,8 @@
  "ConversationContinuityModeInfo3": "gpt-4o, gpt-4-turbo, claude-3-opus, claude-3.5-sonnetで比較的安定動作します。",
  "StatusOn": "状態：ON",
  "StatusOff": "状態：OFF",
+ "Select": "選択してください",
+ "TestVoice": "ボイスを試聴する",
  "SelectAIService": "AIサービスを選択",
  "LocalLLM": "ローカルLLM",
  "SelectModel": "モデルを選択",
@@ -47,6 +49,9 @@
  "KoeiromapInfo": "KoemotionのKoeiromap APIを使用しています。日本語のみに対応しています。詳しくは下記をご覧ください。",
  "UsingVoiceVox": "VOICEVOXを使用する",
  "VoiceVoxInfo": "VOICEVOXを使用しています。日本語のみに対応しています。ローカルAPIを使用するので下記のサイトから環境にあったアプリをダウンロードし、起動しておく必要があります。",
+ "VoicevoxSpeed": "話速",
+ "VoicevoxPitch": "音高",
+ "VoicevoxIntonation": "抑揚",
  "UsingGoogleTTS": "Google TTSを使用する",
  "UsingStyleBertVITS2": "Style-Bert-VITS2を使用する",
  "StyleBertVITS2Info": "Style-Bert-VITS2を使用しています。日・英・中のみに対応しています。ローカルAPIを使用するので下記のサイトから環境にあったアプリをダウンロードし、起動しておく必要があります。",

diff --git a/locales/ko/translation.json b/locales/ko/translation.json
@@ -16,6 +16,8 @@
  "ConversationContinuityModeInfo3": "gpt-4o, gpt-4-turbo, claude-3-opus, claude-3.5-sonnet에서 비교적 안정적으로 동작합니다.",
  "StatusOn": "상태: ON",
  "StatusOff": "상태: OFF",
+ "Select": "선택하세요",
+ "TestVoice": "음성 테스트",
  "SelectAIService": "AI 서비스 선택",
  "LocalLLM": "로컬 LLM",
  "SelectModel": "모델 선택",
@@ -47,6 +49,9 @@
  "KoeiromapInfo": "Koemotion의 Koeiromap API를 사용하고 있습니다. 일본어만 지원됩니다. 자세한 내용은 아래를 참조하십시오.",
  "UsingVoiceVox": "VOICEVOX 사용",
  "VoiceVoxInfo": "VOICEVOX를 사용하고 있습니다. 일본어만 지원됩니다. 로컬 API를 사용하기 때문에 아래 사이트에서 환경에 맞는 앱을 다운로드하고 실행해야 합니다.",
+ "VoicevoxSpeed": "말하는 속도",
+ "VoicevoxPitch": "음높이",
+ "VoicevoxIntonation": "억양",
  "UsingGoogleTTS": "Google TTS 사용",
  "UsingStyleBertVITS2": "Style-Bert-VITS2 사용",
  "StyleBertVITS2Info": "Style-Bert-VITS2를 사용하고 있습니다. 일본어, 영어, 중국어만 지원됩니다. 로컬 API를 사용하기 때문에 아래 사이트에서 환경에 맞는 앱을 다운로드하고 실행해야 합니다.",

diff --git a/locales/zh/translation.json b/locales/zh/translation.json
@@ -16,6 +16,8 @@
  "ConversationContinuityModeInfo3": "在 gpt-4o、gpt-4-turbo、claude-3-opus、claude-3.5-sonnet 上能夠比較穩定地運行。",
  "StatusOn": "狀態：開",
  "StatusOff": "狀態：關",
+ "Select": "選擇",
+ "TestVoice": "語音測試",
  "SelectAIService": "選擇 AI 服務",
  "LocalLLM": "本地 LLM",
  "SelectModel": "選擇模型",
@@ -47,6 +49,9 @@
  "KoeiromapInfo": "使用 Koemotion 的 Koeiromap API。僅支援日語。詳情請參考以下連結。",
  "UsingVoiceVox": "使用 VOICEVOX",
  "VoiceVoxInfo": "使用 VOICEVOX。僅支援日語。它使用本地 API，您需要從以下網站下載並啟動適合您環境的應用程式。",
+ "VoicevoxSpeed": "語速",
+ "VoicevoxPitch": "音調",
+ "VoicevoxIntonation": "語調",
  "UsingGoogleTTS": "使用 Google TTS",
  "UsingStyleBertVITS2": "使用 Style-Bert-VITS2",
  "StyleBertVITS2Info": "使用 Style-Bert-VITS2。僅支援日語、英語和中文。它使用本地 API，您需要從以下網站下載並啟動適合您環境的應用程式。",

diff --git a/src/components/settings/voice.tsx b/src/components/settings/voice.tsx
@@ -21,6 +21,9 @@ const Voice = () => {
  const koeiroParam = settingsStore((s) => s.koeiroParam)
  const googleTtsType = settingsStore((s) => s.googleTtsType)
  const voicevoxSpeaker = settingsStore((s) => s.voicevoxSpeaker)
+ const voicevoxSpeed = settingsStore((s) => s.voicevoxSpeed)
+ const voicevoxPitch = settingsStore((s) => s.voicevoxPitch)
+ const voicevoxIntonation = settingsStore((s) => s.voicevoxIntonation)
  const stylebertvits2ServerUrl = settingsStore(
  (s) => s.stylebertvits2ServerUrl
  )
@@ -195,20 +198,67 @@ const Voice = () => {
  }
  className="px-16 py-8 bg-surface1 hover:bg-surface1-hover rounded-8"
  >
- <option value="">選択してください</option>
+ <option value="">{t('Select')}</option>
  {speakers.map((speaker) => (
  <option key={speaker.id} value={speaker.id}>
  {speaker.speaker}
  </option>
  ))}
  </select>
- <TextButton
- onClick={() => testVoice(voicevoxSpeaker)}
- className="ml-16"
- >
- ボイスを試聴する
+ <TextButton onClick={() => testVoice()} className="ml-16">
+ {t('TestVoice')}
  </TextButton>
  </div>
+ <div className="my-24">
+ <div className="select-none">
+ {t('VoicevoxSpeed')}: {voicevoxSpeed}
+ </div>
+ <input
+ type="range"
+ min={0.5}
+ max={2}
+ step={0.01}
+ value={voicevoxSpeed}
+ className="mt-8 mb-16 input-range"
+ onChange={(e) => {
+ settingsStore.setState({
+ voicevoxSpeed: Number(e.target.value),
+ })
+ }}
+ ></input>
+ <div className="select-none">
+ {t('VoicevoxPitch')}: {voicevoxPitch}
+ </div>
+ <input
+ type="range"
+ min={-0.15}
+ max={0.15}
+ step={0.01}
+ value={voicevoxPitch}
+ className="mt-8 mb-16 input-range"
+ onChange={(e) => {
+ settingsStore.setState({
+ voicevoxPitch: Number(e.target.value),
+ })
+ }}
+ ></input>
+ <div className="select-none">
+ {t('VoicevoxIntonation')}: {voicevoxIntonation}
+ </div>
+ <input
+ type="range"
+ min={0.0}
+ max={2.0}
+ step={0.01}
+ value={voicevoxIntonation}
+ className="mt-8 mb-16 input-range"
+ onChange={(e) => {
+ settingsStore.setState({
+ voicevoxIntonation: Number(e.target.value),
+ })
+ }}
+ ></input>
+ </div>
  </>
  )
  } else if (selectVoice === 'google') {

diff --git a/src/features/messages/speakCharacter.ts b/src/features/messages/speakCharacter.ts
@@ -50,7 +50,10 @@ const createSpeakCharacter = () => {
  } else if (ss.selectVoice == 'voicevox') {
  buffer = await fetchAudioVoiceVox(
  screenplay.talk,
- ss.voicevoxSpeaker
+ ss.voicevoxSpeaker,
+ ss.voicevoxSpeed,
+ ss.voicevoxPitch,
+ ss.voicevoxIntonation
  ).catch(() => null)
  } else if (ss.selectVoice == 'google') {
  const googleTtsTypeByLang = getGoogleTtsType(
@@ -164,7 +167,10 @@ export const fetchAudio = async (
 
 export const fetchAudioVoiceVox = async (
  talk: Talk,
- speaker: string
+ speaker: string,
+ speed: number,
+ pitch: number,
+ intonation: number
 ): Promise<ArrayBuffer> => {
  console.log('speakerId:', speaker)
  const ttsQueryResponse = await fetch(
@@ -182,7 +188,9 @@ export const fetchAudioVoiceVox = async (
  }
  const ttsQueryJson = await ttsQueryResponse.json()
 
- ttsQueryJson['speedScale'] = 1.1
+ ttsQueryJson['speedScale'] = speed
+ ttsQueryJson['pitchScale'] = pitch
+ ttsQueryJson['intonationScale'] = intonation
  const synthesisResponse = await fetch(
  VOICE_VOX_API_URL + '/synthesis?speaker=' + speaker,
  {
@@ -230,16 +238,21 @@ export const fetchAudioStyleBertVITS2 = async (
  return ttsVoice
 }
 
-export const testVoice = async (voicevoxSpeaker: string) => {
+export const testVoice = async () => {
+ const ss = settingsStore.getState()
  const talk: Talk = {
  message: 'ボイスボックスを使用します',
  speakerX: 0,
  speakerY: 0,
  style: 'talk',
  }
- const buffer = await fetchAudioVoiceVox(talk, voicevoxSpeaker).catch(
- () => null
- )
+ const buffer = await fetchAudioVoiceVox(
+ talk,
+ ss.voicevoxSpeaker,
+ ss.voicevoxSpeed,
+ ss.voicevoxPitch,
+ ss.voicevoxIntonation
+ ).catch(() => null)
  if (buffer) {
  const screenplay: Screenplay = {
  expression: 'neutral',

diff --git a/src/features/stores/settings.ts b/src/features/stores/settings.ts
@@ -29,6 +29,9 @@ interface ModelProvider {
  koeiroParam: KoeiroParam
  googleTtsType: string
  voicevoxSpeaker: string
+ voicevoxSpeed: number
+ voicevoxPitch: number
+ voicevoxIntonation: number
  stylebertvits2ServerUrl: string
  stylebertvits2ModelId: string
  stylebertvits2Style: string
@@ -93,7 +96,10 @@ const settingsStore = create<SettingsState>()(
  koeiroParam: DEFAULT_PARAM,
  googleTtsType:
  process.env.NEXT_PUBLIC_GOOGLE_TTS_TYPE || 'en-US-Neural2-F',
- voicevoxSpeaker: '2',
+ voicevoxSpeaker: '46',
+ voicevoxSpeed: 1.0,
+ voicevoxPitch: 0.0,
+ voicevoxIntonation: 1.0,
  stylebertvits2ServerUrl: 'http://127.0.0.1:5000',
  stylebertvits2ModelId: '0',
  stylebertvits2Style: 'Neutral',
@@ -146,6 +152,9 @@ const settingsStore = create<SettingsState>()(
  koeiroParam: state.koeiroParam,
  googleTtsType: state.googleTtsType,
  voicevoxSpeaker: state.voicevoxSpeaker,
+ voicevoxSpeed: state.voicevoxSpeed,
+ voicevoxPitch: state.voicevoxPitch,
+ voicevoxIntonation: state.voicevoxIntonation,
  stylebertvits2ServerUrl: state.stylebertvits2ServerUrl,
  stylebertvits2ModelId: state.stylebertvits2ModelId,
  stylebertvits2Style: state.stylebertvits2Style,