Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Gapless5 does not work with local files #46

Open
Commenter25 opened this issue Nov 27, 2023 · 0 comments
Open

Gapless5 does not work with local files #46

Commenter25 opened this issue Nov 27, 2023 · 0 comments

Comments

@Commenter25
Copy link
Contributor

Commenter25 commented Nov 27, 2023

Describe the bug
I'm creating something which, as an alternative to an online server, I want to be able to run offline simply by downloading the site and opening the HTML file locally. If I run it in a server, Gapless5 has no issues. However, opening the file directly, it is unable to work unless you disable useWebAudio. This sets me back to square one with Chrome's incredible incapability to loop audio gapless after a decade and a half.

Debug output
I created a minimal example to test this, which I've attached here: localsite.zip
Here is the console output from Firefox:

21:40:02.335 Loading track 0: trivia-timer.ogg [gapless5.js:764:11](file:///home/c/Projects/localsite/gapless5.js)
21:40:02.341 Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at file:///home/c/Projects/localsite/trivia-timer.ogg. (Reason: CORS request not http). [Learn More]
21:40:02.350 Failed to load audio track [gapless5.js:160:9](file:///home/c/Projects/localsite/gapless5.js)
21:40:02.352 Stopping: trivia-timer.ogg [gapless5.js:217:9](file:///home/c/Projects/localsite/gapless5.js)

The [Learn More] directs you to this page: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSRequestNotHttp

Potential solution
The problem has nothing to do with the Web Audio API itself, but rather, that XMLHttpRequest can't be used for local files. So if window.location.protocol === "file:", a different method must be used. I believe a solution may lie in MediaElementAudioSourceNode, which lets you control a pre-existing <audio> element with the Web Audio API. One of the MDN guides on the API shows it being used here.

However, my current understanding of the API, and of Gapless5's internal workings, is insufficient to go further from here. Ironically, I jumped onto using Gapless5 specifically because the API was confusing and daunting and I don't have time to understand how it works. But at least for now, it works in Chrome when online, and I can tell offline users to install Firefox, like they should be doing anyway :P

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant