如何在HTML/JS中加载本地Teachable Machine音频模型？

核心问题根源 #

直接通过file://协议打开本地HTML文件会触发浏览器安全限制：

• 同源策略限制导致模型文件无法正常加载
• 浏览器不支持Node.js的require语法，因此会报"require未定义"错误
• 相对路径./在file://协议下无法被正确解析为有效资源地址

具体解决方案 #

1. 必须使用本地HTTP服务器运行项目

浏览器对本地文件的API访问有严格限制，只有通过HTTP/HTTPS协议才能正常加载模型。推荐几种简单的本地服务器启动方式：

• Python 3：打开终端进入项目文件夹，执行命令：

  python -m http.server 8000
  

  然后在浏览器访问 http://localhost:8000
• Node.js http-server：先全局安装工具：

  npm install -g http-server
  

  进入项目文件夹后启动：

  http-server -p 8000
  

• VS Code Live Server插件：安装插件后，右键点击index.html选择「Open with Live Server」，自动启动服务器并打开页面

2. 修正模型加载路径

所有文件在同一文件夹时，直接使用相对路径即可，无需添加file://前缀。示例代码：

// 模型和元数据的相对路径
const modelURL = './model.json';
const metadataURL = './metadata.json';

// 用Teachable Machine的浏览器API加载模型
async function initModel() {
  try {
    const model = await tmAudio.load(modelURL, metadataURL);
    console.log('模型加载成功');
    // 后续模型调用逻辑
  } catch (err) {
    console.error('加载失败:', err);
  }
}
initModel();

3. 解决"require未定义"错误

如果代码中出现require，说明误用了Node.js模块语法。Teachable Machine导出的模型会提供浏览器适配的脚本，确保在HTML中通过<script>标签引入对应的Teachable Machine音频库：

<!-- 引入Teachable Machine浏览器端脚本（确保该文件在项目目录中） -->
<script src="tm-audio.min.js"></script>

不要使用require来加载库，直接通过<script>引入后，即可使用全局的tmAudio对象。

4. 验证文件完整性

确认项目文件夹中包含以下所有文件：

• index.html
• model.json
• weights.bin
• metadata.json
• tm-audio.min.js（Teachable Machine导出时附带的浏览器脚本）

内容的提问来源于stack exchange，提问作者yellesh