Playing HTML audio at "onCurrentIndexChange" is extremely laggy and slow on Firefox mobile and iOS devices

[ArtisArtStudio]

update: see next comment. I was thinking this is something related to overlay image or rotation bug in Firefox:

"Anybody having that too? I created a wheel with an overlay image and 8 items. All mobile browsers run it fine but Firefox mobile browser is lagging (v129.0). What could be the problem?"

Can this be the case ragarding rotation? https://github.com/jonobr1/two.js/issues/464 https://www.reddit.com/r/firefox/comments/gixef8/comment/fqi8lfm/"

[ArtisArtStudio]

I think I fixed this. I am pretty sure that was caused by audio playing for ticking sound. playing repetative HTML audio is extremely slow and laggy on iOS as well as Firefox mobile for some reason. I solved it by using the SoundJS library to play tick sound at this event:

wheel.onCurrentIndexChange

https://github.com/CreateJS/SoundJS

[elvinkim03]

@ArtisArtStudio Any chance you could share example? I've experienced the same problem

[ArtisArtStudio]

add this to your html: <script src=https://code.createjs.com/1.0.0/soundjs.min.js></script> then in your js file:

createjs.Sound.registerSound({src:"audio/tick.mp3", id:"sound"});
var playtick = function() {
     createjs.Sound.volume = 0.2;
     createjs.Sound.play("sound");
 };
 const wheel = new Wheel(container, props);
 wheel.onRest = functionFinished;
 wheel.onCurrentIndexChange= playtick;

ideally above code is inserted in window.onload = async () => { a tick sound is a simple short sound (0.4s) I created by cutting a portion of a sound I found on freesound site.

[elvinkim03]

@ArtisArtStudio Thanks man, appreciate it ❤️