Vue 语音播报

最新推荐文章于 2025-03-05 15:16:57 发布

一天28小时

最新推荐文章于 2025-03-05 15:16:57 发布

阅读量2.2k

点赞数

本文链接：https://blog.youkuaiyun.com/Programmerwhite/article/details/121230897

版权

vue.js 语音识别前端

这是一个Vue组件示例，展示如何通过点击图标触发文字转语音的功能。代码中使用了百度的TTS服务将文字转化为音频并进行播放，内容为关于某人物实力的描述。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <div>
    <h1>111111111</h1>
    <i @click="reader" class="el-icon-microphone"></i> 
    <div id="group">{{ words }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      words: "二大人精神力达到八十九阶，能够硬扛冰皇近身一掌而不伤，绝对是地狱界诸天之下一等一的人物",
    };
  },
  methods: {
    reader() {
      var url =
        "http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&text=" +
        encodeURI(this.words);
      var n = new Audio(url);
      n.src = url;
      n.play(); //播放阅读
    },
  },
};
</script>

<style>
</style>