Согласно документации моя страница должна содержать
<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" не воспроизводится.
Любые идеи, как решить эту проблему?
Хитрость заключается в том, чтобы создать тег, загружающий библиотеку на лету, и внедрять ее в 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() в обратный вызов.