@@ -34,7 +34,7 @@ In this tutorial, we'll build a complete **Text-to-Speech Application** that:
3434
3535By the end, you'll understand how TTS works and know how to use it on your own platforms!
3636
37- [ TODO: add demo video here]
37+ [ Take a sneak peek ] ( https://goku-kun.github.io/tts-app-codedex-project/completed/ ) at what you'll building here.
3838
3939Let's start!
4040
@@ -85,7 +85,6 @@ completed/
8585├── index.html
8686├── style.css
8787└── app.js # Completed app code
88-
8988```
9089
9190You can find the complete starter files in the ** starter/** folder of this project.
@@ -110,7 +109,7 @@ Open **starter/style.cs** to see the complete styling. It includes responsive de
110109
111110Take a look at the image below for your reference about what the starter code looks like when rendered in the browser:
112111
113- [ TODO: add image here ]
112+ [ App view ] ( https://firebasestorage.googleapis.com/v0/b/codedex-io.appspot.com/o/projects%2Fbuild-a-tts-app-with-web-browsers%2Fimage_1.png?alt=media&token=4882f4ea-5871-4eaa-962e-4cb713f95080 )
114113
115114### Step 3: Load Available Voices
116115
@@ -194,7 +193,7 @@ document.addEventListener("DOMContentLoaded", init);
194193
195194We call ` loadVoices() ` immediately (works in Firefox/Safari), and also listen for ` voiceschanged ` (needed for Chrome). This way it works across all browsers.
196195
197- [ TODO: add image here ]
196+ [ browser voices ] ( https://firebasestorage.googleapis.com/v0/b/codedex-io.appspot.com/o/projects%2Fbuild-a-tts-app-with-web-browsers%2Fvoices.png?alt=media&token=fd929bb8-1259-4676-996e-83bb92111c66 )
198197
199198### Step 4: Implement Character Counter
200199
@@ -420,8 +419,6 @@ You're ready to test! Here's how:
4204194 . ** Adjust speed and pitch** to your liking
4214205 . ** Click "Speak"** and listen!
422421
423- [ TODO: add demo video here]
424-
425422You can also [ try out the demo] ( https://goku-kun.github.io/tts-app-codedex-project/completed/ ) .
426423
427424** What to expect:**
@@ -453,25 +450,6 @@ Your app now:
453450- Shows real-time status feedback.
454451- Works entirely client-side with no dependencies.
455452
456- ### Key Concepts You've Learned
457-
458- ** Web Speech API fundamentals:**
459-
460- - Accessing the ` speechSynthesis ` interface
461- - Loading and selecting from available voices
462- - Handling the asynchronous ` voiceschanged ` event
463-
464- ** SpeechSynthesisUtterance:**
465-
466- - Creating utterance objects to represent speech requests
467- - Configuring voice, rate, pitch, and volume
468- - Attaching event handlers for ` onstart ` , ` onend ` , and ` onerror `
469-
470- ** Browser compatibility:**
471-
472- - Why we listen for both immediate load and ` voiceschanged `
473- - How different browsers and operating systems provide different voices
474-
475453### Next Steps
476454
477455Want to take this further? Here are some ideas:
0 commit comments