Help me please, how do i get my audio to load from wavesurfer.js

[annwon603]

Body

I'm a beginner at web developing and I'm making a website through github.io. I'm using this site https://wavesurfer.xyz/docs/ to help me put audio waves into my website. But I'm getting errors. Someone please help me how to fix them
These are the errors:

1. page2.html:1 Access to fetch at 'file:///C:/Users/15106/Documents/GitHub/annwon603.github.io/media/Chase%20Me.mp3' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.
2. Failed to load resource: net::ERR_FAILED
   3.Uncaught (in promise) TypeError: Failed to fetch
   at Object. (wavesurfer.js@7:1:1321)
   at Generator.next ()
   at wavesurfer.js@7:1:518
   at new Promise ()
   at t (wavesurfer.js@7:1:263)
   at Object.fetchBlob (wavesurfer.js@7:1:1273)
   at d. (wavesurfer.js@7:1:20603)
   at Generator.next ()
   at wavesurfer.js@7:1:518
   at new Promise ()

Guidelines

• I have read and understood this category's guidelines before making this post.

[mamoon-rasheed]

The error you are encountering is related to the Same-Origin Policy in web browsers, which prevents your website from making requests to resources on a different domain. When you load an audio file from your local filesystem using a "file://" URL or from a different domain, you might encounter CORS (Cross-Origin Resource Sharing) issues.

To resolve these issues and make the audio file work on your GitHub Pages website, you should follow these steps:

Host the audio file on the same domain as your GitHub Pages website. This means uploading the audio file to your GitHub repository and making it accessible via a relative URL, not a "file://" URL.

In your HTML code, make sure to use a relative path to the audio file. For example, if the audio file is in a "media" directory within your repository, your HTML code might look something like this:

<audio id="waveform" src="media/Chase Me.mp3"></audio>

If you're using JavaScript to initialize Wavesurfer, make sure you use a relative URL for the audio file as well. For instance:

const wavesurfer = WaveSurfer.create({ container: '#waveform', waveColor: 'violet', progressColor: 'purple', }); wavesurfer.load('media/Chase Me.mp3');

Commit your changes and push them to your GitHub repository.

Ensure that your GitHub Pages settings are configured to use the correct branch or directory where your website is hosted. You can configure this in your GitHub repository settings.

Wait a few moments for your changes to be reflected on your GitHub Pages website.

By following these steps and hosting the audio file within your GitHub repository, you should be able to resolve the CORS issues and have the audio waves displayed on your website.

[annwon603]

Thank you so much, I'm able to make the audio wave work. Then how would I do this in a separate Javascript file? I have a javascript directory with a file named myscript.js and the node modules I installed from the website. I tried typing in import` WaveSurfer from "wavesurfer.js" in myscript.js and it doesn't work. It shows up as this error.

Failed to load module script: Expected a JavaScript module script wavesurfer.js/:1 but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

The same error also occurs when I tried import WaveSurfer from "./node_modules/wavesurfer.js"

[mamoon-rasheed]

Make sure you have Node.js installed on your system. If you don't have it, you can download and install it from the official Node.js website

Ensure that you have already installed the WaveSurfer library using a package manager like npm or yarn. If not, you can install it using the following command in your project directory:

npm install wavesurfer.js

In your myscript.js file, you can import WaveSurfer like this:

import WaveSurfer from 'wavesurfer.js';

Make sure your HTML file that includes the script references your myscript.js file correctly. For example:

<script src="js/myscript.js"></script>

Once everything is set up, you can run your project with a development server or serve your HTML file locally. You can use a tool like http-server to serve your HTML file locally. Install it using npm:

npm install -g http-server

Then navigate to your project directory and run:

http-server

This will start a local server, and you should be able to access your HTML file with the imported WaveSurfer library without encountering MIME type errors.

Keep in mind that when using ECMAScript modules (ES modules), you should serve your files using a web server or a development server to avoid CORS (Cross-Origin Resource Sharing) issues, especially if your HTML file is loaded from a file:// URL.

[mamoon-rasheed]

please mark the answer as answered so that others might use it in future