Web speech API is not referenced

Hi, I am completely new to WIX and JS. Please forgive my ignorance and help me start.

I created the front end of a website without much trouble via WIX IDE. However, when I started to code I encountered the common problem: how to reference an external API and use it.

The task I am trying to do it to make text to speech programmatically. I searched the JS code example and copied them to my project. Here is the code from my Home Page Code.

$w.onReady( function () {
//TODO: write your page related code here…
});

export function buttonDemo_click(event) {
//Add your code for this event here:
var msg = new SpeechSynthesisUtterance();
var voices = window.speechSynthesis.getVoices();
msg.text = “Hello world” ;
msg.lang = ’ en-US ’ ;
speechSynthesis.speak(msg);
}

The moment I added the body of the function to the code, Corvid told me that " SpeechSynthesisUtterance is not defined", “window is not defined” and “speechSynthesis is not defined”. I know this is a reference problem and I should import or declare the related Web speech API objects somewhere first. However, I do not know how JS does it. Can someone kindly help me? I will greatly appreciate it.

Corvid understands all of Javascript, except for anything that accesses the DOM. Accessing document elements such as div, span, button, etc is off-limits. The way to access elements on the page is only through $w.

You can add HTML into your site, however it has to be either through an HtmlComponent (iframe) on your page, a CustomElement or through the use of a new tool in tracking and analytics.

Thank you very much for trying to help me.

I am not adding any non-wix element into my website. Using a regular WIX button with ID of buttonDemo click event, I am trying to do a simple text to speech program.

The problem is Corvid does not know what “window”, " speechSynthesis" and “SpeechSynthesisUtterance” are. The classes are a part of Windows.Media.SpeechSynthesis Namespace from Microsoft.

How should I add the Namespace to my JS file here so that the IDE will recognize the APIs?

“I am not adding any non-wix element into my website.”
Yes, you are. The SpeechSynthesisUtterance() is non-wix, so not allowed. Take Yisrael´s advice, and use the html-component.

Hi Giri,

Thank you for your reply. When I mentioned the " element ", I meant a GUI component such buttons, gauges, datagrids, check boxes… What I am adding is the code to access a java class like SpeechSynthesis(). I do not call the class as an element. The class itself is not from WIX. It is from Microsoft or W3C.

I assume the Jave script inside WIX IDE will allow user to access the third party Java class objects. Otherwise, the functionalities will be very limited.

In this case do you know any particular WIX API that can convert a text string into a speech played by the whatever OS and a speaker in a computer/phone that the website may be resided? If you do I would appreciate the specific info of the API.

Hi Yisrael,

After searching more about the SpeechSynthesis, I found a post
https:// www.hongkiat. com/blog/text-to-speech/

that created three buttons by HTML then find if the UA supports the SpeechSynthesis interface. If it does support, we may use the SpeechSynthesis object in the Java code.

Well, I am encountering two difficulties to implement the solution.

The question #1
How to add HTML code into my web page. The link you gave me for add HTML code was to click + in the left side of the WIX Editor then ->APP then ->HTML. Now the WIX IDE no long have “APP” in the list of the elements from the + . So I cannot do it anymore.

I tried the second way of
https://support.wix. com/en/article/ wix-editor-using-iframes-to-display-visible-content-on-your-site that you recommended. It states:

Adding HTML Content

  1. Click Add on the left side of the Editor.

  2. Click More .

  3. Click Embeds .

  4. Click HTML iframe , or drag it to the relevant location on your page.

  5. Click Enter Code .

  6. Enter the HTTPS code.
    Well, the Now the WIX IDE no long have “More” in the list of the elements from the + either.

How should I insert a HTML code now?

The question #2
I use if ( ‘speechSynthesis’ in window) in the Java Script code for the web page I am designing to see the speechSynthesis class is supported . However, WIX IDE immediately indicated that “‘window’ is not defined” .

How should I solve this problem?

I will repeat…

Corvid understands all of Javascript, except for anything that accesses the DOM - and that includes window . Accessing document elements such as div, span, button, etc is off-limits. The way to access elements on the page is only through $w.

The message “window is not defined” means exactly that - window is not defined . It is not available in Corvid. You might want to consider using the Custom Element .

You might want to check out the various speech NPM libraries available, There aren’t any currently installed in the Package Manager , but you can review the available packages, decide which one best suits your needs and request that it be installed in the Package Manager :

Hi Yisrael,

I did not expect you could work on weekend and gave the prompt response to my question. I really appreciate your professional attitude and sincerity to help new comers.

Out of the three options you offered (HTML, Custom Elements, and Pack Manger), the Pack Manger looks like the easiest to implement to me.

Especially, The Google-Cloud/text-to-speech version 1.1.3 is already “available” (I believe it means accessible for WIX users) from 08/19/2019.

Now the problem is how to access the package to my Corvid Java code.

I tried to copy the following import statement into my WIX JS code:

// Imports the Google Cloud client library
import com.google.cloud.texttospeech.v1…

As expected, Corvid does not accept “com” from the import statements. So I cannot import the class library.

How do I get around this problem and actually use the package? When WIX approved the Google-Cloud/text-to-speech version 1.1.3 as the acceptable package, is there any document available for how to implement from Corvid?

Thank you very much again in advance.

You can see how to use an installed npm on the same page that Yisrael already linked under the ‘Using an Installed Package’ section, along with an detect image label example that you can see npm being used with it.

You woulf need to have the third parties documentation for using their own npm and it would show you there how to add it.

https://www.npmjs.com/package/@google-cloud/text-to-speech

You might get an error if you use require if this known issue hasn’t been sorted, however it should work fine if require is underlined and marked as an error.

Hello Yisrael,

I need to use WIX Pack Manger to implement Google-Cloud/text-to-speech version 1.1.3 that was available on 08/19/2019.

How should I start?

I would appreciate your help on the Pack Manger.

The NPM libraries are not part of the Corvid product so Wix is unable to provide support. You will have to refer to the documentation of the package that you choose to use.

Here are couple of examples that demonstrate using NPM libraries:

Save Data to a Google Sheet Using NPM
Use the Google APIs Node.js Client package included in the Wix Package Manager to access a Google Sheet .

Send Email with SendGrid NPM Interface
Send an email using the SendGrid NPM library.

See the article on the Package Manager , for more information.

Thank you very much Yisrael. I will check your examples out. Your kind help is highly appreciated.

Sorry Yisrael,

Your reply here yesterday that contains the links to the two of your sample projects for NPM are now disappeared. Since I did not copy the links down I cannot access the projects anymore. Can you repost your reply with the links?

Thanks.

Never mind. I searched and found the example.

Hi there, do you guys got any output of the above post? I am look for the same. Please let me know.

Thanks in advavance