1

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

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

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

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

从 URL 加载音频文件：

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

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

编辑：

我从链接跨源请求仅支持 HTTP 中发现了这一点。” 加载本地文件时出错

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

  1. http-server通过键入安装npm install -g http-server

  2. 进入你的工作目录，你some.html生活的地方

  3. 通过发出启动您的 http 服务器http-server -c-1

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

我不能使用快递达到同样的效果吗？

我的代码：

<!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。它必须在页面上的用户手势之后恢复（或创建）。

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

4

1 回答 1

2

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

于 2019-03-03T05:29:40.067 回答