フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援
フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援

しゃべるブログの作り方 Web Speech Synthesis APIを使った話すワードプレス記事

本日よりブログがしゃべるようになりました。
記事タイトル横のスピーカーのアイコンをクリックすると話し出します。

スピーカーのアイコンをクリックすると話します
スピーカーのアイコンをクリックすると話します

技術的には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から取り込んだコメントも読み上げてくれるので中々面白いものです。

しゃべるブログを作りたい方はスクリプトを紹介します。

会員限定コンテンツ

この記事はブロックされています。続きを読みたい方はログインをして下さい。会員ではない方は新規会員登録をして下さい。

ログインはこちら

新規会員登録はこちら

パスワードをメールで送信します。

コメント

  1. 2018/04/09(月) 00:29:29
    チームIWAI号外の新聞PDFファイルもあるので是非見て頂きたい。一人一人のコメントも載ってます。これは沼るね!! #カーリング #teamIWAI
  2. 2018/04/09(月) 00:29:29
    ご飯食べなきゃいけないし机の上のファイル見たいし店内うろうろしたいしトイレにも絵描いてるし、メイキング映像も見たいしコメントカードも描きたいし、90分だと時間足りなさすぎて5時間くらい欲しいお願いってなった
  3. 2018/04/09(月) 00:29:29
    そういえば熊本城復興の応援コメント的なの送ってファイルもらったなぁ
  4. 2018/04/09(月) 01:25:24
    ファイル欲しいし限定コメントも見たいよ でも生でも見たいよ生でバンド聞きたいし亮さんに会いたい でもそんな金はない。
  5. 2018/04/09(月) 01:25:24
    制作日:2009年9月14日|タイトル:ピクシブたん|コメント:pixiv2周年記念に描いたイラスト。クリアファイル貰ったっけなぁ。懐かしい。・・・そういえば、クリアファイルどこ閉まったんだろう|https://t.co/6gSCGIIQA4

記事に戻る

コメントを残す