vue3.2实现文字转语音播报功能

最新推荐文章于 2024-03-22 17:17:08 发布

A_ugust__

最新推荐文章于 2024-03-22 17:17:08 发布

阅读量435

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_61769998/article/details/129770528

版权

npm i speak-tts

<template>
  <div class="registered_screen">
    <el-button @click="speak">点击播放</el-button>
    <el-button @click="goRegistered">返回</el-button>
  </div>
</template>

<script setup lang="ts">
import Speech from 'speak-tts'
import { ref, onMounted } from 'vue'
import {useRouter} from 'vue-router'
// 语音播放实例
const speech: any = ref(null)
const router = useRouter()

onMounted(() => {
  // 语音播放初始化
  speechInit()
})

//初始化语音播报的一些参数，这个方法要在语音播报之前执行
const speechInit = () => {
  speech.value = Speech;
  console.log(speech.value, 666);
  speech.value.setLanguage('zh-CN');
  speech.value.init()
}
//语音播报
const speak = () => {
  speech.value.speak({ text: "欢迎" })
}

// 返回
const goRegistered = () => {
  router.push('/registered')
}

</script>

<style scoped>
.registered_screen {
  font-size: 14px;
  color: #444;
  padding: 16px;
  /* background-color: #fff; */
  height: 100%;
}
</style>