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>

a7783b62a851b1255bd45388ead298abfaacf677

Vin Astralis <victor@augusteo.com>

Signed
1 files changed, +9 -0Showing whitespace changes
public/scripts/extensions/tts/elevenlabs.js+9 -0
@@ -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()) {