CODEWITHSUNDEEP
javascripthtmlhtml5-videohtml5-audio
Rounin
Rounin

Reputation: 29493

How to help mobile browsers handle multiple HTML5 audio and video objects on a single page?

I have a control console on a single page. Each button (of many buttons) on the control console will activate a new information panel which slides in from the right and:

With laptop browsers (Firefox 58 and Chrome 64) I can cycle through any number of slide-in panels and the audio-visuals keep coming.

N.B. Each new panel sliding in pauses all the Audio and Video objects from the previous panel.

With mobile browsers on my Android Phone (Firefox and Chrome) the sound effects will start lagging on panel 2 or 3 and usually if I open a 5th or a 6th panel, all the audio and video gives up.

At this point javascript will no longer create a new Audio object nor play the HTML5 <video> element. Refreshing the page in the browser won't give it a new lease of life either. In fact the only option is to close the mobile browser and then re-open it.

I cannot be certain, but I am guessing that perhaps the browser is overloaded with objects and is responding by refusing to allow any more objects?

To test this theory, instead of:

var beep = new Audio('/beep.mp3');
beep.play;

I tried:

// GLOBAL SCOPE

var beeps = [];

// FUNCTION SCOPE

beeps[beeps.length] = new Audio('/.assets/media/audio/fixournhs/beep.mp3');
beeps[(beeps.length - 1)].play();

setTimeout(function(){

    if (beeps.length > 1) {
        beeps[0] = undefined;
        beeps.shift();
    }
}, 600);

But the same lag and eventual semi-shutdown occurs.

What is happening here? It's definitely mobile specific, because the browsers on my laptop are coping fine with the script.

Upvotes: 0

Views: 90

Answers (2)

Rounin
Rounin

Reputation: 29493

It turns out - with a bit of lateral thinking - there was an alternative approach to producing the audio-visual typing sequence which does not require creating one new Audio object per letter and, consequently, does not create a large number of objects which then lead to lagging audio and lagging visuals.

The key is to have a single 5 second sound effect (ie. longer than any individual typing sequence) which emits a long continuous series of repetitive beeps.

The script then:

  • activates the 5 second sound file with .play() at the same time as the letters start appearing
  • stops the 5 second sound file with this.pause(); this.currentTime = 0; after the last letter has appeared

Because the beeps repeat at exactly (or almost) the same interval as the letters are appearing on the screen, the user is given a compelling impression that the beeps are associated with the letters (as they actually were when the sound effect comprised of a whole series of 0.3 second Audio objects).

Whereas in fact, the 5 second sound file being played is independent from the script which is making each letter appear in sequence.

Upvotes: 0

TKoL
TKoL

Reputation: 13912

try this

var beep = new Audio('/beep.mp3');
beep.play;
beep.onended = function(){
    beep.remove() //Remove when played.
  };

That might help the browser know to delete your Beep audio objects when they're done.

If that test fails, try actually putting the 'beep' into the dom, with document.body.appendChild(audio);

Upvotes: 1

Related Questions