使用js写一个播放语音提示的功能

丰柏林

于 2020-09-21 15:46:29 发布

阅读量1.6k

点赞数 1

分类专栏： js前端 vue学习笔记文章标签： javascript

本文链接：https://blog.youkuaiyun.com/qq_40647912/article/details/108712010

版权

js前端同时被 2 个专栏收录

30 篇文章

订阅专栏

vue学习笔记

17 篇文章

订阅专栏

本文介绍如何使用window自带的speechSynthesis API来实现网页应用中的语音提示功能。文章提供了一个简单的示例，展示了如何设置语音内容、语言、音量等参数，并通过点击按钮触发语音播放。

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

利用window自带的speechSynthesis编写一个播放语音提示的功能
之前利用百度的在线语音合成发现改不了其中的per属性，自己装了一下node包，发现cnpm引入的时候会与vue-admin-element里面的模块相冲突，导致项目崩掉。重新cnpm install之后项目跑起来了，于是开始使用window自带的编写。

<template>
  <button @click="playVoice">播放通知</button>
</template>
<script>
  const synth = window.speechSynthesis;
  const msg = new SpeechSynthesisUtterance();
  export default {
    data() {
      return {};
    },
    methods: {
      playVoice() {
        this.handleSpeak('14号床需要取针！') // 传入需要播放的文字
      },
      // 语音播报的函数
      handleSpeak(text) {
        msg.text = text;
        msg.lang = "zh-CN";  // 使用的语言:中文
        msg.volume = 1;      // 音量：1
        msg.rate = 2;        // 语速：1
        msg.pitch = 0;       // 音高：1
        synth.speak(msg);    // 播放
      },
      // 语音停止
      handleStop(e) {
        msg.text = e;
        msg.lang = "zh-CN";
        synth.cancel(msg);
      }
    }
  };
</script>