JavaScript로 읽기 스크립트 만들기

'HTTP 상태 코드 100인 1곡'은 HTTP 상태를 낭독하는 설명문으로 카드를 뽑는 최고의 카드 게임이다.2명 이하도 놀 수 있도록 스스로 낭독 도구를 제작할 수 있다.

HTTP 상태 코드 100인 1곡은?

3땅콩 튀김 제작된 새로운 카드 게임.
잘 아는 HTTP 상태 코드로 백 명이 한 곡씩 이런 멋을 낼 수 있는 작품이다.
원래 추천한 인원은'카드읽기인:1명, 픽업인: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
}

인코딩 중 겪는 어려움

인코딩에서 겪는 어려움과 회피 방법을 필기로 쓰다.

순환 2주 차부터 읽지 못했다.
→ 순환 중, speechSynthesis.cancel () 을 부르면 순조롭다.

나는 카드를 읽기 전에 효과음을 넣고 싶다.하지만 낭독은 시기와 맞지 않는다.
→나는 이것을 포기했다.

일본어 API의 영어 단어는 읽기에 매우 부자연스럽다.유리를 백합으로 읽어.
→ 가명 영어의 데이터를 만들어 읽는다.

총결산

HTTP 상태 코드 100인 1곡.링크가 있습니다.좋은 게임이니까 꼭 구매해주세요.
도구와 코드 공개에 대해 땅콩 튀김 선생도 흔쾌히 승낙했다.
감사합니다.
끝까지 읽어주셔서 감사합니다.