LinuxQuestions.org
Visit Jeremy's Blog.
Go Back   LinuxQuestions.org > Forums > Non-*NIX Forums > Programming
User Name
Password
Programming This forum is for all programming questions.
The question does not have to be directly related to Linux and any language is fair game.

Notices


Reply
  Search this Thread
Old 03-06-2018, 11:30 PM   #1
killingthemonkey
Member
 
Registered: Mar 2011
Location: Winston-Salem, NC
Distribution: Fedora, CentOS, Linux Mint
Posts: 181

Rep: Reputation: 19
Unable to Save Howler JS Library Locally


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

Last edited by killingthemonkey; 03-06-2018 at 11:36 PM.
 
Old 03-07-2018, 01:58 AM   #2
killingthemonkey
Member
 
Registered: Mar 2011
Location: Winston-Salem, NC
Distribution: Fedora, CentOS, Linux Mint
Posts: 181

Original Poster
Rep: Reputation: 19
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?
 
Old 03-07-2018, 03:16 AM   #3
ondoho
LQ Addict
 
Registered: Dec 2013
Posts: 10,157
Blog Entries: 7

Rep: Reputation: 2514Reputation: 2514Reputation: 2514Reputation: 2514Reputation: 2514Reputation: 2514Reputation: 2514Reputation: 2514Reputation: 2514Reputation: 2514Reputation: 2514
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.
 
Old 03-07-2018, 09:15 AM   #4
killingthemonkey
Member
 
Registered: Mar 2011
Location: Winston-Salem, NC
Distribution: Fedora, CentOS, Linux Mint
Posts: 181

Original Poster
Rep: Reputation: 19
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.
 
Old 03-07-2018, 08:42 PM   #5
killingthemonkey
Member
 
Registered: Mar 2011
Location: Winston-Salem, NC
Distribution: Fedora, CentOS, Linux Mint
Posts: 181

Original Poster
Rep: Reputation: 19
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.)
 
Old 03-08-2018, 12:19 AM   #6
astrogeek
Moderator
 
Registered: Oct 2008
Distribution: Slackware [64]-X.{0|1|2|37|-current} ::12<=X<=14, FreeBSD_10{.0|.1|.2}
Posts: 4,838
Blog Entries: 6

Rep: Reputation: 2667Reputation: 2667Reputation: 2667Reputation: 2667Reputation: 2667Reputation: 2667Reputation: 2667Reputation: 2667Reputation: 2667Reputation: 2667Reputation: 2667
Quote:
Originally Posted by killingthemonkey View Post
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.

Last edited by astrogeek; 03-08-2018 at 12:24 AM. Reason: typos, added comment, defang url
 
Old 03-10-2018, 03:09 AM   #7
ondoho
LQ Addict
 
Registered: Dec 2013
Posts: 10,157
Blog Entries: 7

Rep: Reputation: 2514Reputation: 2514Reputation: 2514Reputation: 2514Reputation: 2514Reputation: 2514Reputation: 2514Reputation: 2514Reputation: 2514Reputation: 2514Reputation: 2514
^ 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?
 
Old 03-10-2018, 03:54 PM   #8
killingthemonkey
Member
 
Registered: Mar 2011
Location: Winston-Salem, NC
Distribution: Fedora, CentOS, Linux Mint
Posts: 181

Original Poster
Rep: Reputation: 19
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
 
Old 03-10-2018, 04:00 PM   #9
killingthemonkey
Member
 
Registered: Mar 2011
Location: Winston-Salem, NC
Distribution: Fedora, CentOS, Linux Mint
Posts: 181

Original Poster
Rep: Reputation: 19
Quote:
Originally Posted by astrogeek View Post
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.
 
  


Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off



Similar Threads
Thread Thread Starter Forum Replies Last Post
Remote ssh command output save locally expect bishop2001 Programming 1 01-14-2016 09:40 AM
Remote ssh command output save locally expect bishop2001 Programming 1 01-14-2016 04:39 AM
11.1 prob saving to network share- must save locally first keevill Ubuntu 1 02-07-2012 12:55 AM
install from source - unable to find the libcurl library - but library is installed pulper Linux - Newbie 2 02-23-2009 10:00 PM
IPTables Firewall + Unable to surf locally yvesg Linux - Networking 5 08-10-2005 03:32 PM

LinuxQuestions.org > Forums > Non-*NIX Forums > Programming

All times are GMT -5. The time now is 07:25 PM.

Main Menu
Advertisement
My LQ
Write for LQ
LinuxQuestions.org is looking for people interested in writing Editorials, Articles, Reviews, and more. If you'd like to contribute content, let us know.
Main Menu
Syndicate
RSS1  Latest Threads
RSS1  LQ News
Twitter: @linuxquestions
Facebook: linuxquestions Google+: linuxquestions
Open Source Consulting | Domain Registration