Playing a second sound Stops All others HTML5 (Mobile Only)

Anything libgdx related goes here!

Playing a second sound Stops All others HTML5 (Mobile Only)

Postby BobIsHere » Sat Sep 14, 2019 2:37 pm

*UPDATE* Thanks to SimonIT on discord for pointing me to this open PR https://github.com/libgdx/libgdx/pull/5659 which might help me. I will have to test out this backend later and provide an update.*

So I've come across an issue with an HTML5 project that only happens when it's being used in a Mobile Browser.
It seems that you can not have more then one sound or piece of music playing at the same time. When another is played any previous sound/music object will stop.
For Example:
If you have a Music object containing background music. You trigger it to play(), at some point later you have a Sound object that you want to play, for example a jump sound effect. When you play() that sound. This causes the music to stop. And it's not just a Sound object stopping Music. A second Music object being set to play() will stop another Music object, Sound will stop another Sound. Etc.
Keep in mind this is ONLY an issue I've noticed on Mobile browser's. This work's like normal as a desktop app and as an HTML5 app while viewing on any desktop Browser.

I threw together a simple boilerplate test project that anyone can use to see for themselves. I put it up on itch.io set as a draft. So you can get to it via this link below.
https://bobishere.itch.io/html5-mobile-browser-musicsound-test?secret=7jGJrBaroOCber0JzA5lQU894U

Please excuse the crude look, its just 4 buttons, each triggers either a music or sound play() function, with a short or long sound clip for testing purposes. You can see how the sounds will cut each other off when triggered when used on mobile.

This is the code used for this project is here:
Code: Select all
package com.mygdx.game;

import com.badlogic.gdx.ApplicationAdapter;
import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.InputProcessor;
import com.badlogic.gdx.audio.Music;
import com.badlogic.gdx.audio.Sound;
import com.badlogic.gdx.graphics.GL20;
import com.badlogic.gdx.graphics.Texture;
import com.badlogic.gdx.graphics.g2d.Sprite;
import com.badlogic.gdx.graphics.g2d.SpriteBatch;
import com.badlogic.gdx.math.Vector2;

public class MusicSoundTest extends ApplicationAdapter implements InputProcessor  {
   SpriteBatch batch;
   Texture texture1,texture2,texture3,texture4;
   Sprite playMusicLongClipButton;
   Sprite playSoundShortClipButton;
   
   Sprite playMusicShortClipButton;
   Sprite playSoundLongClipButton;
   
   Music longMusicClip;
   Sound shortSoundClip;
   
   Music shortMusicClip;
   Sound longSoundClip;
   
   
   @Override
   public void create () {
      batch = new SpriteBatch();      
      
      texture1 = new Texture(Gdx.files.internal("textures/playmusicLC.png"));
      texture2 = new Texture(Gdx.files.internal("textures/playsoundSC.png"));
      texture3 = new Texture(Gdx.files.internal("textures/playmusicSC.png"));
      texture4 = new Texture(Gdx.files.internal("textures/playsoundLC.png"));
      
      longMusicClip = Gdx.audio.newMusic(Gdx.files.internal("sounds/westlife-pop.mp3"));
      shortSoundClip = Gdx.audio.newSound(Gdx.files.internal("sounds/platform-jump.mp3"));
      
      shortMusicClip = Gdx.audio.newMusic(Gdx.files.internal("sounds/platform-jump.mp3"));
      longSoundClip = Gdx.audio.newSound(Gdx.files.internal("sounds/westlife-pop.mp3"));
      
      playMusicLongClipButton = new Sprite(texture1);
      playSoundShortClipButton = new Sprite(texture2);      
      
      playMusicShortClipButton = new Sprite(texture3);
      playSoundLongClipButton = new Sprite(texture4);
      
      playMusicLongClipButton.setPosition(0, 250);
      playSoundShortClipButton.setPosition(0, 50);

      playMusicShortClipButton.setPosition(250, 250);
      playSoundLongClipButton.setPosition(250, 50);
      
      Gdx.input.setInputProcessor(this);
   }

