Qiita 記事読み上げブックマークレット

3000文字Tips - 知ると便利なTipsをみんなへ届けよう 向けのイベント記事です。

Web Speech API

Web Speech API は ブラウザ上でSpeechSynthesis(音声合成)とSpeechRecognition(音声認識)の機能を提供する API です。

使い方は下記記事がわかりやすいです。

詳細の仕様は公式のドキュメントをご参照ください。

ブックマークレット

私はメインブラウザを Vivaldi にしています。
クイックコマンド を使うとブックマークレットが呼び出しやすいため、ちょっとした JavaScript のコードを登録して実行できるようにしています。

読み上げたいテキストを元に SpeechSynthesisUtterance のオブジェクトを作成、speechSynthesis.speak()を呼び出せば再生されます。

speak() は SpeechSynthesisUtterance を再生のキューにつむようになっていて、停止するときはcancel() を呼び出してキューの削除をすると停止されます。

読み上げの開始

javascript:speechSynthesis.speak(new SpeechSynthesisUtterance(document.getElementById('personal-public-article-body').innerText))

停止（読み上げキューの削除）

javascript:speechSynthesis.cancel()

読み上げブックマークレットはいろんなところで使えると思うので、ぜひご活用ください。