Web Speech API（2）—— SpeechSynthesis

<template>
  <div class="s-s-wrap">
    <textarea
      id="text-to-speak"
      rows="10"
      cols="50"
      placeholder="Enter text here"
    ></textarea>
    <br /><br />
    <label for="voices">Voice:</label>
    <select id="voices"></select>
    <br /><br />
    <label for="rate">Rate:</label>
    <input type="range" id="rate" min="0.5" max="2" value="1" step="0.1" />
    <span id="rate-value">1</span>
    <br /><br />
    <label for="pitch">Pitch:</label>
    <input type="range" id="pitch" min="0" max="2" value="1" step="0.1" />
    <span id="pitch-value">1</span>
    <br /><br />
    <label for="volume">Volume:</label>
    <input type="range" id="volume" min="0" max="1" value="1" step="0.1" />
    <span id="volume-value">1</span>
    <br /><br />
    <button id="speak-btn" @click="speak" style="margin-right: 10px">
      Speak
    </button>
    <button id="cancel-btn" @click="cancel" style="margin-right: 10px">
      cancel
    </button>
    <button id="pause-btn" @click="pause" style="margin-right: 10px">
      pause
    </button>
    <button id="resume-btn" @click="resume" style="margin-right: 10px">
      resume
    </button>
  </div>
</template>

<script>
/* 
大千世界,无奇不有。我陈平安,唯有一剑,可搬山,倒海,降妖,镇魔,敕神,摘星,断江,摧城,开天!<mark name="highlight">我叫陈平安</mark>,平平安安的平安。我是一名剑客。
*/
let voices = []
export default {
  mounted() {
    this.populateVoices()
    let synth = window.speechSynthesis
    /* 
    因为 Firefox 不支持SpeechSynthesis.onvoiceschanged ，
    所以很常规地只是返回语音对象列表当SpeechSynthesis.getVoices() 被触发。
    但是 Chrome 就有点不同了，在SpeechSynthesis.getVoices() 被触发时，
    先要等待事件触发 (有点绕~按照下面代码，populateVoices 函数在 Firefox 运行一次，在 Chrome 中运行两次)：
    */
    if (synth.onvoiceschanged !== undefined) {
      synth.onvoiceschanged = this.populateVoices
    }
    // 监听
    const rate = document.getElementById('rate')
    rate.addEventListener('change', this.setRateValue)

    const pitch = document.getElementById('pitch')
    pitch.addEventListener('change', this.setPitchValue)

    const volume = document.getElementById('volume')
    volume.addEventListener('change', this.setVolumeValue)
  },
  methods: {
    // 使用设备可使用的不同的语音选项展示
    populateVoices() {
      // 引用window.speechSynthesis这个api
      let synth = window.speechSynthesis
      // 调用SpeechSynthesis.getVoices()
      // 这个函数返回包含所有可用语音 (SpeechSynthesisVoice对象) 的列表
      voices = synth.getVoices()

      const voicesDropdown = document.getElementById('voices')
      // 循环填入声音的名称（从SpeechSynthesisVoice.name获取），语音的语言（从SpeechSynthesisVoice.lang获取）
      // 引擎默认的 (SpeechSynthesisVoice.default属性是true)
      voicesDropdown.innerHTML = voices
        .map(
          (voice, i) =>
            `<option value="${i}">${voice.name} (${voice.lang})</option>`
        )
        .join('')
    },
    // 设置语速
    setRateValue() {
      const rate = document.getElementById('rate')
      const rateValue = document.getElementById('rate-value')
      rateValue.textContent = rate.value
    },
    setPitchValue() {
      const pitch = document.getElementById('pitch')
      const pitchValue = document.getElementById('pitch-value')
      pitchValue.textContent = pitch.value
    },
    setVolumeValue() {
      const volume = document.getElementById('volume')
      const volumeValue = document.getElementById('volume-value')
      volumeValue.textContent = volume.value
    },
    speak() {
      let synth = window.speechSynthesis
      console.log('speak', synth)
      if (synth.speaking) {
        console.error('speechSynthesis.speaking')
        return
      }
      const textArea = document.getElementById('text-to-speak')
      const voicesDropdown = document.getElementById('voices')
      // 创建一个新的SpeechSynthesisUtterance() 实例——把文本输入框中的值作为参数传递。
      const utterThis = new SpeechSynthesisUtterance(textArea.value)
      // const utterThis = new SpeechSynthesisUtterance()
      // utterThis.text = '这是一段<mark name="highlight">重要的</mark>文本。'
      console.log(voices, 'voices', voices[voicesDropdown.value])
      // 使用哪种语音
      // 把匹配的语音对象设置为SpeechSynthesisUtterance.voice 的属性值
      utterThis.voice = voices[voicesDropdown.value]

      const rate = document.getElementById('rate')
      const pitch = document.getElementById('pitch')
      const volume = document.getElementById('volume')
      // 设置语速
      utterThis.rate = rate.value
      // 设置音高（音调）
      utterThis.pitch = pitch.value
      // 设置音量(响度)
      utterThis.volume = volume.value
      // 错误监听
      utterThis.onerror = event => {
        console.log(`speech-synthesis-错误监听: ${event}`)
      }
      // 暂停操作监听
      utterThis.onpause = event => {
        const char = event.utterance.text.charAt(event.charIndex)
        console.log(
          event,
          `当前暂停位置的字符索引:${event.charIndex}, 文本内容:"${event.utterance.text}", 具体字符: "${char}".`
        )
      }
      // 边界监听
      utterThis.onboundary = event => {
        console.log(event, `${event.name}  时间： ${event.elapsedTime} 秒.`)
      }
      // 标记监听
      utterThis.onmark = event => {
        console.log('标记监听', event)
        if (event.name === 'highlight') {
          console.log('朗读到达标记：' + event.name)
          // 在这里执行您想要的操作，比如高亮显示文本、播放声音等
        }
      }
      // 调用 SpeechSynthesis.speak() 开始说话
      // 把 SpeechSynthesisUtterance 实例作为参数传递
      synth.speak(utterThis)
    },
    cancel() {
      let synth = window.speechSynthesis
      console.log('cancel', synth)
      synth.cancel()
    },
    pause() {
      let synth = window.speechSynthesis
      console.log('pause', synth)
      synth.pause()
    },
    resume() {
      let synth = window.speechSynthesis
      console.log('resume', synth)
      synth.resume()
    }
  }
}
</script>

<style>
.s-s-wrap {
  width: 370px;
  margin: auto;
}
</style>

lrz136

关注

8
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
Web Speech API（2）—— SpeechSynthesis

Web Speech API 有两个部分：SpeechSynthesis 语音合成（文本到语音 TTS）和 SpeechRecognition 语音识别（异步语音识别）。语音合成 (也被称作是文本转为语音，英语简写是 tts) 包括接收 app 中需要语音合成的文本，再在设备麦克风播放出来这两个过程。其中包含了将由语音服务朗读的内容，以及如何朗读它（例如：语种、音高、音量）。语音合成服务的控制器接口，可用于获取设备上可用的合成语音，开始、暂停以及其他相关命令的信息。控制器，从而获取语音合成功能的入口。
复制链接

扫一扫