goldfire / howler.js

Javascript audio library for the modern web.

Home Page:https://howlerjs.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

seeking help re: Perf on iPad mobile Safari

raould opened this issue · comments

The Problem

thanks for making this library, very excited/hopeful to be able to use it to make life easier across html5/js devices! i am doing something wrong, need to learn what i can do in this case:

  • howler from cdn https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.4/howler.min.js" that i downloaded and checked into my repo fwiw.
  • using it in an html5 js canvas game https://raould.github.io/pn0gstr0m/
  • as a point of reference, sounds play and do not lag or cause stuttering on desktop e.g. Windows 10 Firefox 125.0.3 using howlerjs.
  • but on mobile when the game gets going faster, eg on iPad mobile Safari, the sounds cause the game to get hitchy, laggy, stuttery.
  • if i comment out my own PlaySound() so no howlerjs play() is invoked then the game does not have the stuttering issues.
  • (I need the sounds to be interruptible -- if event A causes the sound, then event B happens quickly thereafter, the first played sound aborts and the new playing of the same sounds starts.)

I am probably "holding it wrong" in some way?

  • i am creating the sounds with: new Howl({src:["foo.webm", "foo.wav"], html5: true}).
  • i am saving the sound objects into a plain old js object (hashmap) under their name e.g. sounds["foo"] = new Howl...
  • to play them i use the name as key to get the sound instance out of the hashmap e.g. var sfx = sounds["foo"]
  • to play them i just call sfx.play();
  • i actually try to debounce the sounds by 10ms even :-)
  • (experimentally i tried calling stop() before each subsequent play() but that seemed to cause playing to not produce any sound more often.)

loading:
https://github.com/raould/pn0gstr0m/blob/752023b9d88762ae5c0b8916d0ef04eb4f914ef6/main.js#L1452

playing:
https://github.com/raould/pn0gstr0m/blob/752023b9d88762ae5c0b8916d0ef04eb4f914ef6/main.js#L211

Reproducible Example

https://raould.github.io/pn0gstr0m/

Reproduction Steps

load https://raould.github.io/pn0gstr0m/ and play the game until there are enough pucks to reproduce the sound playback issue. (Note that when i run a version with the calls to sfx.play() commented out i do not get the lag/hang/hitchiness, that's why i am wondering if it is a sound playback issue.)

  • to reproduce the hangups: Play the game on iPad e.g. "iPad Pro (11-inch)" iPadOS Version 17.4.1
  • to see it playing w/out hangups, play on e.g. Windows 10 Firefox 125.0.3
  • you have to play the game long enough w/out losing so that you get enough pucks on the screen to start to see the slow-down. that's around 15-30 seconds of playing the game to see enough pucks.

Possible Solution

Is this something about making too many play calls? i am trying to only create each sound once per game. Is there anything to be garbage collected too much, and mobile Safari is just not as good as desktop browsers in this case?

Context

The game becomes unplayable on the mobile Safari iPad OS version i have available for testing.

Howler.js Version

2.2.4

Affected Browser(s)/Versiuon(s)

iPadOS Safari, whatever version is on "iPad Pro (11-inch)" iPadOS Version 17.4.1 / reports as AppleWebKit/605.1.15 (KHTML, like Gecko) Version 17.4.1, Safari/605.1.15

hi -- woah, well after all that -- i noticed a howler issue discussion mentioning the html5 boolean, which i have always had set to true. I just set it to false and now everything is working ok for me on ipad safari.