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

Web Speech API のテンプレート

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

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

目次

動作確認

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

読み上げ速度

言語ごと

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

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

センテンスごと

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

ブログのソース

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

※ テスト用の簡易的な使用方法です。本格的に使うのであれば、ブログの管理画面で「設定 → 詳細設定 → headに要素を追加」でカスタマイズした方が良いでしょう。カスタマイズには一定の知識が必要となるため自己責任でお願いします。

CC0

参考

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

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

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

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