JavaScript - 让你的浏览器公威罗!

本篇要介绍的是让浏览器说话的功能，其实要让它说话很简单，浏览器本身就有内建方法可以使用，接下来让我们看看如何使用吧！

让浏览器说话

首先让我们看一下简短的范例

const string = "Hello World"
let utterance = new SpeechSynthesisUtterance(string)
speechSynthesis.speak(utterance)

短短几行就可以说话啦～但是如果你在 Chrome 执行会发现你的功能没有作用，并且跳出了警告

这是因为 Chrome 不允许在使用者没有互动的时候直接使用这个方法，在其他浏览器就不会有这个问题，如果要在 Chrome 执行则可以加一个事件给他，这样就正常了

<button class="btn">点我公威</button>

document.querySelector(".btn").addEventListener("click", e => {
  const string = "Hello World"
  let utterance = new SpeechSynthesisUtterance(string)
  speechSynthesis.speak(utterance)
})

让浏览器说话最重要的有两个 API

• SpeechSynthesisUtterance
• SpeechSynthesis

接下来就来介绍一下他们该如何设定

SpeechSynthesisUtterance

SpeechSynthesisUtterance 是一个浏览器提供的语音合成 API，我们可以用 new 的方法来创建一个合成语音，主要是控制音量、音调、语言...等设定

SpeechSynthesisUtterance 属性

• utterance.text：设定语音内容
• utterance.lang：设定语言，各语言发音不同，预设则看浏览器
• utterance.pitch：设定音调：0.1～2，预设为 1
• utterance.rate：设定语速：0.1～10，预设为 1
• utterance.volume：设定音量：0～1，预设为 1
• utterance.voice：设定发音的语音

简单的设定如下

const string = "Hello World"
let utterance = new SpeechSynthesisUtterance(string)
utterance.text = "我是说话内容"
utterance.lang = "zh-TW"
utterance.pitch = 1
utterance.rate = 1
utterance.volume = 1
speechSynthesis.speak(utterance)

上面没有写到 voice 的设定，因为它比较特别一点，这个属性的作用主要是设定发音的语音，例如想用 Google 小姐的声音就是透过该设定达成，但是此属性每个浏览器提供的都不一样，而我们可以透过 speechSynthesis.getVoices() 的方法来获取选项

speechSynthesis.getVoices() // []

// A FEW MOMENTS LATER

speechSynthesis.getVoices() // (21) [SpeechSynthesisVoice, SpeechSynthesisVoice, SpeechSynthesisVoice, SpeechSynthesisVoice, SpeechSynthesisVoice, SpeechSynthesisVoice, SpeechSynthesisVoice, SpeechSynthesisVoice, SpeechSynthesisVoice, SpeechSynthesisVoice, SpeechSynthesisVoice, SpeechSynthesisVoice, SpeechSynthesisVoice, SpeechSynthesisVoice, SpeechSynthesisVoice, SpeechSynthesisVoice, SpeechSynthesisVoice, SpeechSynthesisVoice, SpeechSynthesisVoice, SpeechSynthesisVoice, SpeechSynthesisVoice]

我们用 speechSynthesis.getVoices() 取值发现会是空阵列，但过了一阵子再取一次却发现有东西了，所以这边我们不能直接去用这个方法获取语音，而是要透过监听的方式

speechSynthesis.addEventListener("voiceschanged", function(e) {
  console.log(e.target.getVoices())
});

成功之後就可以看到密密麻麻一堆语音，之後再把值赋予就可以完成设定罗

// 抓取全部语音，并找出 Google 语音
let voice
speechSynthesis.addEventListener("voiceschanged", function(e) {
  const voices = e.target.getVoices()
  voice = voices.find(voice => voice.voiceURI === "Google 国语（台湾）")
});

document.querySelector(".btn").addEventListener("click", e => {
  const string = "Hello World"
  let utterance = new SpeechSynthesisUtterance(string)
  utterance.voice = voice
  speechSynthesis.speak(utterance)
})

以上设定完成 Google 语音，不过这边要注意其他浏览器可能会没有这些选项，例如 Edge 就只有下面这样

SpeechSynthesisUtterance 事件

• start：发音开始时触发
• end：发音结束时触发
• pause：发音暂停时触发
• resume：暂停後继续发音时触发
• boundary：发音遇到断点或停顿时触发
• mark：发音到被标记部分时触发
• error：发音发生错误时触发

亦可在前面加上 on 来设定事件

// 使用 addEventListener 监听事件
const string = "Hello World"
let utterance = new SpeechSynthesisUtterance(string)
utterance.addEventListener("start", () => console.log("start"))
speechSynthesis.speak(utterance)

// 使用 on 监听事件
const string = "Hello World"
let utterance = new SpeechSynthesisUtterance(string)
utterance.onstart = () => console.log("start")
speechSynthesis.speak(utterance)

SpeechSynthesis

SpeechSynthesis 也是浏览器提供的语音合成 API，可读取我们刚刚合成的语音并做一些操作，其主要是负责发声、暂停、播放...等功能

SpeechSynthesis 属性

SpeechSynthesis 的属性主要是用来获取当前状态，所以为 Read only

• SpeechSynthesis.paused：暂停中 return true，正在播放则 return false
• SpeechSynthesis.pending：播放列表有东西 return true，播放列表为空则 return false
• SpeechSynthesis.speaking：正在播放时 return true，播放中断时则 return false

SpeechSynthesis 方法

• SpeechSynthesis.getVoices()：获得所有可用的语音列表
• SpeechSynthesis.speak()：将一段语音放入播放列表
• SpeechSynthesis.cancel()：移除所有播放列表的语音
• SpeechSynthesis.pause()：暂停播放语音
• SpeechSynthesis.resume()：将暂停的语音继续播放

到这边就已经介绍完所有的功能，基本上把上述这些方法组合起来就可以玩出很多花招了

结语

一开始还以为要在浏览器做出说话的功能需要安装一些套件，研究之後才发现原来有内建的阿，而且还那麽容易使用，真是太贴心了吧，那麽就快去玩自己的 Ｇoogle 小姐吧！