話すWebページと音声合成API

コアポイント

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

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

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

結論

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

に関するよくある質問

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

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

WebアプリケーションにSpeech Synthesis APIを実装するにはどうすればよいですか？

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

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

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

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

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

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

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

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

はい、音声合成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の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。