Gapless-5 icon indicating copy to clipboard operation
Gapless-5 copied to clipboard

Gapless5 does not work with local files

Open Commenter25 opened this issue 9 months ago • 0 comments

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

Commenter25 avatar Nov 27 '23 04:11 Commenter25