`, id: "1693", lang: "pl-PL", key: "8ZbVMP00rujZ" }); });

Krótki wpis o mojej eksperymentalnej implementacji Web Speech API a konkretnie interfejsu SpeechSynthesis który pozwala na dodanie możliwości odtwarzania wersji audio każdego postu.

Implementacja dotyczy bezpośrednio kodu szablonu WordPress, ale po wprowadzeniu kilku drobnych zmian można jej używać w dowolnym przypadku.

Po udoskonaleniu tego rozwiązania fajnie byłoby udostępnić je jako wtyczkę.

Eksperymentalna wersja kodu:

<div id="speak-container" style="display: none;">
  <button id="speak-button"></button>
</div>

<script>
  // Check browser support
  if ('speechSynthesis' in window) {
    // Cancel audio reader before page leave
    window.onbeforeunload = () => {
      window.speechSynthesis.cancel();
    }
    // Wait for voices initialisation
    window.speechSynthesis.onvoiceschanged = () => {
      const speakContainer = document.getElementById('speak-container');
      const button = document.getElementById('speak-button');
      const buttonTextPlay = "▶ Play audio version of the post";
      const buttonTextStop = "⏹ Stop audio version";
      let isPlaying = false;
      // Show play button if user has any voices installed
      if (window.speechSynthesis.getVoices().length) {
        button.textContent = buttonTextPlay;
 	speakContainer.style.display = 'initial';
      }

      const startAudioReader = (text) => {
        const msg = new SpeechSynthesisUtterance();
        // Set the text.
        msg.text = text;
        // Set the lang from Polylang plugin 
        msg.lang = '<?php echo str_replace('_', '-', get_locale()); ?>';

        // Queue this utterance.
        window.speechSynthesis.speak(msg);
      }

      // Set up an event listener for when the 'Play audio' button is clicked.
      button.addEventListener('click', () => {
        isPlaying = !isPlaying;
        if (!isPlaying) { 
          window.speechSynthesis.cancel();
          button.textContent = buttonTextPlay;
          return;
        }
        startAudioReader(`
          <?php echo str_replace('${', '\${', wp_strip_all_tags( get_the_content())); ?>
        `);
        button.textContent = buttonTextStop;
      });
    }
  }
</script>