• 技术文章 >web前端 >Vue.js

    步骤详解Vue怎么实现语音播报(附代码)

    藏色散人藏色散人2022-11-14 20:29:02转载332
    vue怎么实现点击按钮后进行语音播报?只要使用这个插件就行!下面就带大家详细了解一下Vue中怎么使用speak-tts插件实现点击按钮后进行语音播报,本文附有详细实例代码哦,希望对需要的朋友大家有所帮助,欢迎学习!

    大前端零基础入门到就业:进入学习

    Vue中使用speak-tts插件实现点击按钮后进行语音播报(TTS/文字转语音)

    场景

    speak-tts插件

    https://www.npmjs.com/package/speak-tts(学习视频分享:vue视频教程

    实现点击按钮触发语音播报,播报指定的文字内容。

    为什么不能实现自动语音播报。

    chrome浏览器在18年4月起,就在桌面浏览器全面禁止了音视频的自动播放功能。

    严格地来说,是Chrome不允许在用户对网页进行触发之前播放音频。

    不光是这样,在页面加载完毕的情况下,用户没有click、dbclick、touch等主动交互行为,

    使用js直接调用.play() 方法的话,chrome都会抛出如下错误:Uncaught (in promise) DOMException;

    实现

    1、参考官方说明安装依赖

    npm install speak-tts

    2、在页面中引入

    import Speech from 'speak-tts'

    3、声明speech对象

      data() {    return {
          speech: null,
        };

    4、页面加载完调用初始化方法

    mounted() {
        this.speechInit();
      },
      methods: {
        speechInit() {
          this.speech = new Speech();
          this.speech.setLanguage("zh-CN");
          this.speech.init().then(() => {});
        },

    5、页面添加按钮

    <el-button type="success" @click="speakTtsSpeech">speak-tts语音播报</el-button>

    6、按钮点击事件中调用播放方法

        speakTtsSpeech() {      this.speech.speak({ text: "公众号:霸道的程序猿" }).then(() => {
            console.log("读取成功");
          });
        },

    7、完整示例代码

    <template>
      <el-button type="success" @click="speakTtsSpeech">speak-tts语音播报</el-button>
    </template>
    <script>
    import Speech from "speak-tts"; // es6
    export default {
      name: "SpeechDemo",
      data() {
        return {
          speech: null,
        };
      },
      mounted() {
        this.speechInit();
      },
      methods: {
        speakTtsSpeech() {
          this.speech.speak({ text: "公众号:霸道的程序猿" }).then(() => {
            console.log("读取成功");
          });
        },
        speechInit() {
          this.speech = new Speech();
          this.speech.setLanguage("zh-CN");
          this.speech.init().then(() => {});
        },
      },
    };
    </script>
    
    <style scoped>
    </style

    以上就是步骤详解Vue怎么实现语音播报(附代码)的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:cnblogs,如有侵犯,请联系admin@php.cn删除

    前端(VUE)零基础到就业课程:点击学习

    清晰的学习路线+老师随时辅导答疑

    自己动手写 PHP MVC 框架:点击学习

    快速了解MVC架构、了解框架底层运行原理

    专题推荐:speak-tts插件 Vue
    上一篇:实例讲解vue如何实现打印小票 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • ❤️‍🔥共22门课程,总价3725元,会员免费学• ❤️‍🔥接口自动化测试不想写代码?• 浅析Vue中父子组件间怎么通信(父传子|子传父)• 一文搞懂vue2 diff算法(附图)• 深入了解Vue中的动态组件• 实例讲解vue如何实现打印小票
    1/1

    PHP中文网