Comments (20)
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
from howler.js.
Instead of setting up a full web server, you can run a quick / dirty one with:
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.
from howler.js.
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
.
from howler.js.
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.
from howler.js.
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.
from howler.js.
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.
from howler.js.
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)
from howler.js.
Did you download from master or from 1.1.0?
from howler.js.
from master. Was I supposed to download from a different branch?
from howler.js.
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: true
s and all works perfect again.
from howler.js.
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
)
from howler.js.
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: true
s 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.
from howler.js.
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.
from howler.js.
Excellent! It now works locally without buffer: true
! Will test out on iPhone/iPad later tonight.
from howler.js.
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.
from howler.js.
Can you specify which commit files you are testing? I just tested the latest 1.1.0 branch commit on iOS and it worked.
from howler.js.
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.
from howler.js.
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.
from howler.js.
@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
from howler.js.
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()); } });
from howler.js.
Related Issues (20)
- When looping, playback position value is sometimes beyond the audio file's duration
- Turn media session on and off
- ALAC encoded files not playing
- Failure to load audio on latest Opera HOT 3
- Howler gets in interrupted state after minimized and opened again iOS
- Howler Sprite Visual example does not work on iphone
- Seamlessly play multiple sprites one after another with the howler.js library
- gap when audio is in loop using html5 HOT 1
- How to differentiate between a sound already played or about to be played based on soundID params?
- Some live streams (html5) buffer forever on Safari iOS 17.4 HOT 17
- On Safari, no error is triggered in case of a corrupted file
- keep crash on Safari 17.5 beta HOT 3
- Duration returns Infinity in chrome
- Audio is not playing when I phone goes to sleep mode. HOT 1
- Howler not working in background for iphone
- iOS 17.4 playback issue HOT 2
- Opera GX LVL5 (core: 109.0.5097.62) not working but Chrome, Firefox, Edge and Safari are all okay. HOT 4
- Audio doesnt play if i set html5 to true and audio doesnt play on background if i set html5 to false, Iphone latest ios version HOT 9
- seeking help re: Perf on iPad mobile Safari HOT 1
- onplay error not firing
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from howler.js.