How To Make Text To Voice Converter Using JavaScript | Text To Speech Generator
ฝัง
- เผยแพร่เมื่อ 12 ก.ย. 2024
- JavaScript project to Build Text to Voice generator using HTML, CSS and JavaScript Step by step tutorial for beginners
❤️ SUBSCRIBE: @GreatStackDev
👉 Download 30 JavaScript projects Source Code (Including Text to voice converter):
greatstack.dev...
In this video we will learn to make a Text to speech converter or Text to voice generator app using HTML CSS and JavaScript. We will also add feature to change the voice. We can generate the speech in different voices.
This is best JavaScript project for college student or job portfolio.
Download Images: greatstack.dev...
#JavaScriptProject #JavaScript #WebDevelopment #GreatStack
-----------------------------------------
Suggested Course:
❤️ Complete website Using HTML and CSS
✔️ 8 Complete website step by step
✔️ Source Code Download
✔️ 76 Lectures, 12 Hours Video
✔️ Course Completion certificate
👉 greatstack.dev...
-------------------------------------
Recommended Videos:
Learn Complete HTML and CSS from basics:
► • HTML And CSS Tutorial ...
Make A Complete Website for college using HTML & CSS:
► • How To Make A College ...
How to make a Business website step by step:
► • How To Make Website Us...
How to make personal resume website step by step:
► • How To Make A Website ...
How to make fitness website design using HTML CSS:
► • How To Make A Website ...
How to make an Ecommerce Website Design:
► • How To Make eCommerce ...
How to make a Job Portal website design with HTML & CSS:
► • How To Make Website Us...
How to make travel website design with HTML CSS Bootstrap:
► • How To Make A Website ...
-------------------------------------
◼️ Source code link is shared in community post for all my coding videos exclusively for channel members (only channel members can see)
Join Channel Membership:
► / @greatstackdev
-------------------------------------
Connect with me:
👉 linktr.ee/iama...
Connect with GreatStack:
Instagram: / greatstackdev
Twitter: / greatstackdev
Facebook: / greatstack
Although your tutorials are simple, its your presentation and GUI that stands out
you should also explain your js code
yes that's why we all are here
Bilkul
Thank you, sir. I am watching this video since I am working on your 30-day javascript projects challenge. Next, I request you add functionality where we can download the audio file.
Thanks, Avinash
is it possible ??
@rishabhinc2936 yeah. It just needs someone who understands more of Javascript
Great tutorial, but you should try to explain your code a lot more. I love the playlist but you don’t explain a lot of your code. ChatGPT’s been a co-teacher for me since I started learning with your channel. Grateful for all you do still. ❤
js code with Explanation
let speech = new SpeechSynthesisUtterance() //This line creates a new instance of the SpeechSynthesisUtterance object, which represents the text that will be spoken.
let voices = []; //This line initializes an empty array called voices where the available voices will be stored.
let voiceSelect = document.querySelector("select"); //This line selects the element from the HTML document, presumably used for selecting different voices.
window.speechSynthesis.onvoiceschanged = () =>{ //is an event that fires when the list of available voices has been updated. The assigned arrow function is a callback that executes when this event occurs.
voices = window.speechSynthesis.getVoices(); //This line retrieves the available voices using the getVoices() method and assigns them to the voices array.
speech.voice = voices[0]; //This sets the voice property of the SpeechSynthesisUtterance object (speech) to the first voice in the voices array
voices.forEach((voice, i) => (voiceSelect.options[i] = new Option(voice.name, i))); //This loop iterates over the voices array and populates the element (voiceSelect) with options representing different voices. It creates a new Option object for each voice and assigns the voice's name as the option text and the index i as the option value.
};
voiceSelect.addEventListener("change" , () =>{
speech.voice = voices[voiceSelect.value] //sets the voice property of the SpeechSynthesisUtterance object (speech) to the selected voice, allowing the user to choose a specific voice from the dropdown menu.
});
document.querySelector("button").addEventListener("click", () =>{ //select button and when we click
speech.text = document.querySelector("textarea").value; //take value from textarea and assign to st
window.speechSynthesis.speak(speech); //using speak method we listen our speech
});
Am using mobile phone t Android to code I don't think I will work , I have designed it but the JavaScript did not work
Sir am using mobile phone android to code , I have designed it but the JavaScript did not work , I don't think Mobile it will work with mobile phones
@@WEBSITEINTEGRATOR I don't have idea it's working on mobile or not
thank you for this ❤
Thank you so much for this . Your life saver
Hi Sir; thank-you for the hard work you are doing, we are do grateful.
I would like to ask something, I don't get more voices in dropdown box, it's empty, the text only read in one default voice... Do you perapse know what could be the reason? Thank you
Yeah same problem
Same
Are guys on wimdow or using widows device?
Hi teacher, on each browser there is a different operation for example in Chroome and Edge it works fine, in Opera there are few options and in firefox it doesn't work at all, we don't even come up with options when you click on the select.
same issue here
same. Using FF I see no option dropping down
same issue here
I had the same issue and searched about it, after adding setTimeout it works but select options are less than chrome select options :/
@@fatemehasgharzadeh618can u share the code brother
too much good project for beginner to expert level
Awesome awesome.....bring more and more projects like this.
Thank you sir! please is their any setting make to the chrome before running js code because is not all the js code it execuiting pls i want know
thank you so much sir
Bro I always like watching your videos I really want But not everything is understood by watching TH-cam videos Sometimes help is not available I start over Let's start by watching w3 school Let's start with html The most important thing is that if I run into any problem, please tell me how to get your help the end your younger brother
damn , that is cool thank you for the toturial
i learn many from this tutorial thanks....
Super ,Thank you sow much
Hello, great tutorial as usual ! Halfway through it, I have a question : the class 'hero' has a display flex center center, why then the class 'row' is on the left at 7:38min? When I do it it is in the center as I thought it would be. Anyway thank you for all your amazing and clear cut tutorials.
Justify content justifies the whole content.. if you wanna align that class row to dead center, put justify content to it as well.. or use text align or margin: 0 auto;.. also you can add display: grid; to the class row then place-items: center;
Hey, thanks for making this short project. I hate to say this but the website is responsive... I've followed your code.
Thank you!
Thank You so much Its really very helpfull to learn Bro
How to add voice record and download functionality In the same project.
Good question I need ❤
This an awesome tutorial video.
Please instruct me how to write Javascript codes to set the Vietnamese voice language that contains "vi-VN" string?
Thank you.
thanku , its easily understanding code from u
Well done 🥰👍👍❤️💕👍👍❤️💕👍👍❤️💕👍👍❤️💕👍
this channel is the best
Tqsmmmmmm❤
Glad you liked it. Thanks for your comment. 😊
@@GreatStackDev need more videos sir ♥️🤌
Awesome keep it up
Wow 😮😮😮
Thank you for awesome content
it is possible to change the language of a video
great stuff man
Please create a way the voice generated can be downloaded
How to add voices? Do i have to download voices? And from where?
Thank you so much. You explain it really well and keep it simple!
sir mera language selector ka dropdown ni araha different language ka
This is Text 2 voice. Is similar project possible for Voice 2 text. If yes, please provide
How to add voices in my system. by default i have only one voice cover in my system. Any idea ? thanks in advance
Beautiful...and amazing..but
My editor have this ...
ReferenceError: "speechSynthesissUtterance() undefined ", what can i do...assign a value?
Well done
just typing code without explaining it ? chat gpt teaches better than this
Very nice
Bro can i download converted voice??
nice
can we save this voice in library | Add download button
Yes..That’s the question that I want to ask too❤ thanks
Brilliant
Nice one
Great explanation with vivid codes but sir I need the codes so where can I find them?
my select option is not coming ..can plz anybody help me?
Magnífico, gracias por compartir.
thank so much
How to make speech downloadable sir
You are amazing
how can i add a download button and download the audio from this?// help please
Thanks very much, how do download the voice after converted
Can u please provide me a source code for download mp3 button to download the speech??
Pls sir where can I download the image button
Its in the description
Please tell me How add select inside different voices
How to add voices in the device
How can we save the audio to our PC after conversion???
Hindi voice kese aayegi please batao
How to download this in mp3
Voice are not coming in select.what is reason?🙏🙏🙏🙏🙏
can we make it so it also downloads the audio into a mp3 file?
After clicking on select i.e, dropdown box, voices box is not showing please help me
This javascript code is not working. please guide and advise. thanks
how can i add more voices in my website?
Wow
Hello sir, you have Make Text To Voice Converter Using JavaScript everything is all good and great work but how can i download that voice we have entered in the area box. please solve this then i have purchase this 100% sure. i am waiting for the reply sir.
The voices are not getting selected on mobile, help me please ?
Hello your video is so good but please make a video how to download that speech after changed
For me Why JavaScript is not working..??😢😢
Hey me too
After clicking listen button voice is not audible
How to fix this
Pls where can I see the play button and pause button
I would like to ask something, I don't get more voices in dropdown box, it's empty, the text only read in one default voice... Do you perapse know what could be the reason? Thank you
3
Reply
Same here
I have one question. Is better to know php or html?
Html
sir please tell me any javascript book (not beginners book)
I live in india
I am getting only 3 voice options
Plz add some commas,fullstop ,tables
Please oo can mobile phones code this particular project, i tried the JavaScript did not work
I had qn error that says "Can't find variable: speachSynthesisUtterance"
Will it work on Chrome browser because I built the same project It works well on brave and fire fox browsers but not on Chrome.
I think Chrome is angry with chat gpt 😂
the voice function isnt working in my code
😊❤️
Thank you it work 🥰
how can i run it on my website without using localhost
Please where we can download the audio file 😮
Hello, i want to download the generated text to speech. how to do that? It is great that visitors can download the audio too...
is it possible to download ???
Hello bro mere me keval microsoft ka hi 6-7 language hai baki kha se laye ho please help me brother ❤❤❤❤
Will this code work in Android
Will it read table
Please one project on TH-cam video downloader
Not working. I get this message in Visual Studio Code: 'name' is deprecated.ts(6385)
lib.dom.d.ts(27433, 5): The declaration was marked as deprecated here.
const name: void
how can i add download feature in this
mera 4 lines read krny k baad voice bnd hojata aagy ka content read ee nhi krta
When I was doing that same my code editor says Synthesis utterance is undefined??.. please solve my problem
Same with me here
Sir react js ke project lao please ❤
I dont know why my java script file is not working
check same JS code in the browser console
hello sir, please share the images link also....in our few video you don't share images ,.......why you don't share images links
He shares the images links in the description
bro where is javascript source code
It's in the description.
Download ka bhi bta dete sir
Sir how to add download button code❤❤
hello sir i could find the images link file