title: Node.js and Wavesurfer.js
body: <p>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.</p>
  <pre><code>app.use(express.static('./public'));
  </code></pre>
  <p>and then linking to files in the public folder.</p>
  <p>The Wavesurfer.js documentation stated that a file has to be loaded from a url</p>
  <blockquote>
  <p>Load an audio file from a URL:</p>
  </blockquote>
  <pre><code>wavesurfer.load('example/media/demo.wav');
  </code></pre>
  <p>I'm not to sure I understand what this mean. or how to link a file to wavesurfer.js using node.js</p>
  <p><strong>Edit:</strong></p>
  <p>I found this from the link <a href="https://stackoverflow.com/questions/10752055/cross-origin-requests-are-only-supported-for-http-error-when-loading-a-local">Cross origin requests are only supported for HTTP.” error when loading a local file</a></p>
  <p>Node.js
  Alternatively, if you demand a more responsive setup and already use nodejs...</p>
  <ol>
  <li><p>Install <code>http-server</code> by typing <code>npm install -g http-server</code></p>
  </li>
  <li><p>Change into your working directory, where your <code>some.html</code> lives</p>
  </li>
  <li><p>Start your http server by issuing <code>http-server -c-1</code></p>
  </li>
  </ol>
  <p>This spins up a Node.js httpd which serves the files in your directory as static files accessible from <code>http://localhost:8080</code></p>
  <p>Can't I achieve the same using express?</p>
  <p><strong>My code:</strong></p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot; dir=&quot;ltr&quot;&gt;
      &lt;head&gt;
          &lt;meta charset=&quot;utf-8&quot;&gt;
          &lt;title&gt;&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id=&quot;waveform&quot;&gt;&lt;/div&gt;
  
          &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.2.3/wavesurfer.min.js&quot;&gt;&lt;/script&gt;
          &lt;script&gt;
  
              var wavesurfer = WaveSurfer.create({
              container: '#waveform',
              waveColor: 'violet',
              progressColor: 'purple'
              });
  
              wavesurfer.load('/public/recordings/o.mp3');
  
  
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>The errors I'm getting:</p>
  <blockquote>
  <p>The AudioContext was not allowed to start. It must be resumed (or
  created) after a user gesture on the page.</p>
  <p>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.</p>
  </blockquote>