ResponsiveVoice

Question

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

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

我想避免将 API 密钥硬编码到 index.html 中，并将其保存在单独的文件中。我尝试使用 js 添加 responsivevoice 脚本，例如：

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

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

ResponsiveVoice - avoid hardocoding API key into index.html

javascript