使用KokoroJS时遇到“Automatic publicPath is not supported in this browser”错误的求助

嘿，我看到你在尝试用KokoroJS做一个简单的HTML页面实现文本转语音，还参考了它的demo，结果碰到了“Automatic publicPath is not supported in this browser”这个头疼的错误对吧？别慌，我来给你分享几个大概率能解决问题的办法～

这个错误本质上是KokoroJS在加载依赖的资源（比如WebAssembly文件、语音模型）时，没法自动确定资源的加载路径，尤其是在纯原生HTML+ES模块的环境里，没有构建工具帮你处理路径配置的话，就容易踩这个坑。

下面是具体的解决步骤：

• 手动设置publicPath
  在你的TextToSpeech类文件最开头，加上一行代码手动指定资源的基础路径，让库能正确找到它需要的文件：

  // 把publicPath设为当前HTML页面所在的目录
  (window as any).__webpack_public_path__ = window.location.href.substring(0, window.location.href.lastIndexOf('/') + 1);
  

  这样就能帮库绕过自动检测publicPath的逻辑，直接用你指定的路径加载资源。

• 检查资源文件的位置
  确保KokoroJS相关的资源文件（比如.wasm后缀的文件、语音模型文件）和你的HTML页面在正确的相对路径下。如果是通过npm安装的库，记得把node_modules里KokoroJS的静态资源复制到你的项目静态目录里，或者在代码里明确指定这些资源的相对路径。

• 试试用CDN引入库
  要是不想折腾本地路径配置，你可以直接用CDN方式引入KokoroJS的UMD版本，这样能省去很多路径相关的麻烦。在你的HTML里添加对应的script标签引入库之后，就能在TS类里直接使用全局的KokoroTTS对象，不用再处理模块导入的路径问题。

• 调整TypeScript编译配置
  如果你用tsc编译代码，检查下tsconfig.json的配置：

  • 把module设置为ESNext或者ES6，保证编译后的模块能在浏览器里正常加载；
  • target设置为ES2020及以上的版本，适配现代浏览器；
  • outDir的路径要和你的HTML页面所在目录对应，避免编译后的文件路径混乱导致资源找不到。

另外提一句，你参考的demo大概率用了Vite、Webpack这类构建工具，它们自动帮你处理了publicPath的配置，所以没遇到这个问题，而纯原生HTML环境下就得手动处理这些细节啦～

备注：内容来源于stack exchange，提问作者Petre Popescu