HTML5 Audio, Mobiles & Howler.js

[gjbarter]

Hi,

 

Apologies if this has been discussed elsewhere on this forum but I couldn't see anything.

 

I'm currently in the middle of building a browser game using HTML5 and am coming across an issue with audio (I know, there's always issues with HTML5 audio! )

 

I use Howler.js to handle audio sprites that contain numerous sound snippets. Howler seems great at handling the audio on mobile and definitely seems like one of the best ways of getting the consistency across devices. However I have noticed that when on a slow connection, if the user starts the game before the audio is loaded that Howler fails and doesn't play any more audio. I'm guessing this is due to the fact that the long .mp3 sprite hasn't finished loading yet. 

 

I know many people have adapted Howler.js to fit their own needs I was wondering if anybody had any good ways of checking that the mp3 is ready to be played before attempting to play it?

 

I know you can use the 'canplaythrough' event but unfortunately this doesn't work with iOS as that requires the audio to load before the user starts interacting with the game and iOS prevents such a behaviour. Unless I'm wrong there but i know when i've tried that it doesn't seem very reliable.

 

If anybody has any hints/tips that there happy to share it will be greatly appreciated.

 

Thanks.

[rich]

You don't need canplaythrough on iOS because it fully supports Web Audio, so as long as you've preloaded your files AND they have finished decoding you can play one as soon as you get a touch event from the user (but not before). I assume (would hope?) that Howler detects for both of these things for you, but it's just a guess.

[gjbarter]

Yeah that's what i thought, perhaps there's an issue with the way I'm preloading it but it doesn't seem to be having any problems coming through the network panel during the load. However it does seem that the issue is with the Howler audio file not being ready though so I'll explore that route a bit further. Thanks for the advice.