Zenn
🎴

JavaScriptで読み上げスクリプトを作る

2021/05/11に公開
JavaScript
WebSpeechAPI
tech

「HTTPステータスコード百人一首」は、HTTPのステータスの説明文を読み上げて、取り札をとる素敵なカードゲームです。２名以下でも遊べるように、読み上げツールを自作します。

HTTPステータスコード百人一首とは？

揚げピーナッツさんが作成した新しいカードゲームです。

お馴染みの HTTPステータスコードで、百人一首ができるというオシャレな作品です。

本来の推奨人数は「札の読み手：１名、札の取り手：2〜4名」ですが、「札の読み手：0名」で遊べるように読み上げツールを作りました。

完成品はこちら

リンク先に、実際に動かせるツールを置いています。
是非、自主トレにお使いください！

https://classynode.com/2021/05/httpstatus_cardgame/#index_id1

ソースコード

HTML

<div id="message">
  <p id="tool-title">HTTPステータスコードの読み上げ</p>
  <input type="checkbox" id="status-select" name="status-select" checked="checked">
  <label for="status-select">ステータスを読み上げる</label><br>
  <input type="checkbox" id="code-select" name="code-select" checked="checked">
  <label for="code-select">コードを読み上げる</label><br>
  速度：
  <select id="speed-select">
    <option value="0.5">ゆっくり</option>
    <option value="0.8" selected="selected">ふつう</option>
    <option value="1.2">はやい</option>
  </select><br>
  <button id="speak-btn">読み上げ</button>
</div>

JavaScript

const speedSelect = document.querySelector('#speed-select')
const statusSelect = document.querySelector('#status-select')
const codeSelect = document.querySelector('#code-select')
const speakBtn = document.querySelector('#speak-btn')
  
speakBtn.addEventListener('click', function() {
  
  //jsonデータは、ここでは一部省略
  let card = [{"code":"504","status":"Gateway Time out","reading":"ゲイトウェイ タイム アウト ","description":"ゲートウェイが時間内にレスポンスを返す事ができませんでした。"},{"code":"503","status":"Service Unavailable","reading":"サービス アナヴェイラブル ","description":"リクエストを受け付ける準備ができていません。"}]
  
  card = shuffle(card)
 
  let talk = new SpeechSynthesisUtterance()
  talk.rate = speedSelect.value
  talk.lang = "ja-JP"
  talk.pitch = 0.8;
  let msg = "OKを押すと、次の札を読み上げます"

  for(let i in card) {
    talk.text = card[i].description
    if( statusSelect.checked )
      talk.text += card[i].reading
    if( codeSelect.checked )
      talk.text += "。" + card[i].code
      
    speechSynthesis.speak(talk)

    if(! confirm( "OKを押すと、この札の情報を表示します" ) )
    	break
     
    speechSynthesis.cancel()

    if( i == card.length -1 ) 
      msg = "お疲れ様でした！"
    if( ! confirm(card[i].code + ":" + card[i].status + "\n\n" + msg) )
    	break
  }
  speechSynthesis.cancel()
})
const shuffle = (array) => {
  for(i = array.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1))
      const tmp = array[i]
      array[i] = array[j]
      array[j] = tmp
  }
  return array
}

コーディング中に困ったこと

コーディング中に困ったこと・回避方法を、メモとして書き残しておきます。

  • ループ２周目から、読み上げられなかった。
    →ループの中で、speechSynthesis.cancel()を呼んだらうまくいった。

  • 札の読み上げ前に効果音を入れたかった。しかし、読み上げとタイミングが合わない。
    →これは諦めた。

  • 日本語APIは、英単語の読み上げが不自然だった。URIをユリと読んでしまう。
    →カタカナ英語のデータを作り、これを読み上げることにした。

まとめ

HTTPステータスコード百人一首は、揚げピーナッツさんのサイトに各種ストアへのリンクがあります。素敵なゲームですので、是非お買い求めください。

またツールおよびコードの公開について、揚げピーナッツさんにご快諾いただきました。
　誠にありがとうございます。

最後まで読んでいただき、ありがとうございました。

Discussion