React JS app: How do I load new TTS voices? - node.js

I’m building an app with the React JS library, using Electron and Node JS to package it as a Windows .exe
I used the “speak-tts” module to integrate speech synthesis. Everything seems to be pretty straightforward, but I can’t figure out how to load additional voices. I can only get the default voice.
Has anyone else come across this issue? Your advice is much appreciated.

I'm the creator of the speak-tts module. As you can see in the documentation (https://www.npmjs.com/package/speak-tts) there is a setVoice() method that you can call on your instance to change the voice on the fly.
You can get the list of available voices in the browser from the onvoiceschanged listener. Also there might be specific issues with Electron and this package that I'm not aware of.
If so do not hesitate to create a github issue (https://github.com/tom-s/speak-tts/issues).

Easiest way to do is use plain JS methods
For reference.
https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis/cancel
It has all the required methods. cancel(), start(), pause() etc

Related

Single executable for React App and Express API

I have a React App and a Express API. I want to package those two components into one single executable. Is there a way to do this? I don’t want a solution to my problem I want a hint into the right direction if this is possible.
I believe what you mean is not to keep the bundler running as well as the express server, unfortunately that's not possible if you're in developer mode (and) you're expecting realtime updates in your browser, but if you were in production, then it's not even the case that you need to run your bundler, cause your main.bundle.js is already built and ready.
I think this is what you are looking for. https://electronjs.org/
Electron or similar libraries help you to create an executable application which can be installed an run like a desktop application.
The only point you have to keep in mind is for accessing the database you will have to create a REST API and communicate via that.
Link for a simple tutorial.

Using nodejs in the browser?

Following my first question, I realized that the reason I couldn't get anything to work was that I was trying to use the require() method in the browser. In learning that this is not how Node works, I was confused. I understand now that Node is only a run-time environment that allows the use of JavaScript within the console. However, I'm still left with the question of how to achieve the functions of Node within the browser. (i.e. creating a button in the browser that creates a file using Node.) I've installed Browserify but I cannot find a good tutorial on how to use it. I'm very new to Computer Science so please forgive me for the redundant questions. Thanks a lot.
Things do change. Apparently it will be possible to use node.js in the browser soon. You might be interested in this: Run Node.js in the browser
Node as you made the point is server-side runtime environment for js and the browser is client-side. Node.js has many useful built-in functionalities and they are not accessible in browser.
I recommend you to take a look how backend and frontend differs and how do they communicate with themselves. Then I think you will understand how to achieve creating a file by clicking a button in the browser.
Sorry I don't know anything about browserify but it would be better to learn node in cli.

Is there a good React Native module for playing/streaming audios?

I'm new to react native and building an audio streaming app. I found quite a few react native wrappers for native modules for playing audio files https://js.coach/react-native/react-native-ios-audio?search=audio
But none of them seem sufficient. I'm looking for a module that would
allow playing in the background and handle interruptions
have play-speed control
allow both streaming and local file playing
Does such a module exist? Any tips would be much appreciated. Thanks!
If your intention is to use the features you mentioned in a cross-platform (android/ios) app, then you do have some options, but there isn't a single module that will cover each of those bases.
Right now, I'm using a few different modules to accomplish similar functionality to what you're looking for:
react-native-audio-streaming to stream audio from a remote URL.
react-native-sound to play local audio files.
react-native-audio-streamer to stream audio from a remote URL on Android, since it uses ExoPlayer, instead of the AACDecoder used by react-native-audio-streaming.
Support for loading sound over the network was recently added to react-native-sound for iOS, and someone has mentioned the possibility of implementing it on Android as well. If this happens, then it may be the best choice for your use case.
I've included the current react-native-sound feature set below. Hope this helps!
Try Following Modules.
react-native-audio-streaming
react-native-audio-streamer

Basic use of server side API and passing server side variable to client side

I've just started my IT degree and I'm a beginner to the use of APIs (and forums like this) so I am truly sorry if my question is to vaguely explained or if it is just plain stupid :), on top of that I'm not a native English speaker :P. Okay, so I'm trying to use Google trends' api which I installed in my server with putty by using sudo npm install google-trends-api. (it can be found here https://www.npmjs.com/package/google-trends-api#installation) As I undestand it, this is a server side api so the scripts that I write with the methods provided for this api will not run on an explorer as normal js files do. There is an example that makes use of the API that I found on the page which is as follows
var googleTrends = requite('google-trends-api');
googleTrends.hotTrends('US')
.then(function(results){
console.log(results);
})
.catch(function(err){
console.log(err);
});
this outputs a list of 20 items on the console when I use it on node.
I would like to know if there is a way to assign those results to a variable and then use that variable in a normal javascript script inside a html file. I do not know anything about node.js and the like, and I would like to actually do some research instead of asking here but I was going to use a different approach to acquire such information but now I've had to change my plans and do not have enough time and given I consider this is a fairly easy problem to resolve (maybe?) I would really appreciate it if someone could walk me through the basics of each step. THanks :) and have a nice day.
Your question is quite broad. Node.js is Chrome's V8 engine bundled with some libraries to do I/O and networking. This enables us to JavaScript outside of the browser and to create backend services or servers in general (in your case). I hope that you are aware of this difference :)
The first thing that you have to do, is to have a look at express.js and to create a simple server. It will not be more than 20 lines of code. Then you have to enrich this with more stuff like a template engine (handlebars.js, jade etc). You have to enable the server to serve static files that will be finally your js, css and image files. Creating this simple server you will be able to serve simple html page in the first place. On top of that you should have the client side javascript that you have to write and now you can use the module above. Unfortunately, you are not able to use this module directly on a javascript file that you will write. To be able to use this module you have to transcompile this thing into javascript that browser understand*. Remember that browser does not understand the require statement and some old browsers possibly will have issues with the promises that this module is using. These are the things that should be compiled. You have to use a tool like browserify for this and the compiled file that this will extract it must be included in the scripts of your html page.
Maybe there are quite a lot of concepts that you are not aware of or you don't understand them but spend a bit of time to understand them.
P.S.: I' ve replied under the assumption that google-trends-api module does not use things that are specific to node.js like the file-system for example.

Building one page apps with angularjs and sails.js backend

I just found out about sails.js and i think it's really awesome. I want to build apps with sails and angular, but i haven't found any guides on doing this. I found this site which is supposed to have a talk on using sails.js instead on express in the mean stack, but there's not video there.
I would be glad for links to videos or blog posts on how to do this.
Thanks all.
This is getting downvoted because its not a direct question about code.
I have a boilerplate sailsjs app that you can use to model your own off of..
https://github.com/mikedevita/sailsjs-v10-angularjs-requirejs-boilerplate
This is based on v0.10 which is in beta right now, but the same concept applies.
I've created a simple yet powerful angular service, published as a bower component: https://github.com/diegopamio/angular-sails-bind
It basically:
Creates the model inside the $scope for you.
Retrieves the model data from the backend using socket.
Watches for changes made by the user in the UI and updates the backend immediately.
Watches for changes made in the backend and updates the UI immediately.
And it does it with just one line of code in your angular app, like this: $sailsBind("", $scope);
I made it as part of a personal project and then I decided to publish it as it could benefit others. It works with sails 0.10. Let me know if it suits your needs or if you'd like to see something else on it.

Resources