聞いてみると、再生される音声はあらかじめ録音された音声素材ではなく、テキスト認識によって合成された音声であることがわかります。
まずヘッドフォンを装着してから、次のコードを Chrome コンソールにコピーして体験してください ~
let msg = new SpeechSynthesisUtterance(私のブログへようこそ);window.speechSynthesis.speak(msg);
ほら、フロントエンドに音声合成を実装するのは難しくありません
今日の主役 音声合成API上記の例から、上記で呼び出された 2 つのメソッドの機能を推測できます。
音声合成音声window.speechSynthesis.speak
もちろん、音声合成にはこの 2 つの API だけが含まれるわけではありませんが、まずはこの 2 つの点から始めましょう。
音声合成発話参照:developer.mozilla.org/en-US/docs/… SpeechSyntehesisUtteranc オブジェクトには、音声サービスによって読み取られるコンテンツと、言語、ピッチ、音量などのいくつかのパラメーターが含まれています。
音声合成Utteranc()音声合成音声.lang音声合成音声.ピッチ音声合成音声.レート音声合成音声.音声音声合成音声.音量
注: 上記のプロパティはすべて読み取りおよび書き込み可能です。 以下のコードをコピーして試してください。コメントに手順が記載されています。
let msg = new SpeechSynthesisUtterance();msg.text = お元気ですか // 合成されるテキスト msg.lang = en-US // アメリカ英語の発音 (デフォルトで自動的に選択されます) msg.rate = 2 // 倍速 (デフォルト)は 1、範囲は 0.1 ～ 10) msg.pitch = 2 // 高音 (数値が大きいほどシャープになります、デフォルトは 1、範囲は 0 ～ 2) msg.volume = 0.5 //音量 0.5 倍 (デフォルトは 1、範囲は 0 ～ 1) window.speechSynthesis.speak(msg);
同時に、このオブジェクトは、使用できる一連のイベントに応答することもできます。
これらのイベントの助けを借りて、英語の文章内の単語数を数えるなど、いくつかの単純な関数を実行できます。
let count = 0; // 単語数 let msg = new SpeechSynthesisUtterance();let synth = window.speechSynthesis;msg.addEventListener('start',()=>{ // 読み取りを開始 console.log(`Text content: $ {msg.text}`); console.log(start);});msg.addEventListener('end',()=>{ //読み取り終了 console.log(end); console.log(`テキストの単語数 (単語): ${count}`) count = 0;});msg.addEventListener('boundary',()=>{ // 単語をカウントします count++;});試してみると、中国語は各単語をスペースで区切らないため、たとえば「ようこそ読者へ」は「ようこそ」と「読者」という 2 つの単語として自動的に認識されます。
音声合成参照:developer.mozilla.org/en-US/docs/…
SpeechSyntehesisUtteranc について話した後、SpeechSynthesis について見てみましょう。
SpeechSynthesis の主な機能は、音声の開始や一時停止などの一連の制御を実行することです。
これには、音声のステータスを示す 3 つの読み取り専用プロパティがあります。
SpeechSynthesis.pausedSpeechSynthesis.pending
音声を操作するための一連の方法もあります。
•SpeechSynthesis.speak()は音声の読み上げを開始し、同時に開始イベントをトリガーします。
•SpeechSynthesis.pause() は一時停止し、一時停止イベントをトリガーします。
•SpeechSynthesis.resume() が続行され、同時に再開イベントがトリガーされます。
•SpeechSynthesis.cancel()は読み上げをキャンセルし、同時に終了イベントをトリガーします。
これらの操作方法に基づいて、テキスト リーダーをさらに強化できます。
原点に戻る元の出発点に戻りましょう。上記の内容に基づいて、一部の Web サイトで記事の自動読み取りがどのように実装されているかを推測できます。
この Web サイトのフロントエンドが MVVM フレームワーク (Vue を例に挙げます) を使用している場合、記事のコンテンツはデータに保存され、必要な音声合成を構築するために使用できます。
もちろん、ajax リクエストを通じて記事を取得し、リクエストされたデータを解析して音声合成オブジェクトを構築することも可能です。
記事が HTML で直接書かれている場合、テスト後に次のようなカオスな構造であっても、この時点で DOM を解析する必要があります。
<div id=test> <p>1</p> <p>2</p> <ul> <li>3</li> <li>4</li> </ul> <table> <tr > <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> </tr> </table> <img src=https://www.baidu.com/img/bd_logo1.png 9</div>
innerText を通じてテキストを直接読み取ってから、音声合成オブジェクトを構築します。また、希望の順序で読み上げることもできます (画像は無視されます)。
もちろん、テーブルなどの特殊な構造を無視したい場合は、解析にエネルギーを費やして、不要なデータや DOM 要素を除外することができます。
何があっても、適切な解決策を見つけることができます~
ゴシップこの機能はまだドラフト段階にあり、広くサポートされていません。
繰り返しになりますが、この API はまだ運用環境に適用できません。
現在、より一般的なアプローチは、バックエンドでテキストを音声ファイルに合成し、それをフロントエンドでメディアとして再生する API (おそらくサードパーティ API) を構築することです。
かつて私が混乱していたときに、専門家による記事を読んだり、フロントエンド開発に関する上級の意見を読んだりしました。一つのことが私に深く印象に残りました。
ユーザーに最も近いフロントエンドは、ユーザーの視点に立って利用することも非常に重要な課題です。このような機能によってもたらされるメリットは他のビジネスに比べてはるかに少ないですが、よりユーザーに役立つ製品にするために、より多くの労力を費やす価値があるのもフロントエンド開発の精神です。
要約する上記は、編集者が紹介したあまり知られていない HTML5 音声合成機能です。ご質問があれば、メッセージを残してください。編集者がすぐに返信します。