怎么使用SpeechSynthesis实现文字自动播报

这篇文章主要介绍“怎么使用SpeechSynthesis实现文字自动播报”,在日常操作中,相信很多人在怎么使用SpeechSynthesis实现文字自动播报问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”怎么使用SpeechSynthesis实现文字自动播报”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

    一、关于SpeechSynthesis

    1、SpeechSynthesis简介

    SpeechSynthesis是HTML5的一个新特性,基于SpeechSynthesis可以实现在客户浏览器端进行动态文本的语音合成播放。在HTML5中和Web Speech相关的API实际上有两类,一类是“语音识别(Speech Recognition)”,另外一个就是“语音合成(Speech Synthesis)”,这两个名词听上去很高大上,实际上指的分别是“语音转文字”,和“文字变语音”。而本文要介绍的就是这里的“语音合成-文字变语音”。为什么称为“合成”呢?比方说你Siri发音“你好,世界!” 实际上是把“你”、“好”、“世”、“界”这4个字的读音给合并在一起,因此,称为“语音合成”。

    2、SpeechSynthesis的核心类

    SpeechSyntehesisUtteranc这个类主要用于控制合成声音的属性配置,比如主要内容,语音模板,语速等等,通过这个核心类控制。它的属性信息如下:

    序号

    参数

    解释

    1

    text

    要合成的文字内容,字符串

    2

    lang

    使用的语言,字符串, 例如:”zh-cn”

    3

    voiceURI

    指定希望使用的声音和服务,字符串。

    4

    volume

    声音的音量,区间范围是0到1,默认是1

    5

    rate

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

    6

    pitch

    表示说话的音高,数值,范围从0(最小)到2(最大)。默认值为1

    核心方法如下表所示:

    序号

    方法名

    说明

    1

    onstart

    语音合成开始时候的回调。

    2

    onpause

    语音合成暂停时候的回调

    3

    onresume

    语音合成重新开始时候的回调

    4

    onend

    语音合成结束时候的回调

    5

    onmark

    Fired when the spoken utterance reaches a named SSML “mark” tag.

    其它更详细的介绍可以参考以下地址Html Web API 接口。这里有更详细的描述,还有详细的示例。

    var synth = window.speechSynthesis;
    var voices = synth.getVoices();
     
    var inputForm = document.querySelector('form');
    var inputTxt = document.querySelector('input');
    var voiceSelect = document.querySelector('select');
     
    for(var i = 0; i < voices.length; i++) {
      var option = document.createElement('option');
      option.textContent = voices[i].name + ' (' + voices[i].lang + ')';
      option.value = i;
      voiceSelect.appendChild(option);
    }
     
    inputForm.onsubmit = function(event) {
      event.preventDefault();
     
      var utterThis = new SpeechSynthesisUtterance(inputTxt.value);
      utterThis.voice = voices[voiceSelect.value];
      synth.speak(utterThis);
      inputTxt.blur();
    }

    3、speechSynthesis对象

    speechSynthesis是实际调用SpeechSynthesisUtterance对象进行合成播报的。他的属性和方法如下两个表格描述。

    序号

    名称

    描述

    1

    paused

    当SpeechSynthesis 处于暂停状态时, Boolean (en-US) 值返回 true

    2

    pending

    当语音播放队列到目前为止保持没有说完的语音时, Boolean (en-US) 值返回 true 。

    3

    speaking

    当语音谈话正在进行的时候,即使SpeechSynthesis处于暂停状态, Boolean (en-US) 返回 true 。

    var synth = window.speechSynthesis;
     
    var inputForm = document.querySelector('form');
    var inputTxt = document.querySelector('.txt');
    var voiceSelect = document.querySelector('select');
     
    var pitch = document.querySelector('#pitch');
    var pitchValue = document.querySelector('.pitch-value');
    var rate = document.querySelector('#rate');
    var rateValue = document.querySelector('.rate-value');
     
    var voices = [];
     
    function populateVoiceList() {
      voices = synth.getVoices();
     
      for(i = 0; i < voices.length ; i++) {
        var option = document.createElement('option');
        option.textContent = voices[i].name + ' (' + voices[i].lang + ')';
     
        if(voices[i].default) {
          option.textContent += ' -- DEFAULT';
        }
     
        option.setAttribute('data-lang', voices[i].lang);
        option.setAttribute('data-name', voices[i].name);
        voiceSelect.appendChild(option);
      }
    }
     
    populateVoiceList();
    if (speechSynthesis.onvoiceschanged !== undefined) {
      speechSynthesis.onvoiceschanged = populateVoiceList;
    }
     
    inputForm.onsubmit = function(event) {
      event.preventDefault();
     
      var utterThis = new SpeechSynthesisUtterance(inputTxt.value);
      var selectedOption = voiceSelect.selectedOptions[0].getAttribute('data-name');
      for(i = 0; i < voices.length ; i++) {
        if(voices[i].name === selectedOption) {
          utterThis.voice = voices[i];
        }
      }
      utterThis.pitch = pitch.value;
      utterThis.rate = rate.value;
      synth.speak(utterThis);
     
      inputTxt.blur();
    }

    在了解了SpeechSynthesis的相关对象的属性和方法之后,就可以用来实现自己的语音播报功能。下一节中重点描述。

    二、SpeechSynthesi文本实例合成

    1、新建test.html

    <!DOCTYPE html>
    <html>
     
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <title>网页版文字转语音朗读功能</title>
            <style>
                article {margin: 0 auto;max-width: 800px;text-align: center;}
                textarea {max-width: 600px;width:100%;text-align: left;}
                button{border-radius: 3px;border: 1px solid #dddddd;height: 30px;width: 80px;cursor: pointer;}
            </style>
        </head>
     
        <body>
            <article>
                <h4 align="center">请在下面文本框中输入要朗读的文本:</h4>
                <p>
                    <textarea id="texts" rows="15" class="_play">本网页版本语音合成播报支持Microsoft Edge等浏览器,不必连接网络。</textarea>
                </p>
                <p>
                    <label>选择播报语音:</label>
                    <select id="voiceSelect" onchange="play()"></select>
                </p>
                <button class="_search" onclick="play()">开始</button>
                <button onclick="resume()">继续</button>
                <button onclick="pause()">暂停</button>
                <!-- <button onclick="cancel()">清除队列</button> -->
                <button onclick="cls()">清空文本</button>
            </article>
        </body>
    </html>

    生成本地支持的语音模板,不同的浏览器获取到的支持信息可能不一样,大家可以根据实际情况添加,而且有的添加了也不一定支持播放。

    //创建选择语言的select标签
    function populateVoiceList() {
          voices = speechSynthesis.getVoices();
          for(i = 0; i < voices.length; i++) {
               var option = document.createElement('option');
               option.textContent = voices[i].name + ' (' + voices[i].lang + ')';
     
               if(voices[i].default) {
                  option.textContent += ' -- DEFAULT';
                }
               option.setAttribute('data-lang', voices[i].lang);
               option.setAttribute('data-name', voices[i].name);
               voiceSelect.appendChild(option);
          }
    }
     
    setTimeout(function() {
           populateVoiceList();
    }, 500) //

    2、定义相关播放方法

    if(!('speechSynthesis' in window)) {
        throw alert("对不起,您的浏览器不支持")
    }
     
    var _play = document.querySelector("._play"),
    to_speak = window.speechSynthesis,
    dataName, voiceSelect = document.querySelector("#voiceSelect"),
    voices = [];
     
    function play() {
      myCheckFunc();//检查文本框是否为空
      cancel(); //
      to_speak = new SpeechSynthesisUtterance(_play.value);
     
      //to_speak.rate = 1.4;// 设置播放语速,范围:0.1 - 10之间
     
      var selectedOption = voiceSelect.selectedOptions[0].getAttribute('data-name');
      for(i = 0; i < voices.length; i++) {
      if(voices[i].name === selectedOption) {
            to_speak.voice = voices[i];
           }
       }
       window.speechSynthesis.speak(to_speak);
     }
     //暂停
    function pause() {
         myCheckFunc();//检查文本框是否为空
         window.speechSynthesis.pause();
    }
    //继续播放
    function resume() {
        myCheckFunc();//检查文本框是否为空
        window.speechSynthesis.resume(); //继续
    }
    //清除所有语音播报创建的队列
    function cancel() {
        window.speechSynthesis.cancel();
    }
    //清空文本框
    function cls()  {
        document.getElementById("texts").value=""; 清空文本框
    }
    //检查文本框是否为空
    function myCheckFunc() {
        let x;
        x = document.getElementById("texts").value;
        try {
            if (x === "")
                 throw "文本框为空";
             } catch (error) {
             alert( "提示" + error);
        }
    }

    3、本地语言支持

    //创建选择语言的select标签
    function populateVoiceList() {
        voices = speechSynthesis.getVoices();
        for(i = 0; i < voices.length; i++) {
            var option = document.createElement('option');
            option.textContent = voices[i].name + ' (' + voices[i].lang + ')';
     
            if(voices[i].default) {
                option.textContent += ' -- DEFAULT';
            }
            option.setAttribute('data-lang', voices[i].lang);
            option.setAttribute('data-name', voices[i].name);
            voiceSelect.appendChild(option);
        }
    }

    浏览器支持

    以下是浏览器的支持情况,从图中可以看到它的浏览器支持是不太全的,但基本覆盖了主流浏览器,从使用场景上来说基本可以完成覆盖。

    到此,关于“怎么使用SpeechSynthesis实现文字自动播报”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注云搜网网站,小编会继续努力为大家带来更多实用的文章!


    【AD】美国洛杉矶/香港/日本VPS推荐,回程电信CN2 GIA线路,延迟低、稳定性高、免费备份_搬瓦工

    【AD】炭云:36元/年/1GB内存/20GB SSD空间/500GB流量/5Gbps端口/KVM/香港/国际线路LUMEN