Tengo una consola de control en una sola página. Cada botón (de muchos botones) en la consola de control activará un nuevo panel de información que se desliza desde la derecha y:

  • inicia una secuencia de escritura (cada carácter aparece en la pantalla acompañado de un pitido muy corto; cada uno es un nuevo objeto Audio);
  • reproduce un nuevo objeto Audio, después de varios segundos, sobre el pitido en curso
  • reproduce un segundo objeto Audio nuevo, inmediatamente después, sobre la parte superior del pitido (poco después de este punto suele ser donde concluyen los pitidos)
  • comienza a reproducir un nuevo objeto Video después de que los pitidos hayan concluido o poco antes de que concluyan

Con los navegadores de portátiles (Firefox 58 y Chrome 64) puedo recorrer cualquier número de paneles deslizables y los audiovisuales siguen apareciendo.

Nota: Cada nuevo panel que se desliza pausa todos los objetos Audio y Video del panel anterior.

Con los navegadores móviles en mi teléfono Android (Firefox y Chrome), los efectos de sonido comenzarán a retrasarse en el panel 2 o 3 y, por lo general, si abro un panel quinto o sexto, todo el audio y el video se rinden.

En este punto, JavaScript ya no creará un nuevo objeto Audio ni reproducirá el elemento HTML5 <video>. Actualizar la página en el navegador tampoco le dará una nueva vida. De hecho, la única opción es cerrar el navegador móvil y luego volver a abrirlo.

No puedo estar seguro, pero supongo que tal vez el navegador está sobrecargado con objetos y responde negándose a permitir más objetos.

Para probar esta teoría, en lugar de:

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

Lo intenté:

// 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);

Pero ocurre el mismo retraso y eventual semicierre.

¿Que está sucediendo aquí? Definitivamente es específico para dispositivos móviles, porque los navegadores de mi computadora portátil se adaptan bien al script.

0
Rounin 19 feb. 2018 a las 16:25

2 respuestas

La mejor respuesta

Resulta que, con un poco de pensamiento lateral, había un enfoque alternativo para producir la secuencia de escritura audiovisual que no requiere la creación de un nuevo objeto Audio por letra y, en consecuencia, no crea una gran cantidad de objetos que luego conducen a retrasos en el audio y retrasos visuales

La clave es tener un único efecto de sonido de 5 segundos (es decir, más largo que cualquier secuencia de escritura individual) que emita una larga serie continua de pitidos repetitivos.

El guión entonces:

  • activa el archivo de sonido de 5 segundos con .play() al mismo tiempo que las letras comienzan a aparecer
  • detiene el archivo de sonido de 5 segundos con this.pause(); this.currentTime = 0; después de que ha aparecido la última letra

Debido a que los pitidos se repiten exactamente (o casi) en el mismo intervalo en el que aparecen las letras en la pantalla, el usuario tiene una impresión convincente de que los pitidos están asociados con las letras (como en realidad cuando el efecto de sonido se compone de una serie completa de objetos de audio de 0,3 segundos).

Mientras que, de hecho, el archivo de sonido de 5 segundos que se está reproduciendo es independiente del guión que hace que cada letra aparezca en secuencia.

0
Rounin 19 feb. 2018 a las 21:54

Probar esto

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

Eso podría ayudar al navegador a saber que debe eliminar sus objetos de audio Beep cuando hayan terminado.

Si esa prueba falla, intente poner el 'bip' en el dom, con document.body.appendChild(audio);

1
TKoL 19 feb. 2018 a las 13:43