Sound Delay on HTML app when building on Xcode

I’ve created a fairly complicated website/app using Hype and Java. You can take a peek here:

http://alphapodapp.com/app1/

Online, with any browser, every time I interact with a button, there’s immediate sound feedback. On each instance I simply used the OnMouseClick with action PlaySound “sound_file.mp3”.

However, when I move all the files to Xcode and built it to my iPad, there’s a slight delay between my tapping on a button and the audio feedback. This delay is about half a second long, so it’s pretty noticeable. That’s particularly problematic for the music game. But it really makes the entire app seem subpar just because of this delay.

If I test the site on my iPad using Safari however, it works fine. It’s only when I build it using Xcode that this delay happens. It also happens if I want to have some song loop. No way to make a seamless loop because there’s a very noticeable silence at the end of the song when previewing via Xcode.

BTW I’m using latest Catalina on a newish iMac, latest Hype, latest Xcode, brand new iPad Pro.

Any help would be appreciated

My guess would be that you are accessing the site via a file:/// URL within the app, and elsewhere via http://?

Hype will use the Web Audio API when possible to have low-latency audio, and if not fallback to a higher latency <audio> tag. The Web Audio API requires being able to make XMLHTTPRequests, which is normally not possible with file:/// URLs, therefore this a fallback trigger.

The easiest way to test to see if this is what is happening would be to uncheck Use low latency Web Audio API in the document inspector and preview on iOS Safari as you were doing before. If the reaction time is the same as in Xcode, then this is the root of the problem. I’m guessing it is.

When we implemented the Web Audio API, there weren’t really any workarounds for this, but it looks like there might be one now you can try. Here’s what you’d do:

  1. Make sure re-check Use low latency Web Audio API in the document inspector from the test above :slight_smile:.
  2. Try setting the WKWebViewConfiguration’s preferences to have a value of true for the "allowFileAccessFromFileURLs" key, as seen as the solution in this thread: https://stackoverflow.com/questions/35554814/wkwebview-xmlhttprequest-with-file-url
  3. I’d recommend testing with a basic file/XMLHTTPRequest to make sure this works
  4. You’ll need to hack the Hype runtime to disable its file:/// URL check. Open up the HYPE-670.full.min.js file in your export and search for “file://” (note only two slashes), and change it to something like “fileblah://” that will fool the match. Save, and then try to see if this works.

If it does do the trick please let me know; we might be able to do some better detection in this case where it uses a file:/// URL but can make the required XMLHTTPRequest.

2 Likes

That worked! I already had allowFileAccessFromFileURLS set to true, so all I did was your #3 instruction and that took care of the problem. Now the sound is as smooth as on the web.

Thanks so much!

2 Likes

Great! I’ll look into seeing if we can detect this environment better so hacking the runtime won’t be required.

Another hack I need to do for Xcode, in the hype_generated_script.js I have to replace “./” with “./images/” or else no images will not show.

Forgive me from barging in - My question is a sort of follow up: I want to be able to skip forwards and backwards in a sound clip and to stop all audio to play the next clip.

Is Howler.js embedded in Hype the most efficient/best way to do this IYHO ?

When I have a dozen short clips and a dozen stop sound actions attached to a button, I inevitably get some lag. I want to be able to stop other audio in order to play the clip I am clicking on.

You could do this either with regular JavaScript or with a library like Howler. Howler does have a 'stop()' function which makes this process easier: GitHub - goldfire/howler.js: Javascript audio library for the modern web.

You see lag when running a 'stop' function on a dozen audio elements?

Hi Daniel - I have a couple of longer audio clips which I play and pause with javascript - plus around 12 short clips which I play and stop with Hype’s built in controls. It means I am able to have one pause button which stops any of the short clips that are playing and pauses the longer one.

It works but not as smoothly as I would like and I’m thinking it’s because I have 12 stop sound commands on one button + a pause javascript. I’m going to try Howler and see if it works any better. It would be simpler - as long as I’m clever enough to make it work!

It’s all aimed to make it as easy as possible for users who can play and pause the main audio as they like while clicking on any of the 12 short clips. Hard to explain but I hope you get my drift.

I’ve tried it with Howler and it seems to work better with the audio split between Howler and Hype’s built in audio controls. I have 25 audio files in the project which is quite a lot on what is effectively one page - most a few hundred kb but one 3.8mb.

I’ve done away with javascript and inner HTML and put half of the sounds in the head html and written the simplest of javascripts for them which just say sound.play() or sound2.play() etc. And another simple javascript listing them all sound1.stop etc. I tried a global stop audio function but couldn’t get it to work.

So now half my sound is Howler and half Hype’s built in controls.

The result is that it seems to run more smoothly - which may be down to me going through the whole project very carefully, or it may be down to using Hype4, or something else but it just seems to run better.

1 Like