src/NCBS/WebsiteBundle/Resources/views/General/text_to_speech_js.html.twig line 1

Open in your IDE?
  1. {# nColNum must be passed as an argument to the twig include #}
  3. <script>
  5. {% set nAudioRate = app.session.get("current_audio_rate") %}
  6. {% if not nAudioRate is null %}
  7.     MultiAudioElementTTS.globalRate = {{ nAudioRate }};
  8. {% endif %}
  10. const tts{{ nColNum }} = new MultiAudioElementTTS();
  11. let stt{{ nColNum }} = null;
  13. tts{{ nColNum }}.go = function() {
  14.     this.loadTextAndStartOrPause(
  15.         document.querySelector("#tts{{ nColNum }}").innerText,
  16.         "{{ app.session.get('user_id') }}"
  17.     );
  18. }
  20. tts{{ nColNum }}.next = function() {
  21.     const nextButton = document.querySelector("a.nav-arrow-next");
  22.     const url = URL.parse(nextButton.href);
  23.     url.searchParams.append("ttsautoplay", "{{ nColNum }}");
  24.     window.location = url;
  25. }
  27. tts{{ nColNum }}.onStateChange = function() {
  28.     if (this.isLoading){
  29.         $("#readbutton{{ nColNum }}").hide();
  30.         $("#loadingbutton{{ nColNum }}").show();
  31.         $("#stopbutton{{ nColNum }}").hide();
  32.         $("#pausebutton{{ nColNum }}").hide();
  33.     } else {
  34.         $("#loadingbutton{{ nColNum }}").hide();
  35.         if (this.hasStarted){
  36.             $("#stopbutton{{ nColNum }}").show();
  37.             if (this.canResume) {
  38.                 $("#readbutton{{ nColNum }}").show();
  39.                 $("#pausebutton{{ nColNum }}").hide();
  40.             } else {
  41.                 $("#readbutton{{ nColNum }}").hide();
  42.                 $("#pausebutton{{ nColNum }}").show();
  43.             }
  44.         } else {
  45.             $("#readbutton{{ nColNum }}").show();
  46.             $("#stopbutton{{ nColNum }}").hide();
  47.             $("#pausebutton{{ nColNum }}").hide();
  48.         }
  49.     }
  50. }
  52. tts{{ nColNum }}.onAllElementsEnded = function() {
  53.     const nextButton = document.querySelector("a.nav-arrow-next");
  54.     if (nextButton && nextButton.href) {
  55.         const endpoint = new URL("https://newchristianchatbot.org/api/tts/");
  56.         endpoint.searchParams.append("au", "{{ app.session.get('user_id') }}");
  57.         endpoint.searchParams.append("content", "{{ app.session.get('ui_str')['texttospeech.continueprompt']|raw }}");
  58.         const audio = document.createElement("audio");
  59.         audio.src = endpoint;
  60.         {# use setTimeout rather than `audio.addEventListener("ended", ...)` #}
  61.         {# to start listening for a response before the TTS finishes completely #}
  62.         setTimeout(() => {
  63.             if (stt{{ nColNum }} != null) {
  64.                 stt{{ nColNum }}.start();
  65.             } else if (confirm("{{ app.session.get('ui_str')['texttospeech.continueprompt']|raw }}")) {
  66.                 tts{{ nColNum }}.next();
  67.             }
  68.         }, 1500);
  69.         audio.play();
  70.     }
  71. }
  73. if (typeof SpeechRecognition !== "undefined" && typeof SpeechToText !== "undefined") {
  74.     stt{{ nColNum }} = new SpeechToText("{{ app.request.locale }}");
  75.     for (const phrase of ["{{ app.session.get('ui_str')['speechtotext.yes']|raw }}", "{{ app.session.get('ui_str')['speechtotext.okay']|raw }}"]) {
  76.         stt{{ nColNum }}.addPhrase(phrase, () => tts{{ nColNum }}.next());
  77.     }
  78. }
  80. {% if app.request.query.get("ttsautoplay") == nColNum~"" %}
  81.     addEventListener("DOMContentLoaded", () => tts{{ nColNum }}.go());
  82. {% endif %}
  84. </script>