no browser support ?

[Tucsky]

First of all thank you for this great tts lib it's one the best (free) I've seen so far 👍🏼

I'm trying to use it from the browser but it does not work.

setMetadata want to create a websocket instance (initClient) and try to access a "client" method which does not exist :/

I have no issue from nodejs. I didn't saw this was a nodejs only package in the doc, just want to make sure it is before moving on

[Migushthe2nd]

The module was built for NodeJS. I'll have to check if a browser support is even possible (because of CORS), but don't expect that to happen anytime soon.

[Tucsky]

@Migushthe2nd Thanks for the quick answer! I'm not sure either
I looked at your code, the voice endpoint work fine from the browser, the websocket I've not been able to open a connection yet

Then I found this https://github.com/Azure-Samples/cognitive-services-speech-sdk/tree/master/quickstart/javascript/browser/text-to-speech so I guess it's possible

Did you shared your subscription token in the repo ? I've been using it for 2 days doing multiple tts/min lol
Anyway I'm going to try this quickstart and get my own subscription token as well :)

[Migushthe2nd]

The token in the repo is the one Microsoft Edge uses internally. I have never actually tried using it with the official TTS tools, so maybe the token is all you need for unlimited TTS requests. Could you perhaps try that?

…

________________________________ From: Tucsky ***@***.***> Sent: Saturday, July 23, 2022 1:14:49 AM To: Migushthe2nd/MsEdgeTTS ***@***.***> Cc: Migush ***@***.***>; Mention ***@***.***> Subject: Re: [Migushthe2nd/MsEdgeTTS] no browser support ? (Issue #4) @Migushthe2nd<https://github.com/Migushthe2nd> Thanks for the quick answer! I'm not sure either I looked at your code, the voice endpoint work fine from the browser, the websocket I've not been able to open a connection yet Then I found this https://github.com/Azure-Samples/cognitive-services-speech-sdk/tree/master/quickstart/javascript/browser/text-to-speech so I guess it's possible Did you shared your subscription token in the repo ? I've been using it for 2 days doing multiple tts/min lol Anyway I'm going to try this quickstart and get my own subscription token as well :) — Reply to this email directly, view it on GitHub<#4 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AFJ6FG6VUI7QRB4LXV34C5DVVMTOTANCNFSM54MVWVZQ>. You are receiving this because you were mentioned.Message ID: ***@***.***>

[Migushthe2nd]

I would assume you can't simply use the token. You'll probably also have to use the specific endpoints Edge uses (and this module as well)

[Migushthe2nd]

Published a new version which uses the ws library thanks to @guquan-lengyue. Could you try the newest version?

[yacine-bens]

Thank you for the library. It works great on Nodejs.
I am trying to use it in a browser extension with the latest version but I'm facing the same issue. The npm page of the ws library says "Note: This module does not work in the browser.".

[Migushthe2nd]

Thanks for the notice! I've published 1.3.3, which uses the isomorphic-ws library instead of just ws, as instructed in their README. Please let me know if it now works for you or you run into other issues :)

[yacine-bens]

Thanks for your reply. I noticed that they mentioned isomorphic-ws so I tried it and it didn't work. It is mentioned that it has some limitations like the "options" argument in the constructor, so I tried a constructor with only one argument (MsEdgeTTS.SYNTH_URL) and it didn't work.
I tried to use the native browser WebSocket and changed event functions respectively:

Then I got the error message: "Uncaught TypeError: Cannot read properties of null (reading '1')" in the "onmessage" function, so I changed "message" element to "m.data":

Apparently this is not the right fix as I'm still getting the error, along with another that says "process is not defined"

[yacine-bens]

The "process is not defined" error has to do with Webpack 5 which is unrelated to this library. And the other issue is that the WebSocket browser library is different from Nodejs, so I would have to edit the functions to be able to read ws data on the browser. I'll post the final result when I come up with a fully functional version :)

[yacine-bens]

After hours of testing, finally I have a functional version that works on both Nodejs and the Browser. Now the challenge is make the least possible changes to your code. First I'd like to address why isomorphic-ws isn't working on the browser, and the reason is the difference between ES6 and CommonJS exports, and apparently the author doesn't intend to change this. To fix it, we can simply apply two changes:

• in tsconfig.js: set esModuleInterop to true
• in MsEdgeTTS.ts: remove the curly brackets in the 3rd line import WebSocket from "isomorphic-ws";

Since ws and the native WebSocket are not fully compatible, some other changes are required, I'll post them in a new PR request.

In case anyone is using this lib with Webpack 5, here are the minimum required changes to apply to webpack.config.js:

• install the following packages: npm i stream-browserify buffer crypto-browserify process
• add resolve.fallback and plugins as in the image below
• make sure to require webpack at the top of the file: const webpack = require('webpack');
  

[Migushthe2nd]

@yacine-bens can you confirm the latest version works in the browser expected?

[yacine-bens]

Sorry for the late response. Yes, it's working perfectly. I made a simple Chrome extension using it.
https://github.com/yacine-bens/MsEdgeTTS-chrome-extension