Node.js and Wavesurfer.js

Question

Up to this point in my studies, I have been able to serve files to my dynamic web pages using Node.js and Express as follows.

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

and then linking to files in the public folder.

The Wavesurfer.js documentation stated that a file has to be loaded from a url

Load an audio file from a URL:

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

I'm not to sure I understand what this mean. or how to link a file to wavesurfer.js using node.js

Edit:

I found this from the link Cross origin requests are only supported for HTTP.” error when loading a local file

Node.js Alternatively, if you demand a more responsive setup and already use nodejs...

Install http-server by typing npm install -g http-server
Change into your working directory, where your some.html lives
Start your http server by issuing http-server -c-1

This spins up a Node.js httpd which serves the files in your directory as static files accessible from http://localhost:8080

Can't I achieve the same using express?

My code:

<!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 errors I'm getting:

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.

Are you trying to use wavesurfer on the backend or the frontend? — P Varga, Mar 03 '19 at 04:49
In that case, you already have an Express server, so just put an audio file in the `public/` directory and you can then load it in frontend code as: `wavesurfer.load('/public/audio file.wav')` — P Varga, Mar 03 '19 at 04:58
The first error actually gives a url at the end but I couldn't submit the question without removing it — Personal Information, Mar 03 '19 at 05:23

P Varga · Accepted Answer · 2019-03-04T00:26:54.100

2

Ok so I think your problem is because you open the .html page in your browser locally (as a file://). Instead, try to load it from your Express server, something like http://localhost:port/some file.html

edited Mar 04 '19 at 00:26

answered Mar 03 '19 at 05:29

P Varga

19,174
12
70
108

you are right :) I did that. However i'm still getting the following error `Uncaught (in promise) DOMException` – Personal Information Mar 03 '19 at 05:37
1

It started working once I removed the public folder and used everything after that, so instead of `wavesurfer.load('/public/recordings/o.mp3');` i used `wavesurfer.load('/recordings/o.mp3');` – Personal Information Mar 03 '19 at 16:41

Node.js and Wavesurfer.js

1 Answers1