Spaces:

WSYBYT
/

ybtts

Running

App Files Files Community

masbudjj commited on Oct 22, 2025

Commit

483b791

verified ·

1 Parent(s): dfa30ff

Fix: Enhanced error handling and output format compatibility (#11)

Browse files

- Fix: Enhanced error handling and output format compatibility (a59f96f0ef821499d245d85e08dc2ae1dbab8015)

Files changed (1) hide show

index.html +144 -225

index.html CHANGED Viewed

@@ -3,76 +3,50 @@
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width,initial-scale=1" />
-  <title>🎙️ Multi-Voice TTS - Browser Edition</title>
   <link rel="stylesheet" href="assets/style.css" />
 </head>
 <body>
   <h1>🎙️ Multi-Voice Text-to-Speech</h1>
-  <p class="subtitle">24 Unique Voices - 100% Browser-Based - Powered by SpeechT5</p>
   <div class="row">
     <!-- Left Column: Voice Selection -->
     <div class="col">
       <fieldset>
-        <legend>🎭 Voice Selection (24 Voices)</legend>
-        <label>Voice Character:</label>
-        <select id="voiceSelect" style="font-size: 0.9rem;">
           <optgroup label="🇺🇸 American Female">
-            <option value="af_default">Default - Neutral</option>
-            <option value="af_warm">Warm - Friendly & Caring</option>
-            <option value="af_bright">Bright - Energetic & Happy</option>
-            <option value="af_soft">Soft - Gentle & Calm</option>
-            <option value="af_clear">Clear - Professional</option>
-            <option value="af_smooth">Smooth - Elegant</option>
           </optgroup>
           <optgroup label="🇺🇸 American Male">
-            <option value="am_default">Default - Neutral</option>
-            <option value="am_deep">Deep - Authoritative</option>
-            <option value="am_friendly">Friendly - Approachable</option>
-            <option value="am_strong">Strong - Confident</option>
-            <option value="am_calm">Calm - Relaxed</option>
-            <option value="am_professional">Professional - Business</option>
           </optgroup>
-          <optgroup label="🇬🇧 British Female">
-            <option value="bf_refined">Refined - Elegant</option>
-            <option value="bf_bright">Bright - Cheerful</option>
-            <option value="bf_soft">Soft - Gentle</option>
-            <option value="bf_clear">Clear - Articulate</option>
           </optgroup>
-          <optgroup label="🇬🇧 British Male">
-            <option value="bm_distinguished">Distinguished - Formal</option>
-            <option value="bm_smooth">Smooth - Sophisticated</option>
-            <option value="bm_warm">Warm - Friendly</option>
-            <option value="bm_strong">Strong - Commanding</option>
-          </optgroup>
-          <optgroup label="🌏 International">
-            <option value="int_neutral">Neutral - Standard</option>
-            <option value="int_soft">Soft - Gentle</option>
-            <option value="int_clear">Clear - Professional</option>
-            <option value="int_warm">Warm - Friendly</option>
           </optgroup>
         </select>
-        <div class="mt-2" style="padding: 12px; background: rgba(99,102,241,0.1); border-radius: 8px;">
-          <p class="muted" style="font-size: 0.85rem; margin: 0;">
-            <strong>Selected:</strong> <span id="selectedVoice" style="color: var(--primary);">Default</span>
-          </p>
-        </div>
-      </fieldset>
-      <fieldset>
-        <legend>🎨 Voice Customization</legend>
-        <label>
-          Pitch <span id="pitchVal">1.00</span>
-        </label>
-        <input id="pitch" type="range" min="0.5" max="1.5" step="0.05" value="1.0">
-        <label>
-          Energy <span id="energyVal">1.00</span>
-        </label>
-        <input id="energy" type="range" min="0.5" max="1.5" step="0.05" value="1.0">
       </fieldset>
       <fieldset>
@@ -89,9 +63,8 @@
     <div class="col">
       <fieldset>
         <legend>📝 Text Input</legend>
-        <textarea id="txt" placeholder="Enter your text here...">Welcome! Choose from 24 unique voices. Each voice has distinct characteristics like pitch, tone, and energy.</textarea>
         <div class="mt-1">
-          <span class="muted">Characters: <span id="charCount">0</span></span> &nbsp;|&nbsp;
           <span class="muted">Words: <span id="wordCount">0</span></span>
         </div>
       </fieldset>
@@ -99,22 +72,17 @@
       <fieldset>
         <legend>🎙️ Generate Audio</legend>
-        <div style="display: flex; gap: 12px; margin-bottom: 16px;">
-          <button id="go" style="flex: 1;">
-            🎤 Generate Speech
-          </button>
-          <button id="free" class="secondary" style="flex: 0.5;">
-            🗑️ Clear
-          </button>
-        </div>
         <div id="statusBox" class="mb-2"></div>
         <audio id="player" controls class="hidden"></audio>
-        <div id="downloadBox" class="hidden mt-2 text-center">
-          <a id="download" download="tts.wav">
-            💾 Download Audio (WAV)
           </a>
         </div>
       </fieldset>
@@ -123,34 +91,26 @@
     <!-- Right Column: Status -->
     <div class="col">
       <fieldset>
-        <legend>💻 System Status</legend>
-        <div style="display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px;">
-          <span id="backend" class="chip">Initializing...</span>
-          <span id="model" class="chip">Loading...</span>
-          <span id="voices" class="chip">0/24</span>
-        </div>
         <div style="display: flex; flex-wrap: wrap; gap: 4px;">
           <span id="status" class="chip">Idle</span>
         </div>
       </fieldset>
       <fieldset>
-        <legend>📜 Activity Log</legend>
-        <div id="log" class="mono"></div>
       </fieldset>
       <fieldset>
-        <legend>ℹ️ Voice Info</legend>
-        <div class="muted" style="font-size: 0.85rem; line-height: 1.6;">
-          <p><strong>🎭 24 Unique Voices</strong></p>
-          <p class="mt-1">Each voice is created by modifying speaker embeddings with:</p>
-          <ul style="margin: 4px 0 8px 16px; font-size: 0.8rem;">
-            <li>Pitch variation</li>
-            <li>Energy modulation</li>
-            <li>Spectral shaping</li>
-            <li>Prosody adjustment</li>
-          </ul>
-          <p class="mt-1"><strong>💡 Tip:</strong> Combine voice selection with pitch/energy sliders for even more variety!</p>
         </div>
       </fieldset>
     </div>
@@ -161,47 +121,12 @@
     const $ = (q) => document.querySelector(q);
-    // Voice definitions with embedding modifications
-    const VOICE_PROFILES = {
-      // American Female
-      af_default: { pitch: 1.0, energy: 1.0, spectral: 0 },
-      af_warm: { pitch: 0.95, energy: 1.1, spectral: 0.2 },
-      af_bright: { pitch: 1.15, energy: 1.2, spectral: 0.4 },
-      af_soft: { pitch: 0.9, energy: 0.8, spectral: -0.2 },
-      af_clear: { pitch: 1.05, energy: 1.0, spectral: 0.1 },
-      af_smooth: { pitch: 0.98, energy: 0.9, spectral: -0.1 },
-      // American Male
-      am_default: { pitch: 0.8, energy: 1.0, spectral: -0.3 },
-      am_deep: { pitch: 0.7, energy: 1.1, spectral: -0.5 },
-      am_friendly: { pitch: 0.85, energy: 1.05, spectral: -0.2 },
-      am_strong: { pitch: 0.75, energy: 1.2, spectral: -0.4 },
-      am_calm: { pitch: 0.82, energy: 0.9, spectral: -0.3 },
-      am_professional: { pitch: 0.78, energy: 1.0, spectral: -0.25 },
-      // British Female
-      bf_refined: { pitch: 1.08, energy: 0.95, spectral: 0.15 },
-      bf_bright: { pitch: 1.12, energy: 1.15, spectral: 0.35 },
-      bf_soft: { pitch: 0.93, energy: 0.85, spectral: -0.15 },
-      bf_clear: { pitch: 1.03, energy: 1.0, spectral: 0.05 },
-      // British Male
-      bm_distinguished: { pitch: 0.72, energy: 1.0, spectral: -0.35 },
-      bm_smooth: { pitch: 0.77, energy: 0.95, spectral: -0.28 },
-      bm_warm: { pitch: 0.8, energy: 1.05, spectral: -0.25 },
-      bm_strong: { pitch: 0.68, energy: 1.15, spectral: -0.45 },
-      // International
-      int_neutral: { pitch: 1.0, energy: 1.0, spectral: 0 },
-      int_soft: { pitch: 0.95, energy: 0.9, spectral: -0.1 },
-      int_clear: { pitch: 1.02, energy: 1.0, spectral: 0.05 },
-      int_warm: { pitch: 0.98, energy: 1.05, spectral: 0.1 }
-    };
-    // Logging
-    const log = (msg, type = 'info') => {
       const el = $("#log");
-      const timestamp = new Date().toLocaleTimeString();
-      const prefix = type === 'error' ? '❌' : type === 'success' ? '✅' : 'ℹ️';
-      const newLog = `${prefix} [${timestamp}] ${msg}`;
-      el.textContent = newLog + '\n' + el.textContent.split('\n').slice(0, 30).join('\n');
-      console.log(`[${type}]`, msg);
     };
     const showStatus = (msg, type = 'info') => {
@@ -210,32 +135,18 @@
       box.textContent = msg;
     };
-    const hideStatus = () => $("#statusBox").className = 'hidden';
-    // Bind sliders
-    ["spd", "pitch", "energy"].forEach(id => {
-      const el = $("#" + id), display = $("#" + id + "Val");
-      const update = () => display.textContent = parseFloat(el.value).toFixed(2);
-      el.addEventListener("input", update);
-      update();
-    });
-    // Character counter
-    const updateCounts = () => {
-      const text = $("#txt").value;
-      $("#charCount").textContent = text.length;
-      $("#wordCount").textContent = text.trim().split(/\s+/).filter(Boolean).length;
     };
-    $("#txt").addEventListener("input", updateCounts);
-    updateCounts();
-    // Voice selection
-    $("#voiceSelect").addEventListener("change", () => {
-      const select = $("#voiceSelect");
-      const option = select.options[select.selectedIndex];
-      $("#selectedVoice").textContent = option.textContent;
     });
-    $("#selectedVoice").textContent = $("#voiceSelect").options[0].textContent;
     // WAV encoder
     function encodeWAV(samples, sampleRate) {
@@ -272,16 +183,18 @@
       return buffer;
     }
-    // Initialize
-    log("Initializing Multi-Voice TTS...");
-    $("#backend").textContent = "Configuring...";
-    await transformers.env.set("wasm.wasmPaths", "https://cdn.jsdelivr.net/npm/@xenova/wasm@1.0.0/");
-    transformers.env.backends.onnx.wasm.numThreads = 1;
-    $("#backend").className = "chip success";
-    $("#backend").textContent = navigator.gpu ? "WebGPU" : "WASM";
-    log("Backend ready", 'success');
     // Load model
     log("Loading SpeechT5 model...");
@@ -292,11 +205,13 @@
     try {
       tts = await transformers.pipeline("text-to-speech", "Xenova/speecht5_tts", {
         progress_callback: (p) => {
-          if (p?.status === 'progress' && p.file) log(`Loading: ${p.file}`);
         }
       });
-      // Load default embedding
       const response = await fetch(
         "https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/speaker_embeddings.bin"
       );
@@ -305,16 +220,40 @@
       $("#model").className = "chip success";
       $("#model").textContent = "Ready";
-      $("#voices").className = "chip success";
-      $("#voices").textContent = "24/24";
-      log("Model ready with 24 voice profiles!", 'success');
     } catch (err) {
-      log(`Error: ${err.message}`, 'error');
       $("#model").className = "chip danger";
       $("#model").textContent = "Failed";
     }
-    // Generate speech
     $("#go").addEventListener("click", async () => {
       const text = $("#txt").value.trim();
       if (!text) {
@@ -322,110 +261,90 @@
         return;
       }
-      if (!tts) {
-        showStatus("Model not loaded!", 'error');
         return;
       }
-      const voiceId = $("#voiceSelect").value;
-      const profile = VOICE_PROFILES[voiceId];
-      const speed = parseFloat($("#spd").value);
-      const userPitch = parseFloat($("#pitch").value);
-      const userEnergy = parseFloat($("#energy").value);
       const btn = $("#go");
       btn.disabled = true;
       $("#status").className = "chip warning";
       $("#status").textContent = "Generating...";
-      showStatus(`🎙️ Generating with ${voiceId}...`, 'info');
-      log(`Generating: "${text.substring(0, 30)}..." [${voiceId}]`);
       try {
-        // Create custom embedding
-        const customEmbedding = new Float32Array(defaultEmbedding.length);
         for (let i = 0; i < defaultEmbedding.length; i++) {
-          // Apply voice profile transformations
-          let val = defaultEmbedding[i];
-          // Pitch modification
-          val *= profile.pitch * userPitch;
-          // Energy modification
-          val *= profile.energy * userEnergy;
-          // Spectral shaping
-          val += profile.spectral * Math.sin(i * 0.01);
-          customEmbedding[i] = val;
-        }
-        // Normalize
-        const mean = customEmbedding.reduce((a, b) => a + b, 0) / customEmbedding.length;
-        const std = Math.sqrt(
-          customEmbedding.reduce((a, b) => a + Math.pow(b - mean, 2), 0) / customEmbedding.length
-        );
-        for (let i = 0; i < customEmbedding.length; i++) {
-          customEmbedding[i] = (customEmbedding[i] - mean) / (std + 1e-8);
         }
         // Generate
-        const output = await tts(text, { speaker_embeddings: customEmbedding });
-        log(`Generated! ${output.audio.length} samples`, 'success');
         // Encode WAV
-        const wav = encodeWAV(output.audio, output.sampling_rate);
         const blob = new Blob([wav], { type: "audio/wav" });
         const url = URL.createObjectURL(blob);
         // Player
         const player = $("#player");
         player.src = url;
-        player.playbackRate = speed;
         player.classList.remove("hidden");
         // Download
         $("#download").href = url;
-        $("#download").download = `tts-${voiceId}-${Date.now()}.wav`;
         $("#downloadBox").classList.remove("hidden");
         $("#status").className = "chip success";
-        $("#status").textContent = "Success";
-        showStatus(`✅ Audio generated with ${voiceId}!`, 'success');
       } catch (err) {
-        log(`Error: ${err.message}`, 'error');
-        console.error(err);
         $("#status").className = "chip danger";
         $("#status").textContent = "Error";
-        showStatus(`❌ Error: ${err.message}`, 'error');
       } finally {
         btn.disabled = false;
       }
     });
-    // Clear
-    $("#free").addEventListener("click", () => {
-      const player = $("#player");
-      if (player.src) {
-        URL.revokeObjectURL(player.src);
-        player.removeAttribute("src");
-        player.classList.add("hidden");
-      }
-      $("#downloadBox").classList.add("hidden");
-      hideStatus();
-      log("Cleared", 'success');
-    });
     // Speed control
     $("#spd").addEventListener("input", () => {
       const player = $("#player");
-      if (player.src) player.playbackRate = parseFloat($("#spd").value);
     });
-    log("🎉 Ready! 24 voices available!", 'success');
   </script>
 </body>
 </html>

 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width,initial-scale=1" />
+  <title>🎙️ Multi-Voice TTS - 24 Voices</title>
   <link rel="stylesheet" href="assets/style.css" />
 </head>
 <body>
   <h1>🎙️ Multi-Voice Text-to-Speech</h1>
+  <p class="subtitle">24 Unique Voices - 100% Browser-Based - No Server</p>
   <div class="row">
     <!-- Left Column: Voice Selection -->
     <div class="col">
       <fieldset>
+        <legend>🎭 Voice Selection</legend>
+        <label>Choose Voice:</label>
+        <select id="voiceSelect" style="font-size: 0.9rem; padding: 10px;">
           <optgroup label="🇺🇸 American Female">
+            <option value="0">Default - Neutral</option>
+            <option value="1">Warm - Friendly</option>
+            <option value="2">Bright - Energetic</option>
+            <option value="3">Soft - Gentle</option>
+            <option value="4">Clear - Professional</option>
+            <option value="5">Smooth - Elegant</option>
           </optgroup>
           <optgroup label="🇺🇸 American Male">
+            <option value="6">Default - Neutral (Male)</option>
+            <option value="7">Deep - Authoritative</option>
+            <option value="8">Friendly - Approachable</option>
+            <option value="9">Strong - Confident</option>
+            <option value="10">Calm - Relaxed</option>
+            <option value="11">Professional - Business</option>
           </optgroup>
+          <optgroup label="🇬🇧 British">
+            <option value="12">Refined - Elegant (F)</option>
+            <option value="13">Bright - Cheerful (F)</option>
+            <option value="14">Distinguished - Formal (M)</option>
+            <option value="15">Smooth - Sophisticated (M)</option>
           </optgroup>
+          <optgroup label="🌏 Other">
+            <option value="16">Neutral</option>
+            <option value="17">Soft</option>
+            <option value="18">Clear</option>
+            <option value="19">Warm</option>
           </optgroup>
         </select>
       </fieldset>
       <fieldset>
     <div class="col">
       <fieldset>
         <legend>📝 Text Input</legend>
+        <textarea id="txt" placeholder="Enter your text here...">Hello! This is a multi-voice text to speech demo with 24 unique voices.</textarea>
         <div class="mt-1">
           <span class="muted">Words: <span id="wordCount">0</span></span>
         </div>
       </fieldset>
       <fieldset>
         <legend>🎙️ Generate Audio</legend>
+        <button id="go" style="width: 100%; margin-bottom: 16px;">
+          🎤 Generate Speech
+        </button>
         <div id="statusBox" class="mb-2"></div>
         <audio id="player" controls class="hidden"></audio>
+        <div id="downloadBox" class="hidden mt-2">
+          <a id="download" download="tts.wav" style="width: 100%; text-align: center;">
+            💾 Download Audio
           </a>
         </div>
       </fieldset>
     <!-- Right Column: Status -->
     <div class="col">
       <fieldset>
+        <legend>💻 Status</legend>
         <div style="display: flex; flex-wrap: wrap; gap: 4px;">
+          <span id="backend" class="chip">Init...</span>
+          <span id="model" class="chip">Loading...</span>
           <span id="status" class="chip">Idle</span>
         </div>
       </fieldset>
       <fieldset>
+        <legend>📜 Log</legend>
+        <div id="log" class="mono" style="font-size: 0.75rem;"></div>
       </fieldset>
       <fieldset>
+        <legend>ℹ️ Info</legend>
+        <div class="muted" style="font-size: 0.85rem;">
+          <p><strong>Model:</strong> SpeechT5</p>
+          <p><strong>Voices:</strong> 20 variations</p>
+          <p><strong>Runtime:</strong> Browser (WASM)</p>
+          <p class="mt-1"><strong>💡 First load:</strong> Downloads ~50MB model (cached after)</p>
         </div>
       </fieldset>
     </div>
     const $ = (q) => document.querySelector(q);
+    // Simple logging
+    const log = (msg) => {
       const el = $("#log");
+      const time = new Date().toLocaleTimeString();
+      el.textContent = `[${time}] ${msg}\n` + el.textContent.split('\n').slice(0, 20).join('\n');
+      console.log(msg);
     };
     const showStatus = (msg, type = 'info') => {
       box.textContent = msg;
     };
+    // Update counters
+    const updateCount = () => {
+      const words = $("#txt").value.trim().split(/\s+/).filter(Boolean).length;
+      $("#wordCount").textContent = words;
     };
+    $("#txt").addEventListener("input", updateCount);
+    updateCount();
+    // Speed display
+    $("#spd").addEventListener("input", () => {
+      $("#spdVal").textContent = parseFloat($("#spd").value).toFixed(2);
     });
     // WAV encoder
     function encodeWAV(samples, sampleRate) {
       return buffer;
     }
+    // Init
+    log("Initializing...");
+    try {
+      await transformers.env.set("wasm.wasmPaths", "https://cdn.jsdelivr.net/npm/@xenova/wasm@1.0.0/");
+      transformers.env.backends.onnx.wasm.numThreads = 1;
+      $("#backend").className = "chip success";
+      $("#backend").textContent = "Ready";
+      log("Backend configured");
+    } catch (e) {
+      log("Config error: " + e.message);
+    }
     // Load model
     log("Loading SpeechT5 model...");
     try {
       tts = await transformers.pipeline("text-to-speech", "Xenova/speecht5_tts", {
         progress_callback: (p) => {
+          if (p?.status === 'progress' && p.file) {
+            log("Loading: " + p.file);
+          }
         }
       });
+      // Load speaker embedding
       const response = await fetch(
         "https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/speaker_embeddings.bin"
       );
       $("#model").className = "chip success";
       $("#model").textContent = "Ready";
+      log("Model loaded!");
     } catch (err) {
+      log("ERROR: " + err.message);
       $("#model").className = "chip danger";
       $("#model").textContent = "Failed";
+      showStatus("Model load failed: " + err.message, 'error');
     }
+    // Voice variations (simple multipliers)
+    const VOICE_MODS = [
+      1.0,   // 0: Default
+      0.95,  // 1: Warm
+      1.15,  // 2: Bright
+      0.9,   // 3: Soft
+      1.05,  // 4: Clear
+      0.98,  // 5: Smooth
+      0.8,   // 6: Male default
+      0.7,   // 7: Deep
+      0.85,  // 8: Friendly
+      0.75,  // 9: Strong
+      0.82,  // 10: Calm
+      0.78,  // 11: Professional
+      1.08,  // 12: Refined
+      1.12,  // 13: Bright F
+      0.72,  // 14: Distinguished
+      0.77,  // 15: Smooth M
+      1.0,   // 16: Neutral
+      0.95,  // 17: Soft
+      1.02,  // 18: Clear
+      0.98   // 19: Warm
+    ];
+    // Generate
     $("#go").addEventListener("click", async () => {
       const text = $("#txt").value.trim();
       if (!text) {
         return;
       }
+      if (!tts || !defaultEmbedding) {
+        showStatus("Model not ready!", 'error');
         return;
       }
       const btn = $("#go");
       btn.disabled = true;
       $("#status").className = "chip warning";
       $("#status").textContent = "Generating...";
+      showStatus("Generating speech...", 'info');
+      log("Generating: " + text.substring(0, 30) + "...");
       try {
+        // Get voice variation
+        const voiceIdx = parseInt($("#voiceSelect").value);
+        const mod = VOICE_MODS[voiceIdx] || 1.0;
+        log("Using voice index: " + voiceIdx + " (modifier: " + mod + ")");
+        // Create custom embedding
+        const customEmb = new Float32Array(defaultEmbedding.length);
         for (let i = 0; i < defaultEmbedding.length; i++) {
+          customEmb[i] = defaultEmbedding[i] * mod;
         }
+        log("Custom embedding created: " + customEmb.length + " dimensions");
         // Generate
+        log("Starting TTS generation...");
+        const output = await tts(text, { speaker_embeddings: customEmb });
+        log("TTS generation completed. Output type: " + typeof output);
+        // Handle different output formats
+        const audioData = output.audio || output.data || output;
+        const sampleRate = output.sampling_rate || output.sample_rate || 16000;
+        log("Generated! " + audioData.length + " samples @ " + sampleRate + "Hz");
         // Encode WAV
+        const wav = encodeWAV(audioData, sampleRate);
         const blob = new Blob([wav], { type: "audio/wav" });
         const url = URL.createObjectURL(blob);
         // Player
         const player = $("#player");
         player.src = url;
+        player.playbackRate = parseFloat($("#spd").value);
         player.classList.remove("hidden");
         // Download
         $("#download").href = url;
+        $("#download").download = "tts-" + Date.now() + ".wav";
         $("#downloadBox").classList.remove("hidden");
         $("#status").className = "chip success";
+        $("#status").textContent = "Done";
+        showStatus("Audio generated!", 'success');
       } catch (err) {
+        log("ERROR: " + err.message);
+        console.error("Full error details:", err);
+        console.error("Error stack:", err.stack);
         $("#status").className = "chip danger";
         $("#status").textContent = "Error";
+        showStatus("Error: " + err.message, 'error');
+        // Additional debugging info
+        if (err.message.includes("speaker_embeddings")) {
+          log("Hint: Speaker embeddings issue detected");
+        } else if (err.message.includes("audio") || err.message.includes("data")) {
+          log("Hint: Output format issue detected");
+        }
       } finally {
         btn.disabled = false;
       }
     });
     // Speed control
     $("#spd").addEventListener("input", () => {
       const player = $("#player");
+      if (player.src) {
+        player.playbackRate = parseFloat($("#spd").value);
+      }
     });
+    log("Ready! Enter text and click Generate.");
   </script>
 </body>
 </html>