加载页面时我的tone.js采样文件出现多个404未找到错误是什么原因？

问题原因 #

你遇到的404错误来自4个核心问题：

1. 路径拼写错误：报错中出现GET http://127.0.0.1:8000/audi0s/G 404，这里audi0s用数字0代替了字母o，和你代码中配置的./audios/路径不匹配，存在配置笔误。
2. 地址格式错误：第一条报错的请求地址http://127.0.0.1 :8000中，IP和端口之间多了多余空格，属于配置输入错误。
3. 请求路径缺省字段：你配置的采样文件是C1.wav、F1.wav这类带音高组别和.wav后缀的文件，但报错中请求的是/audios/F、/audios/C，没有音高组别也没有后缀，说明midi音高转换为音符名的结果，没有匹配到你urls中配置的对应key，导致Tone直接用基础音符名发起了请求。
4. 资源缺失或权限不足：如果上述配置都正确，也可能是audios目录下没有对应音频文件，或者静态服务器的目录访问权限未开启。

修复方案 #

• 检查所有路径配置，确保音频目录名统一为audios，baseUrl中不要出现多余空格、拼写错误。
• 增加日志确认音符转换结果，确保转换后的音符名和你urls中配置的key格式完全一致：

piano.on('change',function(v) {
  const noteName = Tone.Frequency(v.note, "midi").toNote()
  // 控制台输出确认转换结果是否为C1、D2这类匹配你配置的格式
  console.log('触发音符：', noteName)
  Tone.loaded().then(() => {
    sampler.triggerAttackRelease(noteName);
  })
})

• 确认audios目录下存在所有你配置的.wav文件，文件名大小写和你代码中写的完全一致（部分静态服务器对文件名大小写敏感）。
• 如果你部署到线上服务器，确认所有音频文件已经上传到对应目录，且目录权限允许静态资源访问。

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