Good Morning to one and all present here. Also, let’s use a style rule to hide the warning by default so we can control when it’s actually needed.1.3 Conclusion 3 Minutes Speech on Environment Text-To-Speech Part 1 by Steven Estrella ( CodePen.Īdding a style rule for the disabled state of the button is a good idea to avoid confusion for the few people who still use incompatible browsers, like the now-quaint Internet Explorer. You’re also free to work off the demo I created: Also, note the ID values for the textarea and the button as we will use those in our JavaScript.įeel free to style the HTML any way you’d like. The paragraph with ID warning will be shown only if the JavaScript detects no support for the Web Speech API. Note: For best results on a Mac, use the latest version of Chrome, Safari, or FireFox.
I love the sound of my computer-generated voice. Sorry, your browser does not support the Web Speech API. Let’s create a basic page with a for the text we want the page to speak and include a button to click to trigger the speech.
Screen shot of the completed Polyglot app with a menu of languages. Some of the basic code is derived from documentation found here but the final product adds some fun features and can be viewed at my Polyglot CodePen here. We’re going to walk through a three-step process to create a page that speaks the same text in multiple languages. Chrome loads a set of voices remotely, so if your operating system does not have international voices installed, just use Chrome. For that, Mac OSX and most Windows installations have great support on all browsers. The fun part for me is using this technology with foreign languages. This is still considered an experimental technology but it has great support in the latest versions of Chrome, Safari, and Firefox. We can make our pages on the web talk using the SpeechSynthesis part of the Web Speech API.
Even so, the technology for making websites talk is still pretty new. Since the early days of science fiction, we have fantasized about machines that talk to us.
0 kommentar(er)
