コアポイント

• Voice Synthesis APIにより、Webサイトはテキストを聲に出して読んでユーザーに情報を提供できます。
• 音聲合成APIは、言語、音聲速度、トーンなどの音聲出力をカスタマイズするためのさまざまな方法と屬性を提供します。このAPIには、音聲合成プロセスを開始、一時停止、再開、および停止する方法も含まれています。
• 現(xiàn)在、音聲合成APIはChrome 33によってのみ完全にサポートされており、iOS 7のSafariブラウザーを部分的にサポートしています。このAPIでは、より広いブラウザーサポートをWebサイトで実際に適用する必要があります。

數(shù)週間前、NLPとその関連技術(shù)について簡単に説明しました。自然言語を扱う場合、2つの明確であるが補完的な側(cè)面を考慮する必要があります：自動音聲認識（ASR）とテキストからスピーチ（TTS）。 Web Voice APIを?qū)毪工胗浭陇?、Webブラウザで音聲入力とテキストからスピーチへの出力機能を提供するAPIであるWeb Voice APIについて説明しました。音聲合成ではなく、ウェブサイトに音聲認識を?qū)g裝する方法だけをカバーしていることに気付いたかもしれません。この記事では、このギャップを埋めて、音聲合成APIについて説明します。音聲認識は、ユーザー、特に障害のある人のためにウェブサイトに情報を提供する機會を提供します。私が強調(diào)したユースケースを思い出してください：＆gt;ユーザーは音聲ナビゲーションページを使用したり、フォームフィールドに入力したりできます。ユーザーは、道路から目を離さずに運転中にページと対話することもできます。これらはどれも些細なユースケースではありません。

