Howler未启动Live Server时无法播放音频问题咨询

• 核心原因是代码中使用了协议相对URL（即以//开头的资源路径），这类路径的解析规则是自动继承当前页面的访问协议：

  通过Live Server打开页面时，页面走http/https协议，//会自动补全为对应协议前缀，最终资源路径为https://ssl.gstatic.com/...，可以正常请求到远程音频资源。
  直接双击本地html文件打开时，页面走本地file协议，//会被补全为file://前缀，最终资源路径会被解析为本地磁盘路径file://ssl.gstatic.com/...，本地不存在对应资源，因此加载失败。

• 额外补充：就算补全了资源的https协议前缀，部分浏览器的安全策略也会禁止file协议下的页面发起跨域资源请求，这种场景下音频同样无法加载。

• 直接修改资源路径为带完整协议的绝对路径即可：

var sound = new Howl({
  src: ['https://ssl.gstatic.com/dictionary/static/sounds/20200429/car--_gb_1.mp3'],
  html5: true,
});

• 如果修改后本地双击打开仍然无法使用，属于浏览器本地文件安全限制，属于正常现象，日常开发测试使用Live Server等本地服务打开即可。

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