般若心経をブラウザに読んでもらう（＋簡単Javascript解説）

もうすぐ50歳になるおじさんなので、新しい情報にはかなり疎くなっております。若者達から色々教えてもらうように心がけているのですが、もう記憶力が弱いのか、周囲があまりカバーしてないのか、はたまた、色々問題があって人に言うほどではないと思ってしまうのか、よくわかりませんが、いつのまにかWebブラウザは日本語どころか般若心経もダイレクトに読み上げてくれるようになってるみたいですね。ツィッタで、ブラウザが日本語読み上げもできるという話が流れてきたので、そういえばこれでお経を読んでもらえばマニ車並みの功徳が積めるかも…と思って作ってみたのがこちらです。

knagasaki.github.io

もちろん、ひらがなで読み方を与えてごにょごにょすると普通に読めてしまうのですが、大部分はそのままでも読めてしまうというのが少々感動するところです。

ソースコードは以下の頁でも確認できます。

github.com

ポイントはいくつかありますが、一番基本になるのは以下の箇所ですね。

         var ut = new SpeechSynthesisUtterance();
         if(e.getAttribute("data-r") == undefined){
           ut.text = e.textContent;
         }
         else{
           ut.text = e.getAttribute("data-r");
         }      
         ut.lang='ja-JP';
         ut.rate = 1.4;
         speechSynthesis.speak(ut);

般若心経のテキストは<span>で分割していて、共通のclassを与えることで、forEachで回して処理できるようにしています。その上で、一部の<span>にはdata-r classで読み方の情報をひらがなで与えています。（あまりに間違い方がひどかったので！）各要素のテキストは、.textContentでとれますので、あとは言語.langとレート.rateの値を与えて、さらにそれをspeechSynthesis.speak() に渡せば読んでくれます。

レートに関しては、こちらの頁に詳細が書いてあります。 0.1 から 10 の範囲で設定できるようで、デフォルトは1とのことです。

言語設定はこちらの頁に一応書いてあるのですが、具体的にどの言語に対応するかという情報は書いてないようですね。こちらをみるとBCP47準拠の書き方をしろ、ということになっていますので、あとはブラウザ依存ということになるのでしょうか？

こちらの頁には他にもいくつか設定できるプロパティがリストされているので、ちょっと試してみると面白そうです。

それから、上記の作例だと、読んでいるフレーズだけが赤くなります。このように色を変える方法には色々あるのですが、とりあえず「1. 読んでいるフレーズに色つきクラスを与える」「2. 読み終わったらそのフレーズから色つきクラスを外す」という風にしてみています。

「読んでいる」と「読み終わったら」というのは、こういうときは大体、イベントハンドラを利用することが多いです。こちらの頁（再掲）には「イベントハンドラー」という項目がありますので、ここを眺めてみると、SpeechSynthesisUtterance.onstart (en-US)、SpeechSynthesisUtterance.onend (en-US)、というのがあります。これですね。それぞれの頁の用例に沿って、クラスをつけたり外したりしてみます。

         ut.onstart = function(){
           e.classList.add('read-text');
         }
         ut.onend = function(){
           e.classList.remove('read-text');      
         }

もちろん、これができるということは、対応する画像があったらそれを頁のどこかに表示してみるとか、地図も出してみるとか、いろんなことができてしまいますね。これだけで、ああいうものが作れてしまうのですね。時代はどんどん進みますね。