したがって、ユーザーからWebサイトまでのチャネルと考えることができます。それどころか、音聲統(tǒng)合は、テキストを聲に出して読んでユーザーに情報を提供できるようになります。これは、失明のある人や視覚障害のある人にとって特に役立ちます。音聲認識と同様に、音聲統(tǒng)合には多くのユースケースがあります。テキストや電子メールを読むことができる新しい車に実裝されているシステムを考えてみてください。コンピューターを使用して視覚障害者の人々は、ジョーズなどのソフトウェアに精通しており、デスクトップに表示されるものを聲に出して読むことができ、タスクを?qū)g行できます。これらのアプリは素晴らしいですが、高価です。音聲合成APIを使用すると、障害があるかどうかに関係なく、當社のウェブサイトを使用する人々を支援できます。たとえば、ブログ投稿を書いている（私が今やっているように）、読みやすくするために、それを段落に分割するとします。これは音聲合成APIを使用する良い機會ではありませんか？実際、ユーザーがテキストを上回る（または焦點を合わせる）後にスピーカーのアイコンが畫面に表示されるように、ウェブサイトをプログラムできます。ユーザーがアイコンをクリックすると、関數(shù)を呼び出して、指定された段落のテキストを合成します。これは自明ではない改善です。さらに良いことに、開発者としてのオーバーヘッドは非常に低く、ユーザーにとってオーバーヘッドはありません。この概念の基本的な実裝を以下に示します。音聲統(tǒng)合APIデモンストレーション現(xiàn)在、このAPIのユースケースをよりよく理解し、その方法と特性を理解できるようになりました。メソッドおよび屬性音聲合成APIは、SpeechSynthesisと呼ばれるインターフェイスを定義し、その構(gòu)造がここに示されています。前の記事と同様に、この記事では、仕様に記載されているすべてのプロパティとメソッドをカバーしているわけではありません。その理由は、1つの記事でそれをカバーするには複雑すぎるからです。ただし、カバーされていない要素を簡単に理解できるようにするのに十分な要素を説明します。 ### speechsynthesisteutteranceオブジェクト私たちが知る必要がある最初のオブジェクトは、speechsynthesisteutteranceオブジェクトです。これは、シンセサイザーが聲を出して読み取る発音（つまりテキスト）を表します。このオブジェクトは非常に柔軟で、さまざまな方法でカスタマイズできます。テキストに加えて、テキストを発音するために使用される言語、音聲速度、さらにはトーンを設(shè)定することもできます。屬性リストは次のとおりです。-テキスト - 合成するスピーチ（テキスト）を指定する文字列。 -Lang - 音聲合成言語（「EN-GB」や「IT-IT」など）を表す文字列。 -Voiceuri - Webアプリケーションが使用したい音聲合成サービスのアドレスを指定する文字列。 - ボリューム - テキストのボリュームを表す數(shù)字。範囲は0（最?。─?（最大）（を含む）、デフォルト値は1です。 - レート - 音聲速度を表す數(shù)。これは、デフォルトの音聲率に関連しています。デフォルト値は1です。 2の値は、スピーチがデフォルトの速度の2倍で聲を出して読み取られることを意味します。 0.1以下の値以下の値は許可されていません。 - ピッチ - 音聲のトーンを表す番號。範囲は0（最?。─?（最大）（包括的）です。デフォルト値は1です。このオブジェクトをインスタンス化するために、コンストラクターパラメーターとして合成するテキストを渡すか、テキストを省略して後で設(shè)定できます。次のコードは、最初のケースの例です。// 創(chuàng)建語音對象var utterance = new SpeechSynthesisUtterance('My name is Aurelio De Rosa');2番目のケースは、以下に示すようにSpeechSynthesisteutteranceを構(gòu)築し、パラメーターを割り當てることです。このオブジェクトによって公開されたいくつかの方法は次のとおりです。 -On -Start - 合成の開始時にトリガーされるコールバックを設(shè)定します。 -OnPause - 音聲合成が一時停止されたときにトリガーされるコールバックを設(shè)定します。 - Onresume - 構(gòu)成が復元されたときにトリガーされるコールバックを設(shè)定します。 -OneEnd - 構(gòu)成の最後にトリガーされたコールバックを設(shè)定します。 SpeechSynthesisteutterupterオブジェクトを使用すると、テキストを聲を出して読み取るように設(shè)定し、聲を出して読み取る方法を構(gòu)成できます?，F(xiàn)在、スピーチを表すオブジェクトのみを作成しています。シンセサイザーにバインドする必要があります。 ### speechsynthesisオブジェクトSpeechSynthesisオブジェクトをインスタンス化する必要はありません。ウィンドウオブジェクトに屬し、直接使用できます。このオブジェクトは、次のようないくつかのメソッドを公開します。 -speak（） - speechsynthesisteutterupterオブジェクトをその唯一のパラメーターとして受け入れます。この方法は、音聲を合成するために使用されます。 -Stop（） - 合成プロセスをすぐに停止します。 -Pause（） - 合成プロセスを一時停止します。 -Resume（） - 合成プロセスの再開。もう1つの興味深い方法は、getVoices（）です。パラメーターを受け入れず、特定のブラウザが利用できるボイス（配列）のリストを取得するために使用されます。リスト內(nèi)の各エントリは、名前、ニーモニック名などの情報を提供します（「Google US English」、Lang（IT-Itなどの音聲の言語）、Voiceuri（この聲は聲のアドレスなどの開発者に音聲プロンプトを提供する合成サービス）。重要な注意：ChromeとSafariでは、Voiceuri屬性はVoiceと呼ばれます。したがって、この記事で構(gòu)築するデモでは、Voiceuriの代わりにVoiceを使用します。殘念ながら、ブラウザの互換性は、執(zhí)筆時點で、音聲合成APIをサポートする唯一のブラウザはChrome 33（完全なサポート）とiOS 7（部分的にサポートされています）です。デモこのセクションでは、音聲合成APIの簡単なデモを提供します。このページを使用すると、テキストを入力して合成できます。さらに、使用するレート、トーン、言語を設(shè)定できます。また、対応するボタンを使用して、いつでもテキストの合成を停止、一時停止、または再開することもできます。リスナーをボタンに添付する前に、このAPIのサポートが非常に限られているため、実裝をテストしました。一般的に、次のコードを含むテストは非常に簡単です。// 創(chuàng)建語音對象var utterance = new SpeechSynthesisUtterance();utterance.text = 'My name is Aurelio De Rosa';utterance.lang = 'it-IT';utterance.rate = 1.2;テストが失敗した場合、「APIはサポートしていない」というメッセージを表示します。サポートが検証されると、タグに配置された特定の選択ボックスに使用可能な音聲を動的にロードします。 Chrome（＃340160）のgetVoices（）メソッドに問題があることに注意してください。そこで、setinterval（）を使用してこれの回避策を作成しました。次に、各ボタンにハンドラーを添付して、特定のアクション（再生、停止など）を呼び出すことができます。コードのライブデモンストレーションはここに提供されています。さらに、このデモと私がこれまでに作成した他のすべてのデモは、私のHTML5 APIデモリポジトリにあります。 「 `

charset = "utf-8"＆gt; name = "viewport" content = "width = device-width、initial-scale = 1.0"/＆gt;

音聲合成APIデモ＆gt;

• { -webkit-box-sizing：border-box; -moz-box-sizing：border-box; ボックスサイズ：ボーダーボックス; }

<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>

＆gt;

音聲合成api＆gt;

<code><h3>></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>></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>

結(jié)論

