ResponsiveVoice - 避免将 API 密钥硬编码到 index.html

Question

根据我的页面必须包含的文档

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

我想避免将我的 API 密钥硬编码到 index.html 中，并将其保存在单独的文件中。我尝试使用 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.log(responsiveVoice.getVoices());
    responsiveVoice.speak('Hello world')
}
document.body.appendChild(rvScript);

我在控制台中获得了声音列表，但“Hello world”没有播放。

任何想法如何解决这个问题？

Answer 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();
};