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

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-slider v-model="state.rate" @change="syncConfig" :min="0.1" :max="10" :step="0.1"></el-slider>
          </el-form-item>
          <el-form-item label="音量">
            <el-slider v-model="state.volume" @change="syncConfig" :min="0" :max="1" :step="0.1"></el-slider>
          </el-form-item>
          <el-form-item>
            <el-button v-if="!speech" type="primary" @click="run">播放</el-button>
            <el-button v-if="speech" type="default" @click="stop">停止</el-button>
            <el-button v-if="speech && isSpeaking" type="default" @click="pause">暂停</el-button>
            <el-button v-if="speech && isPaused" type="default" @click="resume">继续</el-button>
          </el-form-item>
        </el-form>
</template>

<script>
export default {
  data () {
	return {
      speech: null,
      state: {
        code: '',
        lang: '',
        pitch: 1,
        rate: 1,
        volume: 1,
      },
      langOptions: [
        { label: '默认语言', value: '' },
        { label: '中文', value: 'zh' },
        { label: '英文', value: 'en' },
        { label: '法语', value: 'fr' },
        { label: '日语', value: 'ja' },
        { label: '德语', value: 'de' }
      ],
      isSpeaking: false,
      isPaused: false
    }
  },

  mounted() {
    this.initView()
  },

  methods: {
    // 初始化视图
    initView() {
      let code = localStorage.getItem('speech-text')
      if (code) {
        this.state.code = code
      }
    },
    // 开始播放
    run () {
      if (/^\s*$/.test(this.state.code)) {
        this.$message({
          message: '请输入播放文本',
          type: 'warning'
        })
        return false
      }
      localStorage.setItem('speech-text', this.state.code)
    	// 检查浏览器是否支持Web Speech API  
    	if ('speechSynthesis' in window) {
          // 清空未播放完的
          speechSynthesis.cancel()
    		  // 创建一个新的SpeechSynthesisUtterance对象
    	    let text = this.state.code
    	    let speech = new SpeechSynthesisUtterance(text)
	        speech.text = text //文字
          this.speech = speech
    	    this.syncConfig()
          this.bindEvents()
    	    speechSynthesis.speak(speech) //播放语音
    	} else {
        this.$message({
          message: '浏览器不支持语音播报',
          type: 'warning'
        })
  	    console.error('浏览器不支持Web Speech API');
    	}
    },
    // 同步配置
    syncConfig () {
	    let speech = this.speech
      if (!speech) {
        return true
      }
      if (this.state.lang) {
        speech.lang = this.state.lang
      }
	    speech.pitch = this.state.pitch // 语速
	    speech.rate = this.state.rate // 语速
      speech.volume = this.state.volume // 音量
    },
    // 事件绑定
    bindEvents () {
	    let speech = this.speech
      if (!speech) {
        return true
      }
      // 开始语音播放时触发
      speech.addEventListener('start', () => {
        this.isSpeaking = true
        this.isPaused = false
      })
      // 暂停语音播放时触发
      speech.addEventListener('pause', () => {
        this.isSpeaking = false
        this.isPaused = true
      })
      // 恢复语音播放时触发
      speech.addEventListener('resume', () => {
        this.isSpeaking = true
        this.isPaused = false
      })
      // 语音播放结束时触发
      speech.addEventListener('end', () => {
        this.speech = null
        this.isSpeaking = false
        this.isPaused = false
      })
      // 语音播放错误时触发
      speech.addEventListener('error', () => {
        this.speech = null
        this.isSpeaking = false
        this.isPaused = false
      })
    },
    // 停止播放
    stop () {
	    let speech = this.speech
      if (!speech) {
        return true
      }
      speechSynthesis.cancel()
      this.speech = null
    },
    // 暂停播放
    pause () {
	    let speech = this.speech
      if (!speech) {
        return true
      }
      speechSynthesis.pause()
    },
    // 继续播放
    resume () {
	    let speech = this.speech
      if (!speech) {
        return true
      }
      speechSynthesis.resume()
    }
  }
}
</script>

低配置云服务器，首次加载速度较慢，请耐心等候

预览页面：http://www.daelui.com/#/tigerlair/saas/preview/lvaem64nrhth
演练页面：http://www.daelui.com/#/tigerlair/saas/practice/lvaem64nrhth