便利贴--1{js文字转语音}

轻动琴弦

已于 2022-01-19 17:02:19 修改

阅读量1.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： js html5 文章标签： javascript 语音识别前端

于 2022-01-07 13:51:27 首次发布

本文链接：https://blog.youkuaiyun.com/hacker12356/article/details/122362670

js 同时被 2 个专栏收录

27 篇文章

订阅专栏

html5

6 篇文章

订阅专栏

本文详细介绍了如何在VueX中使用HTML5的SpeechSynthesis API创建语音提示，通过分两部分处理启动和对象创建，确保onstart和onend回调的正确执行。讨论了异步问题及其解决方案。

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

便利贴--1{js文字转语音}

实现方法 ——html5自带方法

实现方法 ——html5自带方法

//创建转为语音对象并赋值
//我是在vueX里用的  
state.audioData = new window.SpeechSynthesisUtterance();
      state.audioData.text = val;
      state.audioData.onstart = function (e) {
        state.audioState = true;
      };
      state.audioData.onend = function (event) {
        state.audioState = false;
      };

if (state.audioState) {
        window.speechSynthesis.cancel();//关闭方法
        state.audioState = false;
      } else {
        if (val != "notOpen") {
          window.speechSynthesis.speak(state.audioData);//启动方法
        }
      }

关于为什么分两部分写，是因为如果创建对象后，
直接调用window.speechSynthesis.speak(state.audioData);会造成onstart 和onend 的回调不起作用
所以，把启动和创建分为两部分，不同事件来调用，就可正常回调！
别个地方是用button按钮事件来启动，但也是分开两部分，，，可能是异步问题，如果有知道为啥的，可以评论告知，感谢！