Node.js和Wavesurfer.js_Node.js_Wavesurfer.js

Node.js和Wavesurfer.js

node.js

Node.js和Wavesurfer.js,node.js,wavesurfer.js,Node.js,Wavesurfer.js,到目前为止，在我的研究中，我已经能够使用Node.js和Express为我的动态网页提供文件，如下所示 app.use(express.static('./public')); 然后链接到公用文件夹中的文件 Wavesurfer.js文档说明必须从url加载文件从URL加载音频文件：我不确定我是否理解这意味着什么。或者如何使用node.js将文件链接到wavesurfer.js 编辑： <!DOCTYPE html> <html lang="en" d

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

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

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

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

从URL加载音频文件：

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

编辑：

<!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>

我从链接中找到了这个

Node.js 或者，如果您需要更具响应性的设置，并且已经在使用nodejs

通过键入

npm安装-g http服务器安装http服务器


切换到您的工作目录，您的some.html
所在的位置

通过发出http服务器-c-1


这将启动一个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>


var wavesurfer=wavesurfer.create({
容器：“#波形”，
waveColor:“紫罗兰色”，
颜色：“紫色”
});
wavesurfer.load（'/public/recordings/o.mp3'）；

我得到的错误是：
不允许启动AudioContext。必须恢复（或
在页面上的用户手势后创建
访问位于“”的XMLHttpRequestfile:///C:/public/recordings/o.mp3“从
原产地“null”已被CORS策略阻止：跨原产地请求
仅支持协议方案：http、数据、chrome、，
chrome扩展，https
好的，我认为您的问题是因为您在浏览器中本地打开了.html
页面（作为文件：//
）。相反，尝试从Express服务器加载它，类似于http://localhost:
端口/some file.html
您是想在后端还是前端使用wavesurfer？前端我想在这种情况下，您已经有了一台Express server，所以只要把一个音频文件放在public/
目录中，然后你就可以在前端代码中加载它：wavesurfer.load（'/public/audio file.wav'）
这是我尝试的第一件事，但它不起作用。我添加了我的代码。你是对的：）我这么做了。但是，我仍然收到以下错误Uncaught（in promise）DOMException
它在我删除公用文件夹并使用完所有内容后就开始工作，所以不是wavesurfer.load（'/public/recordings/o.mp3'）我使用了wavesurfer.load（'/recordings/o.mp3'）