視覚障害者向け「読み上げ」機能を追加する方法

以下のコードをjavascript.phpに追加します。本文の先頭に「読み上げ」ボタンを追加します。

jQuery(function ($) {
  var isReading = false;
  var utterance;

  var playLabel = '<i class="fas fa-play"></i>読み上げ';
  var stopLabel = '<i class="fas fa-stop"></i>停止';
  var btn = $('<button id="read-btn" class="read-aloud btn btn-black">' + playLabel + '</button>');

  // 本文要素の先頭にボタンを追加
  $('.entry-content').prepend(btn);

  // 「読み上げ」ボタンクリックの場合
  btn.on('click', function () {
    // 本文要素が存在しない場合
    if (!$('.entry-content').length) {
      return;
    }

    if (!isReading) {
      // 読み上げが停止中の場合、本文のテキストを再生
      var text = $('.entry-content').text();
      utterance = new SpeechSynthesisUtterance(text);
      utterance.lang = 'ja-JP';
      utterance.rate = 1.3;
      speechSynthesis.speak(utterance);

      // 「読み上げ」ボタンを「停止」に変更
      btn.html(stopLabel);
      btn.attr('aria-pressed', 'true');
      isReading = true;

      // 音声の再生が正常に終了した場合
      utterance.onend = function () {
        btn.html(playLabel);
        btn.attr('aria-pressed', 'false');
        isReading = false;
      };

    } else {
      // 読み上げ中の場合、音声の再生を強制停止
      speechSynthesis.cancel();
      btn.html(playLabel);
      btn.attr('aria-pressed', 'false');
      isReading = false;
    }
  });

  // ページの離脱・ロードの場合
  $(window).on('beforeunload unload', function () {
    speechSynthesis.cancel();
  });
});

以下のコードをstyle.cssに追加します。

.read-aloud {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 200px;

  i {
    margin-right: 5px;
  }
}