もっと詳しく

皆さんこんにちは拡張機能ネタ3連続のなおこです。前回はピクチャー・イン・ピクチャー、前々回はYoutubeの低評価をもとに戻すやつなど、今までいろいろ紹介してきましたが、

今回は、ページ読み上げを行うことができる拡張機能をご紹介したいと思います。

ページの読み上げって需要あるの?って思うかもしれませんが、文章のチェックをする際に昔から国語が苦手だった私は誤字脱字や文章自体がおかしくなることが多く書いた文章を誰かに読んでもらいながら修正しなければ行けないという手羽が必要でした。

そんなときに音声合成で読み上げてくれる機能がついているgoogle通訳にコピペしてやる方法を見つけましたが、文字数制限があり長い文章は何度もコピペしなければならないなど不便が耐えませんでした。

その不便を解決しようと色々調べていたときに見つけた、拡張機能のRead Aloud: テキスト読み上げ音声リーダーです。

Read Aloud: テキスト読み上げ音声リーダーとは

Read Aloud: テキスト読み上げ音声リーダーはどんなものかというとWeb Speech APIを活用した拡張機能でいわゆるTTS(Text-to-Speech)という音声合成を用いて選択した範囲の文章やページ全体の文章などの読み上げを行うことができオープンソースでken107さんの他2021/12/09現在12名のcontributors開発されている拡張機能です。

Read Aloud: テキスト読み上げ音声リーダーのソースコード↓

GitHub – ken107/read-aloud: An awesome browser extension that reads aloud webpage content with one click
An awesome browser extension that reads aloud webpage content with one click – GitHub – ken107/read-aloud: An awesome browser extension that reads aloud webpage…

Web Speech APIは非同期音声認識や音声合成などをブラウザ単体で行える試験的に実装されたWebAPIです。

Web Speech APIについてはmozillaのサイトやw3cの非公式サイトなどで詳しい情報が公開されています。

Web Speech API – Web API | MDN
Web Speech API は、音声データをウェブアプリに組み入れることを可能にします。Web Speech API は、SpeechSynthesis (Text-to-Speech; 音声合成) と SpeechRecognition (Asynchronous Speech Recognition; 非同期音…

Web Speech API

Read Aloud: テキスト読み上げ音声リーダーをインストールしてみる

Read Aloud: テキスト読み上げ音声リーダーについて軽く解説してみましたが、実際に使ってみないと伝わらないのでインストール方法をお伝えしたいと思います。

今回はfirefoxやchromium派生のブラウザにもサポートされている拡張機能です。あまり有名ではない拡張機能は chromium 派生でしかサポートされていないことが多いですが今回の拡張機能はfirefoxにもサポートされているようです。

Google Chrome、Microsoft Edge、Opera、Braveの場合

chromium派生のブラウザであればgoogleのウェブストアのページからダウンロードを行うことができます。

手順は下記のURLに飛び、右上にある水色のchrome に追加するというボタンを押します。

その後権限の許可が求められるので拡張機能の追加をクリックすることで拡張機能のインストールを行うことができます。

Read Aloud: テキスト読み上げ音声リーダー
ワンクリックで現在のウェブページの記事を読み上げます。 40以上の言語をサポートします。

下記のgifはピクチャー・イン・ピクチャーのブログの際に使用したものです。インストールの手順は同じなので安心してください

gifはピクチャー・イン・ピクチャーのブログの際に使用したものです。インストールの手順は同じなので安心してください。

Firefoxの場合

Firefoxの場合もクリック数回でインストールすることができます。

手順は下記のURL飛びAdd to Firefoxをクリックし出てきたポップアップのAddをクリックしてインストールします。

Read Aloud: A Text to Speech Voice Reader – 🦊 Firefox (ja) 向け拡張機能を入手
Firefox 向け Read Aloud: A Text to Speech Voice Reader をダウンロード。Read out loud the current web-page article with one click. Supports 40+ languages.

下記のgifはYoutubeの低評価を再表示するのブログの際に使用したものです。インストールの手順は同じなので安心してください

Read Aloud: テキスト読み上げ音声リーダーを使ってみる

Read Aloud: テキスト読み上げ音声リーダーを無事インストールすることができたので

実際に使ってみたいと思います。使うと言ってもかんたんで、読み上げを行いたいページでアイコンをクリックしたりテキストを選択して数回クリックするだけで読み上げを行うことができます。

今回はGoogle chrome例にして解説するので適時ブラウザに合わせて読み解いてください。

アイコンから通訳

読み上げてほしいページに飛び、特徴的なメガフォンアイコンをクリックすることで読み上げを行うことができます。

https://blog.fascode.net/2020/08/19/how-to-send-a-pull-request-on-github/

選択した範囲を通訳

記事全部を読み上げなくても一部だけ読み上げればOKな場合は文章を選択肢右クリック後メニューから選択したテキストを読み上げるをクリックすることでかんたんに読み上げを行うことができます。

https://blog.fascode.net/2021/12/07/picture-in-picture-extension-pi/

オプション

Read Aloud: テキスト読み上げ音声リーダーには細かい読み上げの設定ができるオプションが存在しており、そのやり方もご紹介したいと思います。

やり方はかんたんで読み上げ中のときに停止ボタンを押します。

次に再生ボタンと歯車マークのボタンが表示されるので歯車マークのボタンをクリックします。

歯車マークをクリックすると細かいオプションを選ぶことができます。

スピードを変更したりピッチを変更して男性の声または女性の声にしたり読み上げ中のテキストを強調する機能を有効化したりすることができます。

Read Aloud: テキスト読み上げ音声リーダーのメリット、デメリット

ここまで、Read Aloud: テキスト読み上げ音声リーダーについてインストール方法や使い方を解説してきましたが、実際に半年以上使ってきて感じた2021/12/09時点でのメリットやデメリットをまとめたいと思います。

メリット

  • 選択した箇所を読み上げすることができる。
  • 読み上げ機能を使うことで誤字脱字が減った
  • 様々な言語に対応している
  • ピッチの調整ができる。
  • 読み上げ速度を調整できる。
  • 読み上げ音量を調整できる。
  • 比較的継続して開発が行われている。

デメリット

  • APIに文字数制限があるため文章の途中で一瞬再生が停止することがある。
  • URLなどを区別したりすることができない。
  • 一部のサイトで読み上げを行うことができない。

軽くまとめるといくつか気になる点もあるけど、比較的おすすめできる拡張機能ですね

個人的には自分自身で読み上げても気づかいない点があった際に誰かに読み上げもらうことで誤字脱字が見つかったりすることもあるので文章を書く作業をするときは必須の拡張機能ですね。

最後に

そんな感じでめちゃくちゃ便利な文章を読み上げすることができる拡張機能『Read Aloud: テキスト読み上げ音声リーダー』の紹介でした。

これからも便利な拡張機能を見つけたらブログにしていきたいと思います。(実はもう見つけてたりする。)

それではそれでは次のブログでお会いしましょう。

The post サイトのテキスト読み上げを行える拡張機能【Read Aloud: テキスト読み上げ音声リーダー】 first appeared on FascodeNetwork Blog.