官公庁や地方自治体のホームページによくある音声合成による読み上げ機能、

●株式会社日立社会情報サービスさんのアクセシビリティ・サポーター「ZoomSight」
https://www.hitachi-sis.co.jp/service/dcom/zoomsight/

●HOYA株式会社さんの音声合成ソフトウェア「ReadSpeaker」
https://readspeaker.jp/

上記のようなサービスにて実装されています。
導入例が多く精度が高そうです。

公的機関のホームページは読み上げ機能以外にも、
「ZoomSight」のように背景色の変更や文字サイズ変更等様々な閲覧機能がありますが、
これは高齢者や障害者を含め、誰もがホームページで提供される情報を
支障なく利用できるように作成する必要がある為のようです。

参考：総務省『公的機関に求められるホームページ等のアクセシビリティ対応』
https://www.soumu.go.jp/main_content/000438394.pdf

上記ページの規格を満たすものなのかはわかりませんが、
他にも読み上げのサービスは

●Google Cloud Text-to-Speech
https://cloud.google.com/text-to-speech?hl=ja

●Amazon Polly
https://aws.amazon.com/jp/polly/

●ResponsiveVoice Text To Speech
https://responsivevoice.org/

など数多く提供されています。

ただどれも有料のサービスであったり
無料枠が決まっていたり、
ハードルが高そうだったり・・・
あまり気軽に利用できるものではなさそうです。

そこで今回、こういったサービスを利用せず、
Web APIを使った音声合成を導入すべく、
Web Speech APIのSpeechSynthesisを動作検証してみました。

SpeechSynthesis（Web Speech API）

Web Speech APIには
・SpeechSynthesis（Text-to-Speech 音声合成）
・SpeechRecognition（音声認識）
の二つの要素があります。

参考：MDN Web Docs
https://developer.mozilla.org/ja/docs/Web/API/Web_Speech_API

SpeechRecognition（音声認識）は
SiriとかアレクサとかCortanaとかのような声の聞き取りですが、
今回検証するのは『SpeechSynthesis（Text-to-Speech 音声合成）』の読み上げ機能です。

SpeechSynthesisはWeb APIを使うだけなので費用はかかりませんし、
導入手順も比較的簡単なようです。

以下ように簡単なhtmlを読み上げさせてみました。

→SpeechSynthesisテストページ1
on CodePen.

以下はOS、ブラウザごとの挙動です。
※検証端末：macOS Catalina 10.15.7／Windows 10 Home 20H2 19042.867

Mac Chrome バージョン：91.0.4472.77　

→途中で停止
・その後、再生ボタンをクリックしても再生されない（停止ボタンクリック →　再生ボタンクリックで再生可能）

Mac Safari バージョン14.1 (15611.1.21.161.5, 15611)　

→全て読み上げ
・『行ったら』 を 『おこなったら』と読み間違える
・テーブル内の『150』『200』を読み飛ばしてしまう

Mac Firefox 88.0.1 (64 ビット)

→全て読み上げ
・『行ったら』　 を 『おこなったら』と読み間違える
・テーブル内の『150』『200』を読み飛ばしてしまう
※Mac Safariと同様

Win Chrome バージョン：91.0.4472.77

→途中で停止
・その後、再生ボタンをクリックしても再生されない（停止ボタンクリック →　再生ボタンクリックで再生可能）
※Mac Chrome と同様

Win Edge（バージョン：91.0.864.37）

→全て読み上げ
・『行ったら』　を 『いったら』と正しく読む
・テーブル内の『150』『200』を飛ばさず読む

Win Firefox 89.0 (64 ビット)

→全て読み上げ
・Edgeと同様に間違いなく、読み飛ばさずに最後まで読んだ
・ただし、検証ブラウザの中で一番読み上げが不自然で聞き取りづらく、声が暗い

各ブラウザの共通動作

・scriptタグ内のソースも読み上げる
・画像のaltやinputのvalueは読まれない
※.textContentで取得できたテキスト情報のみ読み上げる

意外だったのは、
・Edgeが一番優秀
・Mac、Win共にChromeは長文の読み上げができない
ということです。

Chromeの動作は
コラムの読み上げなどに使う場合は致命的です。

ソースに誤りがあるのかと思ったのですが誤りではないようで、
CanIuseにもChromeの注釈として同様の症状が書かれていました。

参考：Can I use…
https://caniuse.com/?search=Speech%20Synthesis
※『stops playback after about 15 seconds・・・』

なぜChromeだけが止まるのか？

Firefoxの場合、
Mac、Winそれぞれ違う声だったのですが、

Chromeの場合、
Mac、Win共に同じ声に聞こえます。

そして、この同じ声のChromeだけが
途中で読み上げが止まってしまいました。

読み上げが途中で止まってしまう原因はわかりませんでしたが、
Chromeだけが止まってしまう原因は、
以下のMDN Web Docsのデモサイトでテストすることでわかりました。

https://mdn.github.io/web-speech-api/speak-easy-synthesis/
※上手く再生されない場合は、このページの『停止ボタン』をクリックしてから試してください。

上記デモサイトでは、
getVoices() というメソッドを使って
使用デバイスで読み上げるられる声が選択できるように作られているのですが、
ブラウザごとに選択できる声が違うことがわかります。

