ResponsiveVoice — избегайте жесткого кодирования ключа API в index.html

Согласно документации моя страница должна содержать

<script src = "https://code.responsivevoice.org/responsivevoice.js?key=YOUR_UNIQUE_KEY"></script>

Я хотел бы избежать жесткого кодирования моего ключа API в index.html и хранить его в отдельном файле. Я попытался добавить скрипт responsivevoice, используя js, например:

const rvScript = document.createElement('script');
const api_key = "XXXXXXXX"
const src = 'https://code.responsivevoice.org/responsivevoice.js?key=' + api_key;
rvScript.setAttribute('src',src);
rvScript.onload = () => {
    console.info(responsiveVoice.getVoices());
    responsiveVoice.speak('Hello world')
}
document.body.appendChild(rvScript);

Я получаю список голосов в консоли, но "Hello world" не воспроизводится.

Любые идеи, как решить эту проблему?

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
210
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Хитрость заключается в том, чтобы создать тег, загружающий библиотеку на лету, и внедрять ее в DOM только тогда, когда она нам нужна. Идея здесь заключается в том, что мы создаем функцию, которую мы можем вызывать на страницах, где нам нужна сторонняя библиотека, и динамически создавать и внедрять тег в приложение.

const loadDynamicScript = (callback) => {
  const existingScript = document.getElementById('scriptId');

  if (!existingScript) {
    const script = document.createElement('script');
    script.src = 'url'; // URL for the third-party library being loaded.
    script.id = 'libraryName'; // e.g. responsivevoice or googleMaps
    document.body.appendChild(script);

    script.onload = () => {
      if (callback) callback();
    };
  }

  if (existingScript && callback) callback();
};

На самом деле была еще одна проблема. Вы должны добавить resposiveVoice.init() в обратный вызов.

Jirmed 14.12.2020 13:27

Другие вопросы по теме