Add Speed Control to ElevenLabs TTS Provider (#4213) * add speed * Adjust speed range * More granular step --------- Co-authored-by: Cohee <18619528+Cohee1207@users.noreply.github.com>
Signed| @@ -16,6 +16,7 @@ class ElevenLabsTtsProvider { | |||
| 16 | similarity_boost: 0.75, | 16 | similarity_boost: 0.75, |
| 17 | style_exaggeration: 0.00, | 17 | style_exaggeration: 0.00, |
| 18 | speaker_boost: true, | 18 | speaker_boost: true, |
| 19 | speed: 1.0, | ||
| 19 | apiKey: '', | 20 | apiKey: '', |
| 20 | model: 'eleven_turbo_v2_5', | 21 | model: 'eleven_turbo_v2_5', |
| 21 | voiceMap: {}, | 22 | voiceMap: {}, |
| @@ -43,6 +44,8 @@ class ElevenLabsTtsProvider { | |||
| 43 | <input id="elevenlabs_tts_stability" type="range" value="${this.defaultSettings.stability}" min="0" max="1" step="0.01" /> | 44 | <input id="elevenlabs_tts_stability" type="range" value="${this.defaultSettings.stability}" min="0" max="1" step="0.01" /> |
| 44 | <label for="elevenlabs_tts_similarity_boost">Similarity Boost: <span id="elevenlabs_tts_similarity_boost_output"></span></label> | 45 | <label for="elevenlabs_tts_similarity_boost">Similarity Boost: <span id="elevenlabs_tts_similarity_boost_output"></span></label> |
| 45 | <input id="elevenlabs_tts_similarity_boost" type="range" value="${this.defaultSettings.similarity_boost}" min="0" max="1" step="0.01" /> | 46 | <input id="elevenlabs_tts_similarity_boost" type="range" value="${this.defaultSettings.similarity_boost}" min="0" max="1" step="0.01" /> |
| 47 | <label for="elevenlabs_tts_speed">Speed: <span id="elevenlabs_tts_speed_output"></span></label> | ||
| 48 | <input id="elevenlabs_tts_speed" type="range" value="${this.defaultSettings.speed}" min="0.7" max="1.2" step="0.01" /> | ||
| 46 | <div id="elevenlabs_tts_v2_options" style="display: none;"> | 49 | <div id="elevenlabs_tts_v2_options" style="display: none;"> |
| 47 | <label for="elevenlabs_tts_style_exaggeration">Style Exaggeration: <span id="elevenlabs_tts_style_exaggeration_output"></span></label> | 50 | <label for="elevenlabs_tts_style_exaggeration">Style Exaggeration: <span id="elevenlabs_tts_style_exaggeration_output"></span></label> |
| 48 | <input id="elevenlabs_tts_style_exaggeration" type="range" value="${this.defaultSettings.style_exaggeration}" min="0" max="1" step="0.01" /> | 51 | <input id="elevenlabs_tts_style_exaggeration" type="range" value="${this.defaultSettings.style_exaggeration}" min="0" max="1" step="0.01" /> |
| @@ -86,10 +89,12 @@ class ElevenLabsTtsProvider { | |||
| 86 | this.settings.similarity_boost = $('#elevenlabs_tts_similarity_boost').val(); | 89 | this.settings.similarity_boost = $('#elevenlabs_tts_similarity_boost').val(); |
| 87 | this.settings.style_exaggeration = $('#elevenlabs_tts_style_exaggeration').val(); | 90 | this.settings.style_exaggeration = $('#elevenlabs_tts_style_exaggeration').val(); |
| 88 | this.settings.speaker_boost = $('#elevenlabs_tts_speaker_boost').is(':checked'); | 91 | this.settings.speaker_boost = $('#elevenlabs_tts_speaker_boost').is(':checked'); |
| 92 | this.settings.speed = $('#elevenlabs_tts_speed').val(); | ||
| 89 | this.settings.model = $('#elevenlabs_tts_model').find(':selected').val(); | 93 | this.settings.model = $('#elevenlabs_tts_model').find(':selected').val(); |
| 90 | $('#elevenlabs_tts_stability_output').text(Math.round(this.settings.stability * 100) + '%'); | 94 | $('#elevenlabs_tts_stability_output').text(Math.round(this.settings.stability * 100) + '%'); |
| 91 | $('#elevenlabs_tts_similarity_boost_output').text(Math.round(this.settings.similarity_boost * 100) + '%'); | 95 | $('#elevenlabs_tts_similarity_boost_output').text(Math.round(this.settings.similarity_boost * 100) + '%'); |
| 92 | $('#elevenlabs_tts_style_exaggeration_output').text(Math.round(this.settings.style_exaggeration * 100) + '%'); | 96 | $('#elevenlabs_tts_style_exaggeration_output').text(Math.round(this.settings.style_exaggeration * 100) + '%'); |
| 97 | $('#elevenlabs_tts_speed_output').text(this.settings.speed + 'x'); | ||
| 93 | $('#elevenlabs_tts_v2_options').toggle(this.shouldInvolveExtendedSettings()); | 98 | $('#elevenlabs_tts_v2_options').toggle(this.shouldInvolveExtendedSettings()); |
| 94 | saveTtsProviderSettings(); | 99 | saveTtsProviderSettings(); |
| 95 | } | 100 | } |
| @@ -121,6 +126,7 @@ class ElevenLabsTtsProvider { | |||
| 121 | $('#elevenlabs_tts_similarity_boost').val(this.settings.similarity_boost); | 126 | $('#elevenlabs_tts_similarity_boost').val(this.settings.similarity_boost); |
| 122 | $('#elevenlabs_tts_style_exaggeration').val(this.settings.style_exaggeration); | 127 | $('#elevenlabs_tts_style_exaggeration').val(this.settings.style_exaggeration); |
| 123 | $('#elevenlabs_tts_speaker_boost').prop('checked', this.settings.speaker_boost); | 128 | $('#elevenlabs_tts_speaker_boost').prop('checked', this.settings.speaker_boost); |
| 129 | $('#elevenlabs_tts_speed').val(this.settings.speed); | ||
| 124 | $('#elevenlabs_tts_api_key').val(this.settings.apiKey); | 130 | $('#elevenlabs_tts_api_key').val(this.settings.apiKey); |
| 125 | $('#elevenlabs_tts_model').val(this.settings.model); | 131 | $('#elevenlabs_tts_model').val(this.settings.model); |
| 126 | $('#eleven_labs_connect').on('click', () => { this.onConnectClick(); }); | 132 | $('#eleven_labs_connect').on('click', () => { this.onConnectClick(); }); |
| @@ -128,10 +134,12 @@ class ElevenLabsTtsProvider { | |||
| 128 | $('#elevenlabs_tts_stability').on('input', this.onSettingsChange.bind(this)); | 134 | $('#elevenlabs_tts_stability').on('input', this.onSettingsChange.bind(this)); |
| 129 | $('#elevenlabs_tts_style_exaggeration').on('input', this.onSettingsChange.bind(this)); | 135 | $('#elevenlabs_tts_style_exaggeration').on('input', this.onSettingsChange.bind(this)); |
| 130 | $('#elevenlabs_tts_speaker_boost').on('change', this.onSettingsChange.bind(this)); | 136 | $('#elevenlabs_tts_speaker_boost').on('change', this.onSettingsChange.bind(this)); |
| 137 | $('#elevenlabs_tts_speed').on('input', this.onSettingsChange.bind(this)); | ||
| 131 | $('#elevenlabs_tts_model').on('change', this.onSettingsChange.bind(this)); | 138 | $('#elevenlabs_tts_model').on('change', this.onSettingsChange.bind(this)); |
| 132 | $('#elevenlabs_tts_stability_output').text(Math.round(this.settings.stability * 100) + '%'); | 139 | $('#elevenlabs_tts_stability_output').text(Math.round(this.settings.stability * 100) + '%'); |
| 133 | $('#elevenlabs_tts_similarity_boost_output').text(Math.round(this.settings.similarity_boost * 100) + '%'); | 140 | $('#elevenlabs_tts_similarity_boost_output').text(Math.round(this.settings.similarity_boost * 100) + '%'); |
| 134 | $('#elevenlabs_tts_style_exaggeration_output').text(Math.round(this.settings.style_exaggeration * 100) + '%'); | 141 | $('#elevenlabs_tts_style_exaggeration_output').text(Math.round(this.settings.style_exaggeration * 100) + '%'); |
| 142 | $('#elevenlabs_tts_speed_output').text(this.settings.speed + 'x'); | ||
| 135 | $('#elevenlabs_tts_v2_options').toggle(this.shouldInvolveExtendedSettings()); | 143 | $('#elevenlabs_tts_v2_options').toggle(this.shouldInvolveExtendedSettings()); |
| 136 | try { | 144 | try { |
| 137 | await this.checkReady(); | 145 | await this.checkReady(); |
| @@ -320,6 +328,7 @@ class ElevenLabsTtsProvider { | |||
| 320 | voice_settings: { | 328 | voice_settings: { |
| 321 | stability: Number(this.settings.stability), | 329 | stability: Number(this.settings.stability), |
| 322 | similarity_boost: Number(this.settings.similarity_boost), | 330 | similarity_boost: Number(this.settings.similarity_boost), |
| 331 | speed: Number(this.settings.speed), | ||
| 323 | }, | 332 | }, |
| 324 | }; | 333 | }; |
| 325 | if (this.shouldInvolveExtendedSettings()) { | 334 | if (this.shouldInvolveExtendedSettings()) { |