[SOLVED] Unable to Save Howler JS Library Locally

killingthemonkey · 03-06-2018, 10:30 PM

This is the second time in as many weeks that I've come with questions about somewhat esoteric issues.

I'm attempting use the Howler JS library. If I use a CDN, and try to play a local sound, I get this error:

Code:

Failed to load file:///H:/HTML/Test/assets/sounds/bubbles.mp3: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

If I try to save the Howler library locally, I get this error:

Code:

Uncaught SyntaxError: Unexpected token <

So, using the CDN, Howler will apparently work, but errors out on locally saved sounds. Use a locally saved library and the browser is apparently startled by the first < in the Howler file.

Here's the code:
HTML:

Code:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <link rel="stylesheet" href="assets/css/test.css">
    <script src="assets/js/lib/howler.js"></script>
    <script src="assets/js/lib/jquery-3.3.1.min.js"></script>
    <script src="assets/js/test.js"></script>
</head>
<body>

</body>
</html>

CSS:

Code:

html {
    height: 100%;
}
body {
    height: 100%;
    margin: 0;
    padding: 0;
    background: darkviolet;
}

Javascript:

Code:

$("body").on("keypress", function(e) {
    if (e.which === a) {
        play(bubbles);
    }
});

var bubbles = new Howl({
    src:['assets/sounds/bubbles.mp3'],
    volume: 0.7
});

Any ideas, folks?

Thanks,
Doug

killingthemonkey · 03-07-2018, 12:58 AM

Well... I figured it out. I did the obvious thing. I compared the two Howler files. I was going to run diff on them, but apparently, my locally saved file wasn't Howler at all. It was instead an HTML file. Turns out, I downloaded the wrong file.

Alright, where's that bottle of Adderall?

ondoho · 03-07-2018, 02:16 AM

if i understand correctly, ALL javascript implementations disable cross-origin requests by default.
a local file apparently defines as a different origin from where the script was called from.
plenty of Q/A about this on e.g. stackoverflow.

killingthemonkey · 03-07-2018, 08:15 AM

ondoho,
You are of course correct. I am more of a newb at WebDev than I am at Linux. I am developing some decent chops at both, but it's taking time.

killingthemonkey · 03-07-2018, 07:42 PM

Alright, I have rescinded the 'Solved' status.

I have a local howler.js.
I have a local mp3 file.

Still getting the cross origin error.

My code hasn't changed.

(Although, I did try moving the mp3 file into the same folder as the howler script... No change.)

astrogeek · 03-07-2018, 11:19 PM

Quote:

Originally Posted by killingthemonkey

If I use a CDN, and try to play a local sound, I get this error:

Code:

Failed to load file:///H:/HTML/Test/assets/sounds/bubbles.mp3: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

If you are using CDN then you must be using http protocol to get it, but you are using file protocol to load the sound file - the error explicitly says that is not supported. Have you tried using http locally to get the sound file? (Hint: Make it accessible via your localhost web server, assuming you have one running, so the sound file may be accessed something like this: http://localhost/path/to/bubbles.mp3).

The same would apply for a locally served howler.js - if you load it via http, you must load the sound file via http also - the local web server cannot see outside its own root filesystem..

I am unsure what would happen if you try to load both howler and the sound file via file protocol, but I suspect that would not work either, but I am not sure what constitutes an "origin" for files loaded into a browser locally.

If loading the sound file via http does not seem to work, please tell us exactly how you are loading the "page" into your browser, and the full path paths to howler.js and bubbles..mp3 and exactly what errors you see.

ondoho · 03-10-2018, 02:09 AM

^ oh, i think i didn't read the error message properly:
"Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https."
the data scheme looks promising?

killingthemonkey · 03-10-2018, 02:54 PM

ondoho,
I believe it was definitely that I was trying to use the file protocol. I fired up VirtualBox and installed a LAMP stack. Running the page from a server, it worked.

Thanks,
Doug

killingthemonkey · 03-10-2018, 03:00 PM

Quote:

Originally Posted by astrogeek

If loading the sound file via http does not seem to work, please tell us exactly how you are loading the "page" into your browser, and the full path paths to howler.js and bubbles..mp3 and exactly what errors you see.

astrogeek,
This worked. I ended up setting up a LAMP stack to serve up the page. Issue resolved.