正文

HTML5语音合成Speech Synthesis API简介

譬如朝露 V管理员/ / 0 评论/ 811阅读
03 14 
 let btn = document.querySelector('button');
    const synth = window.speechSynthesis;
    btn.onclick = function () {
        var mess = '语音合成测试'

        var msg = new SpeechSynthesisUtterance(mess)

        msg.volume = 100  // 声音的音量

        msg.rate = 1 // 语速，数值，默认值是1，范围是0.1到10

        msg.pitch = 1.5 // 表示说话的音高，数值，范围从0（最小）到2（最大）。默认值为1

        synth.speak(msg)
        
    }

先从最简单的例子说起，如果想让浏览器读出“你好，世界！”的声音，可以下面的JS代码：

var utterThis = new window.SpeechSynthesisUtterance('你好，世界！');
window.speechSynthesis.speak(utterThis);

如果在html里面写需要加入点击事件，触发代码

没错，只需要这么一点代码就足够了，大家可以在自己浏览器的控制台里面运行上面两行代码，看看有没有读出声音。

上面代码出现了两个长长的对象，SpeechSynthesisUtterance和speechSynthesis，就是语音合成Speech Synthesis API的核心。

首先是SpeechSynthesisUtterance对象，主要用来构建语音合成实例，例如上面代码中的实例对象utterThis。我们可以直接在构建的时候就把要读的文字内容写进去

var utterThis = new window.SpeechSynthesisUtterance('你好，世界！');

又或者是使用实例对象的一些属性，包括：

  • text – 要合成的文字内容，字符串。

  • lang – 使用的语言，字符串， 例如："zh-cn"

  • voiceURI – 指定希望使用的声音和服务，字符串。

  • volume – 声音的音量，区间范围是0到1，默认是1。

  • rate – 语速，数值，默认值是1，范围是0.1到10，表示语速的倍数，例如2表示正常语速的两倍。

  • pitch – 表示说话的音高，数值，范围从0（最小）到2（最大）。默认值为1。

Speech synthesiser (mdn.github.io)

文章版权声明：除非注明，否则均为 譬如朝露_策温技术开发工作室博客原创文章，转载或复制请以超链接形式并注明出处。