【お知らせ】プログラミング記事の投稿はQiitaに移行しました。

Web Speech API のテンプレート

Web Speech API を使ってブログ記事を書くテンプレートです。

ベタ書きに近くあまり洗練されていませんが、叩き台としてソースを公開します。

目次

動作確認

音声の再生は環境に依存します。以下に選択肢が出ない言語は再生できません。

読み上げ速度

言語ごと

誤読に対応するため、必要に応じて読み上げ用のテキストを用意します。

これは何ですか?
これはペンです。
What is this?
This is a pen.
Qu'est-ce que c'est ?
C'est un stylo.

センテンスごと

枠だけ記述して、中身はスクリプトで自動生成します。

ブログのソース

ブログの設定(ヘッダのカスタマイズなど)はデフォルトのまま、コピペしただけで使えます。

CC0

スクリプトの本体は以下にあります。

参考

ブラウザの音声合成 API の主な使い方や資料をまとめました。

非同期処理に使用する Promise や async/await についてまとめました。

ボタンのデザインについて参考にしました。

スタイルシートの埋め込みについて参考にしました。