Error when trying to develop locally

[samueller]

I get the following error when trying to use howler.js locally without a webserver:

XMLHttpRequest cannot load file:///C:/Users/Scott/WebstormProjects/guess_the_number/bird.wav. Cross origin requests are only supported for HTTP. howler.min.js:10
Uncaught Error: NETWORK_ERR: XMLHttpRequest Exception 101

I know the issue... that I need to use an http URL isntead of file:///. So that means I need a local webserver to develop on. However, I don't want to do that for several reasons. For one, I don't get the live editing feature that WebStorm provides. I'm also trying to teach kids JavaScript with howler.js. I don't want to teach them about webservers at this point yet. Anyway, is there a way to use howler.js without using a webserver?

I know the HTML5 <audio> element can use file URLs. Can I force howler.js to fallback to this method for local files?

[mostlygeek]

Instead of setting up a full web server, you can run a quick / dirty one with:

• Python, using python -m SimpleHTTPServer
• PHP, using php -s localhost:8000

This is what I do when I need to serve a simple app without setting up the whole stack. Also the issue isn't with Howler as it is with the browser's security sandbox.

[goldfire]

mostlygeek's suggestions are good ones that I've used in the past. To answer your other question, yes, you can force it to use HTML5 Audio by setting the buffer property to true.

[samueller]

setting buffer to true worked!! What would be better is if Howl detected the URL as starting with file:/// and used HTML5 Audio in that case. Otherwise try to use Web Audio. Then I don't have to make students change their code when they deploy to the web.

[samueller]

Unfortunately setting buffer to true makes howler not work on iPhones and iPads :(.
http://js.ucode.com/demos/guess/sound.html

That works on the desktop, even locally too. But not on the iPhone. If I remove the buffer: true line, then it works fine on iOS devices.

[goldfire]

Okay, I found a solution that I think should work well, and I've pushed it in 1.0.12. Basically, if a file can't be loaded because of a CORS issue, it'll automatically switch to using HTML5 Audio. If you are still having issues please reopen this ticket.

[samueller]

I just downloaded the latest howler.min.js from github. I get an error just loading my page locally now and nothing runs. Once I add the buffer: true parameter, all is well again. This is the error in Chrome:

XMLHttpRequest cannot load file:///C:/Users/Scott/WebstormProjects/debugger/point.wav. Cross origin requests are only supported for HTTP. howler.min.js:10
a howler.min.js:10
u.load howler.min.js:10
window.Howl howler.min.js:10
(anonymous function) index.html:99
Uncaught Error: NETWORK_ERR: XMLHttpRequest Exception 101 howler.min.js:10
a howler.min.js:10
u.load howler.min.js:10
window.Howl howler.min.js:10
(anonymous function)

[goldfire]

Did you download from master or from 1.1.0?

[samueller]

from master. Was I supposed to download from a different branch?

[samueller]

I just tried downloading howler.min.js from the 1.1.0 branch and I get the same error above when loading a sound locally. I add back in the buffer: trues and all works perfect again.

[samueller]

One thing I just noticed is that the 1.1.0 branch of howler.min.js does NOT produce sound at all on iPhones/iPads even when hosted. I tried both with and without the buffer: true configuration parameter.

The older version of howler.min.js that I tried at the top of this issue worked fine on iPhones/iPads (without the buffer: true)

[samueller]

I tested this a bit further... sorry for all the updates. I'm eager to get this working so I can teach it to the kids here. So I basically had a strange iPad that just wasn't playing sound properly. Other iPads seem to work with Howler. Essentially, the following is what I've experienced:
Local: always need buffer: trues to work at all
Remote on web: works great always
Remote on iOS: only works without buffer: true

This is for all versions of howler.min.js, including the 1.1.0 branch.

[goldfire]

I just pushed an update to the 1.1.0 branch that should fix this problem. Let me know if you are still having issues.

[samueller]

Excellent! It now works locally without buffer: true! Will test out on iPhone/iPad later tonight.

[samueller]

Now I can't get sound to work on my iPhone with or without the buffer: true parameter :(. The old howler.min.js code works to give me sound on my iPhone, but not the new one.

[goldfire]

Can you specify which commit files you are testing? I just tested the latest 1.1.0 branch commit on iOS and it worked.

[samueller]

Here's a little demo app I wrote. First one uses howler.js v1.0.13 and works fine everywhere (except of course locally):
http://ucjs.s3.amazonaws.com/demos/debugger/index.html

This is the same exact code, the only difference is using howler.js v1.1.0-b4:
http://ucjs.s3.amazonaws.com/demos/debugger/index_2.html

You can see that sound on this second one doesn't work at all on iPhones/iPads. Even on the desktop in chrome (both locally and on a web server), sound only works the first time it's played. No sound is made when trying to play the same sound again.

[goldfire]

The example with 1.0.13 has buffer set to false, whereas the example with 1.1.0 has buffer set to true. You need to be using Web Audio API on iOS.

[samueller]

@goldfire I apologize, I've been messing around with this so much, you're right 1.1.0 without buffer: true works on iOS. Here's a list of results that I just tested for:
http://ucjs.s3.amazonaws.com/demos/debugger/index_2.html (howler v1.1.0-b4)
local: a Howl sound can only be played once, no errors though
web: works perfect
iOS: works perfect

http://ucjs.s3.amazonaws.com/demos/debugger/index_3.html (howler v1.1.0-b4, buffer: true)
local: a Howl sound can only be played once, no errors though
web: a Howl sound can only be played once, no errors though
iOS: no sound

http://ucjs.s3.amazonaws.com/demos/debugger/index_4.html (howler v1.0.13)
local: CORS error
web: works perfect
iOS: works perfect

http://ucjs.s3.amazonaws.com/demos/debugger/index_5.html (howler v1.0.13, buffer: true)
local: works perfect
web: works perfect
iOS: no sound

[blahthebiste]

I am attempting to load a local sound file with Howler, I set buffer = true like you said but the error persists. This is my code:
var stageMusic = new Howl({ urls: ['LaS-Stage1.ogg'], loop: true, buffer: true, onend: function(){ console.log("Restarting loop. Ended at position",this.pos()); } });

[TimAstier]

The html5 option set to true fixed the CORS issues in my case (web app).
const sound = new howler.Howl({ src, html5: true });
Found this here: #64