Help me please, how do i get my audio to load from wavesurfer.js #72861
-
BodyI'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
Guidelines
|
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 3 replies
-
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:
If you're using JavaScript to initialize Wavesurfer, make sure you use a relative URL for the audio file as well. For instance:
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. |
Beta Was this translation helpful? Give feedback.
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…