Search code examples
javascripthtmlcordovaconstruct-2howler.js

Implementation workaround for audio issues for Cordova exported Construct 2 games


I am creating a game using Construct 2, but on previewing on Android smartphone, I found Audio playback and delay issue:

This is possibly the curse of Web Audio API in that many browsers require user to touch the screen first or no music will be played. Worse, if another music is to be played, the user must touch the screen once again. This is "by design" of these smartphone browsers. Only Firefox seems to allow music to be played without user initiated touch.

I've seen that this issue has been covered for several times (ex. Website HTML 5 Audio Autoplay and https://stackoverflow.com/a/22331782/144201) and some of the possible suggestions include using other audio javascript libraries entirely such as SoundJS and howler.js.

Has anyone have experience bringing in such audio library that could solve the issue above for Cordova Android export option? Does it work for all Android devices? In fact, can anyone provide me a link for a HTML5 game/page/app, exported with C2 that uses such audio library and play music without requiring user's initial touch on Android so I could check? I just want a confirmation that this is truly possible.

Or is there a more elegant way for Construct 2?


Solution

  • Previewing on browser has the "user must touch screen once" issue because of it is "by design". But if the C2 app is exported via Cordova and uses Crosswalk, the game can play the music without requiring the user to ever touch the screen first.

    See https://www.scirra.com/tutorials/809/how-to-export-to-android-with-crosswalk . Although the tutorial is outdated for the current Intel XDK, the instruction is more or less the same. However, the newer C2 versions also create an .xdk file upon Cordova export. In the Intel XDK, you must "Open an Intel XDK project" instead of "Import an existing HTML5 project". See https://software.intel.com/en-us/forums/intel-xdk/topic/607195 for more info.