Node.js 和 Wavesurfer.js

Question

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

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

然后 link 到 public 文件夹中的文件。

Wavesurfer.js 文档指出必须从 url

加载文件

Load an audio file from a URL:

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

我不确定我是否理解这意味着什么。或者如何使用 node.js

link 将文件 wavesurfer.js

编辑：

我从 link

中找到了这个

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>

我遇到的错误：

The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page.

Access to XMLHttpRequest at 'file:///C:/public/recordings/o.mp3' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

Answer 1

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

Node.js 和 Wavesurfer.js

Node.js and Wavesurfer.js

node.js

wavesurfer.js