   @Override
   public void render () {
      Gdx.gl.glClearColor(1, 0, 0, 1);
      Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);      
      
      batch.begin();
      playMusicLongClipButton.draw(batch);
      playSoundShortClipButton.draw(batch);
      
      playMusicShortClipButton.draw(batch);
      playSoundLongClipButton.draw(batch);
      batch.end();
      
      
      
   }   
   
   @Override
   public void dispose () {
      batch.dispose();
      img.dispose();
      
      texture1.dispose();
      texture2.dispose();
      texture3.dispose();
      texture4.dispose();
      
      
      longMusicClip.dispose();
      shortSoundClip.dispose();
      
      shortMusicClip.dispose();
      longSoundClip.dispose();
   }

   @Override
   public boolean keyDown(int keycode) {
      // TODO Auto-generated method stub
      return false;
   }

   @Override
   public boolean keyUp(int keycode) {
      // TODO Auto-generated method stub
      return false;
   }

   @Override
   public boolean keyTyped(char character) {
      // TODO Auto-generated method stub
      return false;
   }

    @Override
    public boolean touchDown(int screenX, int screenY, int pointer, int button) {
          int xPos =screenX;
          int yPos =Gdx.graphics.getHeight() - screenY;
            
      
          if(playMusicLongClipButton.getBoundingRectangle().contains(new Vector2(xPos,yPos)))
          {
             System.out.println("Play long Music hit");
             longMusicClip.play();
          }
          
          
          if(playSoundShortClipButton.getBoundingRectangle().contains(new Vector2(xPos,yPos)))
          {
             System.out.println("Pla short Sound hit");
             shortSoundClip.play();
          }
          
         if(playMusicShortClipButton.getBoundingRectangle().contains(new Vector2(xPos,yPos)))
          {
             System.out.println("Play short Music hit");
             shortMusicClip.play();
          }
          
          
          if(playSoundLongClipButton.getBoundingRectangle().contains(new Vector2(xPos,yPos)))
          {
             System.out.println("Play long Sound hit");
             longSoundClip.play();
          }
           return false;
   }

   @Override
   public boolean touchUp(int screenX, int screenY, int pointer, int button) {
      // TODO Auto-generated method stub
      return false;
   }

   @Override
   public boolean touchDragged(int screenX, int screenY, int pointer) {
      // TODO Auto-generated method stub
      return false;
   }

   @Override
   public boolean mouseMoved(int screenX, int screenY) {
      // TODO Auto-generated method stub
      return false;
   }

   @Override
   public boolean scrolled(int amount) {
      // TODO Auto-generated method stub
      return false;
   }
}

You can test this on your phone or even on your desktop using chromes developer's tools to switch to a mobile device to get the same outcome.

I'm still fairly new to deploying HTML5 projects. Is this a known issue for Mobile?Is there some kind of work around? Or am I just doing something wrong?
Also just to note in another project I loaded my sounds using the assetmanager and still got the same issue. Nothing changed.

Even though I know this seems like a niche nitpicking issue. I do believe having the ability for it working on mobile the way it works on the desktop would be a great benefit.
BobIsHere
 
Posts: 3
Joined: Mon Aug 26, 2019 8:45 pm

Re: Playing a second sound Stops All others HTML5 (Mobile On

Postby BobIsHere » Sun Sep 15, 2019 3:57 pm

Hey guys,
I just wanted to state that my issue was completely solved by using the back end mentioned in the PR here https://github.com/libgdx/libgdx/pull/5659.
So for anyone who might be struggling with sound issues in your HTML5 projects I highly recommend checking it out and seeing if it fixes your problem.

Cheers!
BobIsHere
 
Posts: 3
Joined: Mon Aug 26, 2019 8:45 pm


Return to Libgdx

Who is online

Users browsing this forum: Google [Bot] and 1 guest

cron