Web Speech API を使ってブログ記事を書くテンプレートです。
ベタ書きに近くあまり洗練されていませんが、叩き台としてソースを公開します。
目次
対応言語
Edge と Chrome はデフォルトでオンラインのエンジンが利用できます。
ローカルに言語を追加する方法は以下を参照してください。
音声設定
音声の再生は環境に依存します。以下に選択肢が出ない言語は再生できません。
読み上げ
漢字の誤読が見られる場合、<span s="読み方">
で注釈を加えます。
これは何ですか?
What is this?
Qu'est-ce que c'est ?
これはペンです。
This is a pen.
C'est un stylo.
ブログのソース
ブログの設定(ヘッダのカスタマイズなど)はデフォルトのまま、コピペしただけで使えます。
関連記事
手っ取り早く手元のテキストを読ませるためのコードです。
対訳以外の使い方を説明する記事です。
ブラウザの音声合成 API の主な使い方や資料をまとめました。
非同期処理に使用する Promise や async/await についてまとめました。
対応言語の調べ方です。情報が古いですが、スクリプトによって現状が調べられます。
参考
ボタンのデザインについて参考にしました。
スタイルシートの埋め込みについて参考にしました。