javascript - 如何将 TextToSpeech.talk ("hi' ) 操作添加到按钮

Question

如何添加TextToSpeech.talk("hi");当选择/按下按钮时。

TextToSpeech.talk("Hello Beautiful World!");

当用户点击按钮时，应该生成声音

TTS Github https://github.com/IonicaBizau/text-to-speech-js

import Vue from 'vue'
import App from './App.vue'
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(BootstrapVue)

Vue.config.productionTip = 

new Vue({
  render: h => h(App)
}).$mount('#app')

<template>
  <div id="app">
    <div>
      <b-button-group vertical>
        <button v-on:click="say('hi')">Say hi</button>
        <button v-on:click="say('what')">Say what</button>
      </b-button-group>
    </div>

  </div>
</template>

<script>
  export default {
    data() {
      return {

      }
    }
  }
</script>

<style>

</style>

Answer 1

您的 click 处理程序设置为调用名为 say 的本地方法，该方法采用字符串参数(要说出)。您只需要define that method在您的组件中使用该字符串参数调用 TextToSpeech.talk():

export default {
  // ...
  methods: {
    say(msg) {
      TextToSpeech.talk(msg);
    }
  }
}

但是，您会注意到 TextToSpeech 后端似乎已损坏，如 IonicaBizau/text-to-speech-js Issue #10 中所述。 .

demo of broken lib