What is the proper method for utilizing the finished callback function in NativeScript TextToSpeech?

Is there a way to sequence nativescript text-to-speech messages and use a callback function?

How can the finished callback function be utilized?

The SpeakOptions in nativescript-texttospeech include a finishedCallback property.

I want the TTS to read texts sequentially, that's all.

talk("First message");
talk("Second message");
talk("Last message");

<template>
  <Page>
    <ActionBar title="Speak Promises Component" />
    <StackLayout>
      <Label :text="speakoptions.text" col="0" row="0" />
      <Button text="start" @tap="start" />
    </StackLayout>
  </Page>
</template>

<script >
import {  TNSTextToSpeech,  SpeakOptions as speakoptions } from "nativescript-texttospeech";
let TTS = new TNSTextToSpeech();

export default {
  data() {
    return {
      speakoptions: {
        text: " ",
        locale: "en-GB",
        finishedCallback: "" // what kind of function it should be?
      }
    };
  },
  methods: {
    start: async function() {
      await this.talk("First message");
      await this.talk("Second message");
      await this.talk("Last message");
    },
    talk: function(message) {
      this.speakoptions.text = message;
      return TTS.speak(this.speakoptions);
    }
  }
};
</script>

<style scoped >
</style>


https://codesandbox.io/s/vue-template-1es32?fontsize=14&hidenavigation=1&module=%2Fsrc%2FApp.vue&theme=dark&view=editor

Answer №1

Consider creating your own custom promise for a solution

speakMessage: function(message) {
  var speakConfig = { ...this.speakoptions, text: message };
  return new Promise((resolve, reject) => {
     speakConfig.finishedCallback = resolve;
     TTS.speak(speakConfig)
  });
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Trouble with the Sendhub API

I'm currently working with the sendhub API and encountering an error. The error message states that the specified format 'application/x-www-form-urlencoded' does not have a deserialization method available. It is recommended to double-check ...

Is it possible for the controller of a modal window to have access to functions within the parent controller

If you were to launch a modal window using $modal.open from an angular directive, would the modal window be able to access functions defined within the parent directive? Below is the code for the directive controller: function parentFunction() { re ...

The function this.$set is failing to update an array in VueJS

I am facing an issue where the console log shows me the updated array xyz, but when I try to print it in the DOM using {{xyz}}, it does not update. Can anyone shed some light on why this might be happening? data() { return { xyz: [] } }, met ...

Setting up Nginx and Vue.js 3 to work seamlessly with base URLs and public paths

I am currently working on a VueJS app with history mode enabled. The website URL is example.com and the base URL of my app is configured as my-app. Everything works fine when accessing the app through example.com/my-app and navigating between pages. Howeve ...

In AngularJS, be sure to remove any previous growls before displaying a new one

Working on growl.info() using angularjs and have a query. How can I check if there is already a growl displayed on the screen before adding a new one? The requirement is that when a new growl is triggered, the previous one should be removed from the view. ...

Adding a div element to a React component with the help of React hooks

I'm currently diving into the world of React and experimenting with creating a todo app to enhance my understanding of React concepts. Here's the scenario I'm trying to implement: The user triggers an event by clicking a button A prompt app ...

My ng-view html is unexpectedly displaying as plain string. What steps should I take to resolve this issue?

Why is my ng-view HTML displaying as plain text? How can I resolve this issue? I have encountered an error, here is the screenshot for reference: Unfortunately, I am unable to upload images at the moment. ...

Convert JSON objects within an array into HTML format

Is there a way to reformat an array of JSON objects that has the following structure? [{"amount":3,"name":"Coca-Cola"},{"amount":3,"name":"Rib Eye"}] The desired output in plain HTML text would be: 3 - Coca-Cola 3 - Rib Eye What is the best approach to ...

Implementing external JavaScript files such as Bootstrap and jQuery into a ReactJS application

Just diving into ReactJs, I've got static files like bootstrap.min.js, jquery.min.js, and more in my assets folder. Trying to incorporate them into my ReactJs App but running into issues. Added the code below to my index.html file, however it's ...

Creating a basic bar graph using d3.js with an array of input data

In my dataset, I have an array of form data that includes items like 'Male', 'Female', 'Prefer Not To Say'. I want to create a simple bar chart generator using D3.js that can display the percentages or counts of each item in t ...

Issues with Parameters in JavaScript Functions

I have been researching online and every website I visit suggests that a function would take a parameter if declared, but for some reason it's not working in my case. It works fine like this: <script type='text/javascript'> function ...

Order of execution for Angular 2 components

import { Component, OnInit } from '@angular/core'; import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms'; import {Router, ActivatedRoute, Params} from '@angular/router'; import { Country } from &ap ...

Is there a way to prevent my token from being exposed when making an AJAX call?

When working on my HTML file, I encountered an issue with a Python Django URL integration where I need to pass a token to retrieve certain information. However, the problem is that my token is exposed when inspecting the page source in the HTML document. ...

Performing a swap of array elements using destructuring assignment has proven to be ineffective

Exploring the concept of array manipulation in JavaScript brings us to an interesting scenario. Consider the array 'a' and the desire to swap the values of a[i] and a[a[i]] using destructuring assignment. Surprisingly, the code snippet intended f ...

How to deactivate choices in v-autocomplete

Is there a way to deactivate certain options in v-autocomplete? I tried using the item-disabled attribute and passing the string value of the option, but it didn't work as expected. <v-autocomplete :items="states" item-text="name" labe ...

How can we ensure that the previous selection is cleared in jQgrid only if the checkbox is not clicked

I've set up a grid with the option for multiselect: true so that I can delete multiple rows at once. When the onSelectRow event is triggered, data related to the ID is loaded and shown to the user. Everything seems to be working fine in this example ...

Algorithm-driven dot selector

We are currently utilizing ReactJS and MaterialUI for our frontend development. We are facing a challenge with a specific component, unsure of whether it should be a slider (https://material-ui.com/components/slider/), stepper (https://material-ui.com/comp ...

Dynamically enhance the JSON root with additional value

Oh dear, I'm feeling quite perplexed right now. I created a JSON element in the following way: var planet = {"continent": []}; planet.continent.push({name: "Asia", flag: "yes", countries: []}); planet.continent[0].countries.push({name: "Japan", capi ...

Guide on utilizing the "window" attribute within Angular framework

Recently, I came across a neat "Scroll back to top" button that caught my eye: https://www.w3schools.com/howto/howto_js_scroll_to_top.asp Despite being new to Angular, I wanted to give it a try and implement this feature myself. However, every attempt I ...

What is the most effective way to send a list of objects to a Controller

https://i.stack.imgur.com/oyi5v.png This form is for billing purposes. You can add the item name, quantity, and price multiple times to calculate the total amount. Once you click on submit, all the included items along with other parameters like bill nu ...