rezoner / playground

Playground.js is a framework for your javascript based games. It gives you out-of-box access to essentials like mouse, keyboard, sound and well designed architecture that you can expand to your needs.
MIT License
459 stars 50 forks source link

Howler Plugin on Android 5.1 #52

Open karneaud opened 7 years ago

karneaud commented 7 years ago

I created a Howler Plugin

PLAYGROUND.Howl = function(app) {
  app.loadAudio = function(audio, opts) {
    this.loader.add();
    let url = this.getPath("sounds").concat(audio,".", this.preferedAudioFormat || '.mp3' )
    this.audio = new Howl({
      src: [ url ],
      format: [ this.preferedAudioFormat || "mp3" ],
      autoplay: false,
      loop: false,
      preload: true
    })

    this.audio.once('load', () => {
      window.console.re.log('loaded')
      this.loader.success.call(this.loader)
    } )
    this.audio.load()
  }
}

PLAYGROUND.Howl.plugin = true

but when I try to run the plugin using

new PLAYGROUND.Application({
  smoothing: true,
  loaded: false,
  preferedAudioFormat: "mp3",
  create() {
    /* things to preload */
    this.loadImage("rejects","orientation")
    this.loadAudio("UR-FullExtreme-Voice") // Audio file
    this.loadData("cuepoints")
  },

then on a State....

create: function() {
    ....

    this.soundId = this.app.audio.play()
  ...

it works on the following IE10 Mobile, iOS7, macOS Safari & Opera

But does not play( well it says its playing but I hear no volume) on Android 5.1 browser

I thought maybe I needed to do a click event so I on the state

create: function(){
....
 var a = document.body;
    a.addEventListener('touchstart', () => {
    //  window.alert('ok')
      window.console.re.log('clicked');
      try {
        this.soundId = this.app.audio.play()
      } catch (e) {
        console.re.log(e)
      } finally {
        console.re.log(this.app.audio.playing(this.soundId));
      }
    })

Which I tried triggering the click event both programmatically and manually

But no go. Can you give me some advice here on how to workaround this Android 5.1 bug....?

rezoner commented 7 years ago

Is Howler working without playgroundjs on android 5.1?

karneaud commented 7 years ago

@rezoner yes it is.

rezoner commented 7 years ago

this.preferedAudioFormat || '.mp3'

it resolves to

"ogg" || ".mp3"

Maybe prefered audio on android is OGG and in that case you are missing the dot.

Or the other way around - prefered audio is MP3 and you have two dots.

rezoner commented 7 years ago

Ok on a second thought - that's a bad point - because I think preferedAudio is always set so it never gets to || ".mp3" part

karneaud commented 7 years ago

@rezoner No. everything functions as expected on other devices. The problem specifically exists for Android 5.1 device

I tested with ogg, webm and mp3

Does the framework prevent further bubbling on click events?

rezoner commented 7 years ago

Maybe forcing it to use one of audio formats will solve the thing?

app.loadAudio = function(audio, opts) {
   this.preferedAudioFormat = "mp3"
...
karneaud commented 7 years ago

@rezoner Yeah. tried that as well as mp3 was the default until I started running into this problem. As stated the code works on all other devices that I have. The audio works outside of the playgroundjs code. I think on Android 5.1 there needs to be a user interaction in order to initiate the play. However even with it being programmatically done it does not play( even though play events are triggered)..

rezoner commented 7 years ago

If you think that's the case you can check it out rather quickly:

app = playground({
  touchstart() {
    loadAudio("something");
    this.loader.once("ready", () => {
       this.playSound("something");
   });
  } 

by playSound I of course mean the method you are using to play sound with howler

karneaud commented 7 years ago

@rezoner should I explicitly use touchstart() or would the "pointer" do? As I was trying to initiate it with pointerdown but didn't seem to work. Will try the options out. Thanks.

rezoner commented 7 years ago

pointerdown is perfectly fine