关于javascript:JS实现将文字转换为语音并自动播放

在开发业务零碎时，有时候可能须要应用语音播报一段文字，比方上面的场景：

当顾客付款胜利后，须要零碎主动播报收款的金额，其中付款金额是不固定的，比方 1 元、2 元、3.2 元等等

如果是绝对固定的场景，并且语音无限的状况下，能够采纳录制的形式，即先录制好所有的音频资源，而后依据业务场景播放相应的音频即可；然而如果场景不固定，须要的语音也不一样时，采纳录制的形式的话，音频资源将会十分多，而且还可能会呈现不全的问题，那么这个时候利用语音合成技术是一个较好的方法，即实时将文字转换成语音。

目前文字转语音即语音合成技术当初曾经很成熟了，像百度、讯飞等都提供了相干的服务，反对将文字转换成各种模式的语音，通常这些服务都须要付费应用，如果对语音要求不高，并且又想节约老本，那么能够间接应用浏览器的语音合成性能。

有些浏览器曾经反对将文字转换为语音的性能，上面来看看官网的介绍：

语音合成是通过 SpeechSynthesis 接口进行拜访，它提供了文字到语音（TTS）的能力，这使得程序可能读出它们的文字内容（通常应用设施默认的语音合成器）。不同的声音类类型通过 SpeechSynthesisVoice 对象进行示意，不同局部的文字则由 SpeechSynthesisUtterance 对象来示意，最初能够通过 SpeechSynthesis.speak() 办法来产生语音。

语音合成次要波及到下面的三个对象：SpeechSynthesis、SpeechSynthesisVoice 和 SpeechSynthesisUtterance。

SpeechSynthesis 是语音合成服务的控制器接口，可用于获取设施上可用的合成语音，开始、暂停以及其它相干命令的信息，能够应用 window.speechSynthesis 属性来拜访 SpeechSynthesis 控制器，从而获取语音合成性能的入口。

或者省略 window，间接应用 speechSynthesis 也是能够的

它有 paused、pending、speaking 三个属性，都是只读属性，不可批改。

它领有的办法如下：

SpeechSynthesis.cancel()：勾销语音播放
SpeechSynthesis.getVoices()：获取以后设施所有可用声音的 SpeechSynthesisVoice 列表。
SpeechSynthesis.pause() ：暂停语音播放
SpeechSynthesis.resume() ：复原播放
SpeechSynthesis.speak() ：增加语音到播放列队，将会在其余语音播放完后自动播放

SpeechSynthesisVoice 示意以后零碎反对的语音资源，每一个 SpeechSynthesisVoice 都对应相干的语音服务，能够通过 SpeechSynthesis.getVoices() 获取语音列表，如下：

它有 5 个只读的属性，别离为 default、lang、name、localService、voiceURI.

SpeechSynthesisUtterance 示意一次发音申请，其中蕴含了将由语音服务朗诵的内容，以及如何朗诵它（例如：语种、音高、音量）。

它有 6 个属性，别离如下：

lang： 读取时的语言
pitch： 声音的音高，取值 0~2，失常音高为 1
rate： 读取的语速，取值 0.1~10，失常语速值为 1
text： 要合成语音的文字内容
voice： 读取文字的语音服务，默认为 SpeechSynthesisVoice 的属性值为 default 的那个
volume： 读取时声音的音量，取值 0~1，失常音量为 1

除了下面的属性外，还有 7 个事件办法，别离如下：

onboundary：当播放至一个词或句子结尾时触发
onend：语音播放完结时触发
onerror：语音播放谬误时触发
onmark：当语音播放至 mark 标记时触发
onpause：暂停语音播放时触发
onresume：复原语音播放时触发
onstart：开始语音播放时触发

对于 SpeechSynthesisVoice 的属性和办法，能够间接在 console 中查看，如下：

在理解了语音合成的相干对象后，上面来简略测试一下

let synth = window.speechSynthesis;
let utterThis = new SpeechSynthesisUtterance('支付宝到账 7.5 元');
synth.speak(utterThis);

运行后，就能够听到语音了，这里应用 Chrome 浏览器测试的，语音听起来还能够。

上面给出一个比拟通用的办法，具体实现的代码：

/**
 * @description 文字转语音办法
 * @public
 * @param {text, rate, lang, volume, pitch} object
 * @param  text 要合成的文字内容，字符串
 * @param  rate 读取文字的语速 0.1~10  失常 1
 * @param  lang 读取文字时的语言
 * @param  volume  读取时声音的音量 0~1  失常 1
 * @param  pitch  读取时声音的音高 0~2  失常 1
 * @returns SpeechSynthesisUtterance
 */
function speak({text, speechRate, lang, volume, pitch}, endEvent, startEvent) {if (!window.SpeechSynthesisUtterance) {console.warn('以后浏览器不反对文字转语音服务')
        return;
    }

    if (!text) {return;}

    const speechUtterance = new SpeechSynthesisUtterance();
    speechUtterance.text = text;
    speechUtterance.rate = speechRate || 1;
    speechUtterance.lang = lang || 'zh-CN';
    speechUtterance.volume = volume || 1;
    speechUtterance.pitch = pitch || 1;
    speechUtterance.onend = function() {endEvent && endEvent();
    };
    speechUtterance.onstart = function() {startEvent && startEvent();
    };
    speechSynthesis.speak(speechUtterance);
    
    return speechUtterance;
}

测试一下

speak({text: '微信到账 100 元'}, function() {console.log('语音播放完结');
}, function() {console.log('语音开始播放');
});

运行后，能够看到此时的 speechUtterance 实例如下：

同时控制台会顺次输入上面的信息

 语音开始播放
语音播放完结

参考资料

https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Speech_API
https://developer.mozilla.org/zh-CN/docs/Web/API/SpeechSynthesis
https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisVoice
https://developer.mozilla.org/zh-CN/docs/Web/API/SpeechSynthesisUtterance

关于javascript:JS实现将文字转换为语音并自动播放

1、SpeechSynthesis

2、SpeechSynthesisVoice

3、SpeechSynthesisUtterance

4、语音合成代码