CGI、JavaScriptやCSSの勉強の一環として、「ネット略語検索」を掲載しています。略語は、ネットワークに関連する書籍、新聞記事、ネット上の記事やニュース等から収集しました。検索のプログラムは、Perlで作成しました。スクリプトでPerlの内部処理は以前はeucで行っていましたが、今回はutf-8で行いました。 英語のテキストの発音に関連するJavaScriptについては、Web Speech APIのEXAMPLE 6を参考にしました。以下です。

Spoken text with attributes and events.

    
<script type="text/javascript">

 var u = new SpeechSynthesisUtterance();

   u.text = 'Hello World';

   u.lang = 'en-US';

   u.rate = 1.2;

   u.onend = function(event) { alert('Finished in ' + event.elapsedTime + ' seconds.'); }

   speechSynthesis.speak(u);

</script>

　実際の使い方としては、英単語または英語の文章を示し、ボタンをクリックすると発音するようにしたい。下の🔊を押すと”Hello. World.”と発音します。

　Hello. World. 🔊

この時のJavaScriptとhtmlは、次のようになります。
JavaScript

---

  
<script type="text/javascript">

function r(n){

  var u = new SpeechSynthesisUtterance();

   u.text = n;

   u.lang = 'en-US';

   u.rate = 0.9;

   u.pitch = 1.0;

   speechSynthesis.speak(u);

}
</script>

html

---

  
Hello. World. <button type="button" onclick="r('Hello. world.')"><span class="speaker">🔊</span></button>

---

※ 関数の引数、ここではnに文字列を使用できます。

　なお、ブラウザやデバイスによって、発声の速さが変化しますのでそれぞれに対応しなければなりません。
英語のテキストの発音については、拙稿の記事を参照して下さい。