本日よりブログがしゃべるようになりました。
記事タイトル横のスピーカーのアイコンをクリックすると話し出します。
技術的にはHTML5より導入されたWeb Speech Synthesis APIという技術を使っています。
ただし、このAPIに対応しているのは、SafariとChrome系ブラウザのみです。残念ながらFirefoxは未対応です。
iPhoneとAndroid系スマホからでもしゃべらせることができます。
実装するのは簡単です。以下のコードだけでできてしまいます。
<script> var $synthes = new SpeechSynthesisUtterance( "テキスト" ); $synthes.lang = "ja-JP"; //言語 $synthes.volume = 0.8; //音量 $synthes.rate = 1; //速度min 0～max 10 $synthes.pitch = 1; //音程 min 0～max 2 speechSynthesis.speak( $synthes ); </script>
ただし試してみた結果、いくつか問題があって、あまり長い文字数をしゃべらせるとクラッシュします。
クラッシュした場合はブラウザを再起動する必要があります。
またURLやHTMLタグ、記号もそのまま読み上げてしまうため、そういった聞いて意味の分からないものを削除したり、なにかに置き換えるといった処理が必要となります。
私の場合は文字数が長いとクラッシュする現象に悩まされたため「。」と「、」の句読点で文章を分割し、さらに指定された文字数を超えた場合は文章を分割して発声させるといった処理を加えています。
Twitterから取り込んだコメントも読み上げてくれるので中々面白いものです。
しゃべるブログを作りたい方はスクリプトを紹介します。
コメント
記事に戻る