投稿者: BlogMK

　Webでテキストを読み上げる方法が2020年8月20日に、W3C Community Group Draft Reportに発表されていました。⇒ Web Speech API
その中の音声合成の例5と6について。

例５　テキストの読み上げ

<script type="text/javascript">
  speechSynthesis.speak(new SpeechSynthesisUtterance('Hello World'));
</script>

例６　読み上げテキストの属性とイベント

<script type="text/javascript">
  var u = new SpeechSynthesisUtterance();
  u.text = 'Hello World';
  u.lang = 'en-US';
  u.rate = 1.2;
  u.onend = function(event) { alert('Finished in ' + event.elapsedTime + ' seconds.'); }
  speechSynthesis.speak(u);
</script>

　それで、例６で、edgeとchromeで読み上げてみました。
MS edge

Google chrome

　ブラウザによって、音が異なるので調整をしなければならない。rateを変えれば、読む速度を変えられる。スマホでも、チェックしなければならい。

　実際の使い方としては、英単語または英語の文章を示し、ボタンをクリックすると発音するようにしたい。下の🔊を押すと”Hello. World.”と発音します。

　　Hello. World. 🔊

次のサイトを参照すると、引用されたサイトが紹介してあったので、オリジナルを参照した。
Web Speech APIの実装 | 前編 Speech Synthesis API | CodeGrid

プログラムで発声の言語（イギリス英語、アメリカ英語）を変えることはできたが、発声の種類（女性、男性）を指定する方法が分からない。次のサイトに説明があります。https://developer.mozilla.org/ja/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API

4月22日に加筆。

上掲のWeb Speech APIの実装 | 前編 Speech Synthesis API | CodeGridに対応している言語の種類を表示する方法が掲載されていたので調べました。Chromeは23種に対応。※ 例を削除してしまった。

Firefoxでは２種類
Microsoft Haruka Desktop – Japanese
Microsoft Zira Desktop – English (United States)

Operaでは、１種類。Harukaか。

以上、４個のブラウザはWindows11での結果です。

4月27日
　次のサイトに様々な例のスクリプトがある。https://github.com/codegrid/2016-web-speech-api/find/gh-pages

SSML Speech Synthesis Markup Language

2022年12月2日
AudioContext.decodeAudioData() メソッドで音声ファイルから生成されたり。 AudioBuffer に入れた後、その音声は AudioBufferSourceNode に渡せば再生できます。

これらのオブジェクトは短い、一般的には 45 秒未満の、断片的な音声を保持するために設計されています。