この記事では、音聲合成APIを紹介します。これは、テキストを統(tǒng)合し、當社のウェブサイトユーザー、特に視覚障害のあるユーザーの全體的なエクスペリエンスを向上させるAPIです。ご覧のとおり、このAPIは複數(shù)のオブジェクト、メソッド、およびプロパティを公開しますが、使用することは難しくありません。殘念ながら、ブラウザのサポートは現(xiàn)在非常に貧弱で、ChromeとSafariがそれをサポートする唯一のブラウザです。うまくいけば、より多くのブラウザがあなたのウェブサイトでそれを使用することを?qū)g際に検討できるようにすることを願っています。私はそれをすることにしました。デモを再生することを忘れないでください。この投稿が気に入ったら、コメントを殘してください。本當にあなたの意見を聞きたいです。ウェブページと音聲合成API（FAQ）

に関するよくある質(zhì)問

音聲合成APIとは何ですか？それはどのように機能しますか？

Voice Synthesis APIは、開発者がテキストからスピーチの機能をアプリケーションに統(tǒng)合できるようにするWebベースのインターフェイスです。書かれたテキストをコンピューターで生成された音聲を使用して話し言葉に変換することで機能します。これは、テキストを音聲コンポーネントに分割し、これらのコンポーネントをスピーチに合成することによって行われます。 APIは、さまざまな音聲と言語を選択できるため、開発者はニーズに合わせて音聲出力をカスタマイズできます。

WebアプリケーションにSpeech Synthesis APIを?qū)g裝するにはどうすればよいですか？

WebアプリケーションにSpeech Synthesis APIを?qū)g裝するには、いくつかのステップが含まれます。まず、新しいSpeechSynthesisteutteranceインスタンスを作成し、聲を出して読みたいテキストにそのテキストプロパティを設(shè)定する必要があります。次に、音聲、トーン、レートなどの他のプロパティを設(shè)定して、音聲出力をカスタマイズできます。最後に、音聲合成を開始するために、SpeechSynthesis Interfaceのスポーク方法を呼び出します。

音聲出力の音聲と言語をカスタマイズできますか？

はい、音聲合成APIは、選択できるスピーチと言語の範囲を提供します。 SpeechSynthesisteutteranceインスタンスの音聲とラングの特性を設(shè)定することにより、音聲と言語を設(shè)定できます。また、APIを使用すると、音聲のトーンとレートを調(diào)整して、出力をさらにカスタマイズすることもできます。

音聲合成APIの制限は何ですか？

音聲合成APIは強力なツールですが、いくつかの制限があります。たとえば、音聲と言語の可用性は、ブラウザやオペレーティングシステムによって異なる場合があります。さらに、音聲出力の品質(zhì)は異なる場合があり、常に自然に聞こえるとは限りません。さらに、このAPIは、特定の単語またはフレーズの発音を制御することはできません。

音聲合成APIを使用するときにエラーを処理する方法は？

音聲合成APIは、聴くことができるエラーイベントを提供します。このイベントは、音聲合成中にエラーが発生したときにトリガーされます。このイベントをspeechSynthesisteutteranceインスタンスにイベントリスナーを追加し、イベントがトリガーされたときに呼び出されるコールバック関數(shù)を提供することで、このイベントを処理できます。

一時停止して音聲出力を再開できますか？

はい、音聲合成APIは、音聲出力を制御するために使用できる一時停止および回復方法を提供します。これらのメソッドをSpeechSynthesisインターフェイスで呼び出して、音聲を一時停止および復元できます。

Voice Synthesis APIはすべてのブラウザーでサポートされていますか？

音聲合成APIは、Chrome、Firefox、Safari、Edgeなど、ほとんどの最新のブラウザーでサポートされています。ただし、音聲と言語の可用性は、ブラウザやオペレーティングシステムによって異なる場合があります。

モバイルアプリケーションで音聲合成APIを使用できますか？

はい、音聲合成APIはモバイルアプリケーションで使用できます。ただし、音聲と言語の可用性は、モバイルオペレーティングシステムによって異なる場合があります。

音聲合成APIをテストする方法は？

APIを使用して書かれたテキストを音聲に変換するシンプルなWebページを作成することにより、Speech Synthesis APIをテストできます。その後、さまざまな聲、言語、トーン、レートを試して、音聲出力にどのように影響するかを確認できます。

音聲合成APIの詳細情報はどこにありますか？

World Wide Web Alliance（W3C）が提供する公式ドキュメントで、音聲合成APIに関する詳細情報を見つけることができます。また、APIの使用方法に関する詳細な説明と例を提供する多くのオンラインチュートリアルや記事もあります。

以上が話すWebページと音聲合成APIの詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。