Web端在线语音播报文本 - SpeechSynthesis

原创

已于 2024-05-11 14:15:53 修改

· 769 阅读

4 ·

版权

文章标签：

#前端 #vue.js #elementui

于 2024-04-22 14:26:20 首次发布

本文介绍了如何在前端模板中使用HTML5SpeechSynthesis接口来控制语音服务，包括设置文本、语言、音调、音速和音量，以及实现播放、暂停、停止等操作，适用于低配置云服务器环境。

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

HTML5 SpeechSynthesis接口是语音服务的控制接口；它可以用于获取设备上关于可用的合成声音的信息，开始、暂停语音

以下是示例使用代码：

<template>
       <el-form label-width="70px" class="form-speech">
          <el-form-item label="播报文本">
            <el-input v-model="state.code" type="textarea" rows="8" />
          </el-form-item>
          <el-form-item label="语言">
            <el-select v-model="state.lang" @change="syncConfig" placeholder="请选择">
              <el-option
                v-for="item in langOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="音调">
            <el-slider v-model="state.pitch" @change="syncConfig" :min="0" :max="2" :step="1"></el-slider>
          </el-form-item>
          <el-form-item label="音速">
            <el-sl