Tetris V2 - Issue of Play Sound Effect on Mobile Devices

Posted on: June 28, 2023

I have encountered an issue: the sound effect works on desktop but does not play on mobile devices.

How does the sound work

In this Tetris app, there is a background music, and two sound effects. One sound effect should be played when clearing full lines, and the other one is a game over sound. The background music is played automatically when the game starts and can be turned on and off.

Both the background music and the sound effects are downloaded mp3 files wrapped with Audio(). It is a HTMLAudioElement API providing access to all properties and methods of the HTML <audio> element.

The background music starts playing when the start game button is clicked, so it works perfectly fine on both desktop and mobile devices. However the sound effect only works as expected on desktop but does not play on mobiles.

Possible reasons

Since the background music and the sound effects are constructed the same way, the sound effects should also work if the background music works on mobiles. Therefore I have tried different settings to inspect the cause of this issue:

  1. Removed background music
  2. Made sure the isSoundOn boolean is true all time
  3. Removed all conditions of playing sound effects
  4. Created a button to play sound on click
  5. Checked <audio> element is compatible with the browsers I am using, Safari and Google Chrome

Then I found out the presence of background music does not make a difference, nor do the conditions. The sound effects start playing when the playSound button is clicked. Thus I could conclude that the possible cause of this issue is the mobile browsers require user interaction, such as tapping or clicking, to trigger the audio to play. And swipe actions on mobile devices do not count as interactions with elements, so swiping cannot trigger the sound to play.