Node.js 和 Wavesurfer.js答案

【问题标题】：Node.js and Wavesurfer.jsNode.js 和 Wavesurfer.js
【发布时间】：2019-03-04 08:26:54
【问题描述】：

到目前为止，我已经能够使用 Node.js 和 Express 将文件提供给我的动态网页，如下所示。

app.use(express.static('./public'));

然后链接到公用文件夹中的文件。

Wavesurfer.js 文档声明必须从 url 加载文件

从 URL 加载音频文件：

wavesurfer.load('example/media/demo.wav');

我不确定我是否理解这意味着什么。或如何使用 node.js 将文件链接到 wavesurfer.js

编辑：

我从链接Cross origin requests are only supported for HTTP.” error when loading a local file找到这个

Node.js 或者，如果您需要更灵敏的设置并且已经使用 nodejs...

输入npm install -g http-server安装http-server
进入您的工作目录，您的some.html 所在的位置
通过发出 http-server -c-1 启动您的 http 服务器

这会启动一个 Node.js httpd，它将目录中的文件作为静态文件提供，可从 http://localhost:8080 访问

我不能使用 express 来达到同样的效果吗？

我的代码：

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div id="waveform"></div>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.2.3/wavesurfer.min.js"></script>
        <script>

            var wavesurfer = WaveSurfer.create({
            container: '#waveform',
            waveColor: 'violet',
            progressColor: 'purple'
            });

            wavesurfer.load('/public/recordings/o.mp3');


        </script>
    </body>
</html>

我遇到的错误：

AudioContext 不允许启动。必须恢复（或创建）在页面上的用户手势之后。

从 'file:///C:/public/recordings/o.mp3' 访问 XMLHttpRequest 源'null'已被 CORS 策略阻止：跨源请求仅支持协议方案：http、data、chrome、 chrome 扩展，https。

【问题讨论】：

您是在后端还是前端使用wavesurfer？
我想是前端
在这种情况下，您已经有一个 Express 服务器，所以只需将音频文件放在 public/ 目录中，然后您可以将其加载到前端代码中：wavesurfer.load('/public/audio file.wav')
这是我尝试的第一件事，但没有成功
我添加了我的代码。

标签： node.js wavesurfer.js

【解决方案1】：

好的，我认为您的问题是因为您在本地浏览器中打开了.html 页面（作为file://）。相反，请尝试从您的 Express 服务器加载它，例如 http://localhost:port/some file.html

【讨论】：

你是对的 :) 我做到了。但是我仍然收到以下错误Uncaught (in promise) DOMException
一旦我删除了公用文件夹并使用了之后的所有内容，它就开始工作了，所以我使用wavesurfer.load('/public/recordings/o.mp3');而不是wavesurfer.load('/recordings/o.mp3');