말하는 웹 페이지 및 음성 합성 API

코어 포인트

Voice Synthesis API를 통해 웹 사이트는 텍스트를 큰 소리로 읽음으로써 사용자에게 정보를 제공 할 수 있으며, 이는 시각적으로 손상된 사용자 및 멀티 태스킹 사용자에게 큰 도움이 될 수 있습니다.

음성 합성 API는 언어, 음성 속도 및 톤과 같은 음성 출력을 사용자 정의하는 다양한 방법과 속성을 제공합니다. 이 API에는 음성 합성 프로세스를 시작, 일시 중지, 재개 및 중지하는 방법도 포함되어 있습니다.

현재, 음성 합성 API는 Chrome 33에서만 완전히 지원되며 iOS 7 용 Safari 브라우저를 부분적으로 지원합니다. 이 API는 웹 사이트에 더 넓은 브라우저 지원이 실제로 적용되어야합니다.
몇 주 전, 나는 NLP와 관련 기술에 대해 간단히 논의했습니다. 자연 언어를 다룰 때는 자동 음성 인식 (ASR) 및 텍스트 음성 (TTS)의 두 가지 뚜렷하지만 보완적인 측면을 고려해야합니다. Web Voice API를 소개하는 기사에서 웹 브라우저에서 음성 입력 및 텍스트 음성 연설 출력 기능을 제공하는 API 인 Web Voice API에 대해 논의했습니다. 당신은 내가 음성 합성이 아니라 웹 사이트에서 음성 인식을 구현하는 방법 만 다루었다는 것을 알았을 것입니다. 이 기사에서는이 격차를 메우고 Speech Synthesis API를 설명합니다. 음성 인식은 사용자, 특히 장애가있는 사용자에게 웹 사이트에 정보를 제공 할 수있는 기회를 제공합니다. 내가 강조하는 사용 사례를 상기하십시오. & gt; 사용자는 음성 탐색 페이지를 사용하거나 양식 필드를 작성할 수 있습니다. 사용자는 도로에서 눈을 떼지 않고 운전하는 동안 페이지와 상호 작용할 수 있습니다. 이들 중 어느 것도 사소한 사용 사례가 아닙니다.
• 따라서 따라서 우리는이를 사용자에서 웹 사이트로 채널로 생각할 수 있습니다. 반대로 음성 합성을 통해 웹 사이트는 텍스트를 큰 소리로 읽음으로써 사용자에게 정보를 제공 할 수 있습니다. 이것은 실명이있는 사람들과 종종 시각 장애가있는 사람들에게 유용합니다. 음성 인식만큼 음성 합성에 대한 사용 사례가 많이 있습니다. 텍스트 나 이메일을 읽을 수있는 새 차에서 구현 된 일부 시스템을 생각해보십시오. 컴퓨터를 사용하는 시각 장애인은 턱과 같은 소프트웨어에 익숙하며 데스크탑에 표시된 내용을 큰 소리로 읽을 수있어 작업을 수행 할 수 있습니다. 이 앱은 훌륭하지만 비싸다. 음성 합성 API를 사용하면 장애가 있는지 여부에 관계없이 웹 사이트를 사용하는 사람들을 도울 수 있습니다. 예를 들어, 내가 지금하고있는 것처럼 블로그 게시물을 작성한다고 가정하고 읽을 수 있도록 단락으로 나뉩니다. 음성 합성 API를 사용할 수있는 좋은 기회가 아닙니까? 실제로 사용자가 텍스트를 가리거나 초점을 맞추면 스피커의 아이콘이 화면에 표시되도록 웹 사이트를 프로그래밍 할 수 있습니다. 사용자가 아이콘을 클릭하면 주어진 단락의 텍스트를 종합하기 위해 함수를 호출합니다. 이것은 사소한 개선입니다. 더 좋은 점은 개발자로서 우리에게 오버 헤드가 매우 낮고 사용자에게는 오버 헤드가 없습니다. 이 개념의 기본 구현은 다음과 같습니다. 음성 합성 API 데모 이제 우리는이 API의 사용 사례를 더 잘 이해하여 그 방법과 속성을 이해할 수 있습니다. 메소드 및 속성 Speech Synthesis API는 SpeechSynthesis라는 인터페이스를 정의합니다. 이전 기사에서와 같이,이 기사는 사양에 설명 된 모든 속성과 방법을 다루지는 않습니다. 그 이유는 하나의 기사에서 다루기에는 너무 복잡하기 때문입니다. 그러나 우리는 당신이 다루지 않은 요소를 쉽게 이해할 수 있도록 충분한 요소를 설명 할 것입니다. ### SpeechSynthesisUTterance Object 우리가 알아야 할 첫 번째 객체는 SpeechSynthesisTurtance 객체입니다. 신디사이저가 큰 소리로 읽을 발음 (즉, 텍스트)을 나타냅니다. 이 개체는 매우 유연하며 다양한 방식으로 사용자 정의 할 수 있습니다. 텍스트 외에도 텍스트를 발음하는 데 사용되는 언어, 음성 속도 및 톤을 설정할 수도 있습니다. 다음은 속성 목록입니다 .- 텍스트 - 합성 할 음성 (텍스트)을 지정하는 문자열. -Lang-음성 합성 언어 (예 : "en-gb"또는 "it-it")를 나타내는 문자열. - Voiceuri - 웹 응용 프로그램이 사용하려는 음성 합성 서비스의 주소를 지정하는 문자열. - 볼륨 - 텍스트의 볼륨을 나타내는 숫자. 0 (최소)에서 1 (최대) (최대) (포함) 범위이며 기본값은 1입니다. - 요율 - 음성 속도를 나타내는 숫자. 기본 음성 비율과 관련이 있습니다. 기본값은 1입니다. 2의 값은 음성이 기본 속도의 두 배로 큰 소리로 읽음을 의미합니다. 0.1 이상의 값은 허용되지 않습니다. - 피치 - 음성의 톤을 나타내는 숫자. 0 (최소)에서 2 (최대) (포함) 범위입니다. 기본값은 1입니다. 이 객체를 인스턴스화하기 위해 텍스트를 전달하여 생성자 매개 변수로 합성하거나 텍스트를 생략하여 나중에 설정할 수 있습니다. 다음 코드는 첫 번째 사례의 예입니다. 두 번째 사례는 speechsynthesisutterance를 구성하고 아래와 같이 매개 변수를 할당하는 것입니다. 이 객체에 노출 된 일부 방법은 다음과 같습니다. - OnStart - 합성 시작시 트리거되는 콜백을 설정하십시오. - Onpause - 음성 합성이 일시 중지 될 때 콜백이 트리거됩니다. - OnResume - 구성이 복원 될 때 트리거되는 콜백을 설정합니다. - Oneend - 작곡 끝에 콜백이 트리거됩니다. SpeechSynthesisTerCutance 객체를 사용하면 텍스트를 큰 소리로 읽을 수 있도록 설정하고 읽는 방법을 큰 소리로 읽을 수 있습니다. 현재 우리는 연설을 나타내는 객체 만 만들었습니다. 우리는 여전히 신디사이저에 결합해야합니다. ### SpeechSynthesis Object SpeechSynthesis 객체를 인스턴스화 할 필요가 없습니다. 창 객체에 속하며 직접 사용할 수 있습니다. 이 객체는 다음과 같은 일부 방법을 노출시킵니다. - speak () - SpeechSynthesisUternate 객체를 유일한 매개 변수로 허용합니다. 이 방법은 음성을 종합하는 데 사용됩니다. - 정지 () - 합성 과정을 즉시 중지하십시오. - pause () - 합성 과정을 일시 중지합니다. - 이력서 () - 합성 과정을 재개합니다. 또 다른 흥미로운 방법은 getVoices ()입니다. 매개 변수는 허용되지 않으며 특정 브라우저에서 사용할 수있는 음성 목록 (배열)을 검색하는 데 사용됩니다. 목록의 각 항목은 이름, 니모닉 이름 ( "Google US English", Lang (IT-IT와 같은 음성 언어) 및 Voiceuri (이 음성은 음성 주소입니다. 합성 서비스). 중요한 참고 사항 : Chrome 및 Safari에서 Voiceuri 속성을 음성이라고합니다. 따라서이 기사에서 구축 할 데모는 Voiceuri 대신 음성을 사용합니다. 불행히도 브라우저 호환성을 작성할 때 Voice Synthesis API를 지원하는 유일한 브라우저는 Chrome 33 (전체 지원) 및 iOS 7 (부분적으로 지원)입니다. 데모이 섹션에서는 음성 합성 API의 간단한 데모를 제공합니다. 이 페이지를 사용하면 일부 텍스트를 입력하여 합성 할 수 있습니다. 또한 사용하려는 속도, 톤 및 언어를 설정할 수 있습니다. 제공된 해당 버튼을 사용하여 언제든지 텍스트 합성을 중지, 일시 중지 또는 재개 할 수도 있습니다. 리스너를 버튼에 첨부하기 전에이 API에 대한 지원이 매우 제한적이기 때문에 구현을 테스트했습니다. 일반적으로 다음 코드를 포함하여 테스트는 매우 간단합니다. // 创建语音对象var utterance = new SpeechSynthesisUtterance('My name is Aurelio De Rosa'); 테스트가 실패하면 "API가 지원하지 않는다"는 메시지를 표시합니다.지원이 확인되면 태그에 배치 된 특정 선택 상자에 사용 가능한 음성을 동적으로로드합니다. Chrome (#340160)의 getVoices () 메소드에는 문제가 있습니다. 그래서 setInterval ()을 사용하여 이것에 대한 해결 방법을 만들었습니다. 그런 다음 각 버튼에 핸들러를 첨부하여 특정 작업 (재생, 중지 등)을 호출 할 수 있습니다. 코드의 라이브 데모가 여기에 제공됩니다. 또한,이 데모와 지금까지 구축 한 다른 모든 데모는 HTML5 API 데모 리포지토리에서 찾을 수 있습니다. ````

  charset = "utf-8"& gt; 이름 = "viewport"content = "width = device-width, 초기 스케일 = 1.0"/& gt; & gt; 스피치 합성 API 데모 & gt;

  { -webkit- 박스 크기 : 국경 박스; -모임 박스 크기 : 국경 박스; 박스 사이징 : 국경 박스; } <.>

  & gt;

  Speech Synthesis Api & gt;

  <code>  body
    {
      max-width: 500px;
      margin: 2em auto;
      padding: 0 0.5em;
      font-size: 20px;
    }
  
    h1,
    .buttons-wrapper
    {
      text-align: center;
    }
  
    .hidden
    {
      display: none;
    }
  
    #text,
    #log
    {
      display: block;
      width: 100%;
      height: 5em;
      overflow-y: scroll;
      border: 1px solid #333333;
      line-height: 1.3em;
    }
  
    .field-wrapper
    {
      margin-top: 0.2em;
    }
  
    .button-demo
    {
      padding: 0.5em;
      display: inline-block;
      margin: 1em auto;
    }
  ></code>

  결론

  이 기사에서는 Speech Synthesis API를 소개합니다. 이것은 텍스트를 종합하고 웹 사이트 사용자의 전반적인 경험, 특히 시각 장애인 사용자의 전반적인 경험을 향상시키는 API입니다. 우리가 볼 수 있듯이이 API는 여러 객체, 메소드 및 속성을 노출하지만 사용하기는 어렵지 않습니다. 불행히도, 브라우저 지원은 현재 매우 가난하며 Chrome과 Safari는이를 지원하는 유일한 브라우저입니다. 더 많은 브라우저가 소송을 따르고 실제로 웹 사이트에서 사용하는 것을 고려할 수 있기를 바랍니다. 나는 그렇게하기로 결정했다. 데모를하는 것을 잊지 마십시오.이 게시물이 마음에 들면 의견을 남겨주세요. 나는 당신의 의견을 정말로 듣고 싶습니다. 웹 페이지 및 음성 합성 API (FAQ)에 대한 자주 묻는 질문

  음성 합성 API는 무엇이며 어떻게 작동합니까?

  <code><h3 id="gt">></h3>Play area>
   action="" method="get">
    <label> for="text"></label>Text:>
     id="text">>
    <div> class="field-wrapper">
      <label> for="voice"></label>Voice:>
       id="voice">>
    </div>>
    <div> class="field-wrapper">
      <label> for="rate"></label>Rate (0.1 - 10):>
       type="number" id="rate" min="0.1" max="10" value="1" step="any" />
    </div>>
    <div> class="field-wrapper">
      <label> for="pitch"></label>Pitch (0.1 - 2):>
       type="number" id="pitch" min="0.1" max="2" value="1" step="any" />
    </div>>
    <div> class="buttons-wrapper">
       id="button-speak-ss" class="button-demo">Speak>
       id="button-stop-ss" class="button-demo">Stop>
       id="button-pause-ss" class="button-demo">Pause>
       id="button-resume-ss" class="button-demo">Resume>
    </div>>
  >
  
   id="ss-unsupported" class="hidden">API not supported>
  
  <h3 id="gt">></h3>Log>
  <div> id="log"></div>>
   id="clear-all" class="button-demo">Clear all>
  
  >
    // Test browser support
    if (window.SpeechSynthesisUtterance === undefined) {
      document.getElementById('ss-unsupported').classList.remove('hidden');
      ['button-speak-ss', 'button-stop-ss', 'button-pause-ss', 'button-resume-ss'].forEach(function(elementId) {
        document.getElementById(elementId).setAttribute('disabled', 'disabled');
      });
    } else {
      var text = document.getElementById('text');
      var voices = document.getElementById('voice');
      var rate = document.getElementById('rate');
      var pitch = document.getElementById('pitch');
      var log = document.getElementById('log');
  
      // Workaround for a Chrome issue (#340160 - https://code.google.com/p/chromium/issues/detail?id=340160)
      var watch = setInterval(function() {
        // Load all voices available
        var voicesAvailable = speechSynthesis.getVoices();
  
        if (voicesAvailable.length !== 0) {
          for(var i = 0; i               voices.innerHTML += '                                  'data-voice-uri="' + voicesAvailable[i].voiceURI + '">' +
                                voicesAvailable[i].name +
                                (voicesAvailable[i].default ? ' (default)' : '') + '';
          }
  
          clearInterval(watch);
        }
      }, 1);
  
      document.getElementById('button-speak-ss').addEventListener('click', function(event) {
        event.preventDefault();
  
        var selectedVoice = voices.options[voices.selectedIndex];
  
        // Create the utterance object setting the chosen parameters
        var utterance = new SpeechSynthesisUtterance();
  
        utterance.text = text.value;
        utterance.voice = selectedVoice.getAttribute('data-voice-uri');
        utterance.lang = selectedVoice.value;
        utterance.rate = rate.value;
        utterance.pitch = pitch.value;
  
        utterance.onstart = function() {
          log.innerHTML = 'Speaker started' + '<br>' + log.innerHTML;
        };
  
        utterance.onend = function() {
          log.innerHTML = 'Speaker finished' + '<br>' + log.innerHTML;
        };
  
        window.speechSynthesis.speak(utterance);
      });
  
      document.getElementById('button-stop-ss').addEventListener('click', function(event) {
        event.preventDefault();
  
        window.speechSynthesis.cancel();
        log.innerHTML = 'Speaker stopped' + '<br>' + log.innerHTML;
      });
  
      document.getElementById('button-pause-ss').addEventListener('click', function(event) {
        event.preventDefault();
  
        window.speechSynthesis.pause();
        log.innerHTML = 'Speaker paused' + '<br>' + log.innerHTML;
      });
  
      document.getElementById('button-resume-ss').addEventListener('click', function(event) {
        event.preventDefault();
  
        if (window.speechSynthesis.paused === true) {
          window.speechSynthesis.resume();
          log.innerHTML = 'Speaker resumed' + '<br>' + log.innerHTML;
        } else {
          log.innerHTML = 'Unable to resume. Speaker is not paused.' + '<br>' + log.innerHTML;
        }
      });
  
      document.getElementById('clear-all').addEventListener('click', function() {
        log.textContent = '';
      });
    }
  ></code>

  Voice Synthesis API는 개발자가 텍스트 음성 연설 기능을 응용 프로그램에 통합 할 수있는 웹 기반 인터페이스입니다. 컴퓨터로 생성 된 음성을 사용하여 서면 텍스트를 음성 단어로 변환하여 작동합니다. 이것은 텍스트를 음성 구성 요소로 나누고 이러한 구성 요소를 음성으로 합성하여 수행됩니다. API는 선택할 수있는 다양한 음성 및 언어를 제공하여 개발자가 자신의 요구에 맞게 음성 출력을 사용자 정의 할 수 있습니다.

  웹 응용 프로그램에서 음성 합성 API를 어떻게 구현합니까?

  웹 응용 프로그램에서 음성 합성 API 구현에는 여러 단계가 필요합니다. 먼저 새로운 SpecipsynthesisTerations 인스턴스를 만들고 텍스트 속성을 큰 소리로 읽을 텍스트로 설정해야합니다. 그런 다음 음성, 톤 및 속도와 같은 다른 속성을 설정하여 음성 출력을 사용자 정의 할 수 있습니다. 마지막으로 SpeechSynthesis Interface의 스포크 방법을 호출하여 음성 합성을 시작하십시오.

  음성 출력의 음성과 언어를 사용자 정의 할 수 있습니까? 예, Speech Synthesis API는 선택할 수있는 다양한 언어와 언어를 제공합니다. SpeechSynthesisTurnations 인스턴스의 음성 및 Lang 속성을 설정하여 음성과 언어를 설정할 수 있습니다. 또한 API를 사용하면 음성의 톤과 속도를 조정하여 출력을 추가로 사용자 정의 할 수 있습니다. 음성 합성 API의 한계는 무엇입니까?

  음성 합성 API는 강력한 도구이지만 몇 가지 제한 사항이 있습니다. 예를 들어, 음성 및 언어 가용성은 브라우저 및 운영 체제에 따라 다를 수 있습니다. 또한 음성 출력의 품질이 다양 할 수 있으며 항상 자연스럽게 들릴 수는 없습니다. 또한,이 API는 특정 단어 또는 문구의 발음을 제어하지 않습니다.

  음성 합성 API를 사용할 때 오류를 처리하는 방법은 무엇입니까?

  Voice Synthesis API는들을 수있는 오류 이벤트를 제공합니다. 이 이벤트는 음성 합성 중에 오류가 발생하면 트리거됩니다. 이벤트 리스너를 SpeechSynthesisTurtance 인스턴스에 추가하고 이벤트가 트리거 될 때 호출 될 콜백 함수를 제공 하여이 이벤트를 처리 할 수 ​​있습니다.

  음성 출력을 일시 중지하고 재개 할 수 있습니까?

  예, 음성 합성 API는 음성 출력을 제어하는 ​​데 사용할 수있는 일시 정지 및 복구 방법을 제공합니다. SpeechSynthesis 인터페이스에서 이러한 방법을 호출하여 음성을 일시 중지하고 복원 할 수 있습니다.

  음성 합성 API가 모든 브라우저에서 지원됩니까?

  Voice Synthesis API는 Chrome, Firefox, Safari 및 Edge를 포함한 대부분의 최신 브라우저에서 지원됩니다. 그러나 음성 및 언어 가용성은 브라우저 및 운영 체제에 따라 다를 수 있습니다.

  모바일 애플리케이션에서 음성 합성 API를 사용할 수 있습니까?

  예, 음성 합성 API는 모바일 애플리케이션에 사용할 수 있습니다. 그러나 음성 및 언어 가용성은 모바일 운영 체제에 따라 다를 수 있습니다.

  음성 합성 API를 테스트하는 방법은 무엇입니까?

  API를 사용하여 서면 텍스트를 음성으로 변환하는 간단한 웹 페이지를 만들어 Speech Synthesis API를 테스트 할 수 있습니다. 그런 다음 다른 음성, 언어, 색조 및 요금을 시도하여 음성 출력에 어떤 영향을 미치는지 확인할 수 있습니다.

  음성 합성 API에 대한 자세한 정보는 어디에서 찾을 수 있습니까?

  월드 와이드 웹 얼라이언스 (W3C)가 제공 한 공식 문서에서 음성 합성 API에 대한 자세한 정보를 찾을 수 있습니다. API 사용 방법에 대한 자세한 설명과 예제를 제공하는 많은 온라인 튜토리얼 및 기사도 있습니다.

위 내용은 말하는 웹 페이지 및 음성 합성 API의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!