While everyone was preparing for ICE Totally Gaming, we at OB&T were busy helping exhibitors to prepare their gaming solutions. One of our clients requested to adopt his legacy HTML5 game to support modern iOS devices such as iPhones and IPads.
Long story short – we took the legacy code and improved it to become responsive and fit major screen resolutions. We also introduced some beautifications and minor improvements on the UI.
Great website to check iOS devices resolutions – iosres.com.
All went nice, and game start looking perfect on all the devices. Main scenario of the game was a set of videos that played along the game course. It was nicely fitted to the size of the screen but did not have any sound in it. So, our client decided to introduce some background sounds to make the game more attractive.
Not a big deal someone will say. However, you may not know that you literally can’t automatically play the separate audio stream in HTML5 as iOS prevents such to save the traffic. The only option is to explicitly trigger one of the following events onmousedown, onmouseup, onclick, or ontouchstart.
Thus code, like the one below, simply won’t be executed as autoplay will be simply ignored:
Using JS won’t help you either as required an explicit invocation as mentioned above.
So, we came up with a small tweak of placing an 🔊audio control on top of the video to explicitly play the sound. Storing the button state in a local storage solved the issue of reflecting the correct state of the button.
Do note that initial state of the sound has to be always off should you have to load it automatically at the game start.
And that’s it – a creative approach can help you to overcome such iOS limitation. See you at ICE 🤓!