Javascript 在客户端和文件中播放带有音频波的mp3：///

我正在尝试使用

这非常有效，但我面临的挑战是从chrome中的文件：///协议加载

从本地加载时出现以下错误

加载失败file:///Users/ashokshah/audioWaveTest/audio.wav: 跨源请求仅支持协议方案：http、数据、chrome、chrome扩展、https

var wavesurfer=wavesurfer.create{ 容器：“波形”， waveColor:“紫罗兰色”， 颜色：“紫色” }; window.onload=函数{ 加载'audio.wav'； }

---

Play据我所知，这是因为出于安全原因，浏览器限制从脚本中启动的跨源HTTP请求。这意味着使用XMLHttpRequest和Fetch API的web应用程序只能从加载应用程序的同一来源请求HTTP资源，除非来自另一来源的响应包含正确的CORS头

资料来源：

解决此问题的一种方法是在本地主机中托管web应用程序。您可以使用开始。然后在index.html文件中调用wavesurfer.js并创建一个容器，在其中显示波形

index.html

---

我找到了一个绕过跨域策略的解决方案，将音频文件的blob创建到JavaScript变量中，并使用它代替音频路径

您可以使用或有许多其他选项来创建音频文件的blob

无论您得到什么文本内容，只需将其存储到JavaScript变量中，并使用该变量而不是音频路径加载到wave surfer。举例如下：

var myAudio = "data:audio/x-wav;base64,UklGR..."; // enter complete blob data. I have removed it since it was not allowing to paste me completely
waveSurfer.load(myAudio);

---

你说file:///是从android运行的吗？不是，我想用chrome在windows中运行。在firefox中，它似乎运行良好。我不想提及AndroidTry启动chrome。否则，您将不得不通过本地服务器和本地主机从http提供文件谢谢您的响应，我知道跨域，但我的挑战是通过file:///协议播放文件。我最初将mp3文件转换为base64，并将这些base64格式加载到javascript文件中。这样我就不会收到CORS错误。@Ashoksah，如果可能的话，请分享你的代码。这将有助于其他人谁想要这样做使用文件协议。我已经张贴了答案。希望能有帮助。谢谢