Text To Speech & Synthesis App - JavaScript & Web Speech API

In this video we will build a text synthesis application using vanilla JavaScript and the web speech API. We will also use Bootstrap 4 to create the UI.

Sponsor:

Code For This Project:

App Demo:

💖 Become a Patron: Show support & get perks!

Website & Udemy Courses

Follow Traversy Media:

More About The Web Speech API:

[braydoncoyer]

Brad, thanks to your videos and Udemy course, I landed my first web developer job. Thank you so much for all you do! I literally owe my career to you! Can we get this comment up to the top so Brad can see this?

[burhankalu]

As long as we appreciate you Brad you will be a living legend your just a rare gem.

[TraversyMedia]

Lol at 3:24 i forget my left and rights 😂 just noticed that now. Also, just to let you guys know, the JS starts around 13 mins in

[hamzajirah]

Brad is easily one of the best Tutors.

[vikasni]

Brad is not just a human being but a god gift to billions of young programmer... Love u Brad from india🇮🇳😊..

[jdubhman]

This is a great tool, copy and paste in news articles and have them read aloud!
Thank you so much for all of your tutorials! 🙏

[LordDewi]

Holy Crap! This is great!! So helpful, even 3 years later. Not sure where you got the voices but it still works, for free. I had to use WinMerge to see where I screwed up because I didn't want to just "borrow" the script so I typed everything out and messed up. The only problem I have is, in 2021, is that in Firefox and Brave, . Chrome based, it only has Microsoft voices. If I open Chrome it shows all the voices though. Not sure what's going on there. I even tried it with the downloaded code with the same results. At least there were voices but I wanted more options. Thanks for the info and code and tutorial.

[PavonDunbar]

I'm in between jobs man but I found a new gig and I start next week. When I get my bills caught up I need to shoot you a donation or something soon to show my appreciation, Brad!

[Flamewheel]

I once again am on a coding adventure and I find your tutorial with the answer. Thank you good sir

[ahmedthebest]

I downloaded your project and run it with a live server
but my voices list was empty and I have this error:
TypeError: Cannot read property 'getAttribute' of undefined
main.js:85

[sarthaknikhal]

Brad: "This video is sponsored by Dev Mountain. They will teach everything great like in a bootcamp

(proceeds to teach all the cool web dev content by giving good tutorials for free and better than most bootcamps)

[jegedeayodeji]

I envy the way you analyze and write your codes!!
Much love ❤️ and thank you.

[brunoaustin]

Hey Brad. You're tutorials are exceptional. Thanks for doing this

[UstadJi]

Brad Dear I Have No Words To Say Thank You To You. You Are A Saviour

[lonniebest]

Another timely video. Keep them coming Brad. I enjoy all your hard work!

[CynthiaSotoCaballerolYEAHl]

Bootstrap migration for classes:

custom-range --> form-range
form-group --> mb-3
float-right --> float-end
btn-block --> w-100
badge-primary --> bg-primary

[trulymittal]

hey brad, while watching just only 52 seconds of video, i noticed one thing which makes this video stand out, that today the lightening on your face is perfect and i can see you as well 😀. As for the video, i already know that the content will be as good as always, i have no doubts abt the content, keep the good work. hav a good day

[VickyJayOx]

5 years ago and the code is still valid

[combinio]

Amazing video Brad, as always! ;) anyway, the thing is: the more advanced app I make, the more problem I get with organizing my code. Perhaps You would explain what are the rules to keep code clean, how to organize it, bring up some basic rules You restrict and so on. I know there are many books on the market, but everyone wants You to teach us, not the books ;P
building small apps is easy, but maintaing and developing big ones is not.

[juiceboxhro]

thank you for this! it was more fun than i was expecting; i refactored it to work in Vue after watching your Vue and Vuex crash courses 😁