確認したところ読み上げが途中で止まってしまうのは
『Google 日本語』
を選択したときのみの症状でした。

MacのChromeで『Kyoko』、
WinのChromeで『Microsoft Haruka』を選択した場合は全て読み上げます。

また、この『Google 日本語』は
他のブラウザの声の選択肢には表示されない、
Chrome独自の声のようです。

今回作成したコード内では、
日本語（ja-JP）しか指定していないので、
どの声で読み上げさせるかはブラウザが割り当てています。

以下はブラウザが割り当てた声です。
※ブラウザ、OSのバージョンは上記と同じ

Mac Chrome　→『Google 日本語』

・Chromeのみ使用可、Macの【システムの声】には存在しない

Mac Safari　→『Kyoko』

・Macの【システムの声】で選択されていた声

Mac Firefox　→『Kyoko』

・Macの【システムの声】で選択されていた声

Win Chrome　→『Google 日本語』

・Chromeのみ使用可、Winの【音声を選択する】には存在しない

Win Edge　→『Microsoft Nanami Online(Natural)』

・Edgeのみ使用可、Winの【音声を選択する】には存在しない

Win Firefox　→『Microsoft Haruka』

・Winの【音声を選択する】で選択されていた声

ChromeやEdgeのように独自の声を持っていないSafariやFirefoxは
使用端末の声で読み上げます。

Macの『Kyoko』は【システム環境設定】ー【アクセシビリティ】ー【スピーチ】ー【システムの声】で選択されている声、
Winの『Microsoft Haruka』は、【設定】ー【簡単操作】ー【ナレーター】ー【音声を選択する】で選択されている声でした。

確認の為、
Macの【システムの声】にある『Otoya』に変更して、再生ボタンをクリックすると、
Safari、Firefox共に男性の声で読み上げました。

ただし、【システムの声】の中には、他も『Siri（男性）』、『Siri（女性）』がいるのですが、
どちらを選択してもSafari、Firefox共に『Otoya』か『Kyoko』の声が聞こえてきました。
getVoices()でSiriが表示さないことからSpeechSynthesisでは使えない声だと思います。
（もしくは『Siri（男性）』＝『Otoya』、『Siri（女性）』＝『Kyoko』？）

Winの場合も【音声を選択する】の中には『Microsoft Haruka』以外に
『Microsoft Ayumi』、『Microsoft Ichiro』がいるのですが、
Winでどの声に変更しても、Firefoxの読み上げは『Microsoft Haruka』が行いました。
こちらもFirefoxではgetVoices()で『Microsoft Haruka』しか取得できないことから、
Win FirefoxでSpeechSynthesisの日本語読み上げを行えるのは『Microsoft Haruka』だけなのだと思います。

SpeechSynthesisは、
端末がもつ声を全て使えるわけではなく、
ブラウザごとに使用できる端末の声に制限があるようです。

Chromeの読み上げは『Kyoko』『Haruka』にお願いする

個人的な感想も含みますが、
『Microsoft Nanami Online(Natural)』は抑揚たっぷり読み上げ、名前の通り発音も自然です。
html内の「商品1」の後のコロンも読み上げ、scriptタグ内の引用符まで読み上げる丁寧さです。

『Kyoko』も『Nanami』にはかないませんが充分聞き取りやすく感じました。
漢字の読み間違いもありましたが、他の声でも人間でも多かれ少なかれあると思うので許容範囲ですが、少し早口で、重要な価格を読み飛ばしてしまったのは問題で、これに関してはhtmlソースの書き方等、工夫が必要です。
（もちろん、rateで読む速さは設定できますが、遅くしても読み飛ばす動作は変わりませんでした）

『Microsoft Haruka』は、
繰り返し書いてしまって申し訳ないのですが、
一番読み上げが不自然で聞き取りづらく、声が暗いと感じました。
ただ庇うわけではありませんがちゃんと全文読み上げてくれます。

『Google 日本語』は『nanami』の次くらいに聞き取りやすいのですが、
現状15秒以上読み上げできません。

そこで、
MacのChromeの読み上げは『Kyoko』、
WinのChromeの読み上げは『Haruka』にお願いするために、
以下のようにソースを追記しました。

→SpeechSynthesisテストページ2
on CodePen.

これで検証ブラウザ全てで最後まで読み上げさせられるようになりました。

あとがき

単語の読み上げ程度であれば簡単に使えるSpeechSynthesisでしたが、
現状では全文（15秒以上）読み上げさせるだけでも、工夫が必要でした。

また、全文読み上げさせることはできましたが、
読み上げの速さや声の高さなどは、
読み上げる声ごとに違う為調整が必要だと感じました。

そして今回行った読み上げる声の変更も、
その端末に『Kyoko』、『Haruka』がいることが前提なので、
完璧とは言えずこちらももう一工夫必要です。

上であげたサービスに近づけるには、相当長い道のりだと思います。

そもそもMDN Web Docsに『これは実験的な機能です。』と書かれており、
SpeechSynthesisの仕様変更やブラウザのアップデートのたびに
動作が変わる可能性があり、サービスとして導入するのは非現実的かもしれません。
（この検証結果も数ヶ月で変わってしまう可能性があります・・・・）

個人的には、多少の費用がかかっても使い勝手の良い読み上げサービスを探すのが手っ取り早いなと感じたSpeechSynthesisの検証結果でした。