2

Estoy haciendo una aplicación para Audiometría en la que genero un delay aleatorio (entre 1 y 5 segundos) pasados los cuales se reproduce un sonido. Esto funciona correctamente en PC, sin embargo no en móviles.

http://www.audiometria.esy.es

HTML

<div class="text-center">
    <h1>TEST AUDIOMETRICO <span id="onAndroid"></span>- RESULTADO:<span id="resultado"></span></h1>
    <audio id="song" controls preload="auto">
        <source src="1MHz.mp3" type="audio/mpeg">
    </audio>
    <br><br><br>
    <button id="start2" type="button" class="btn btn-success" data-dismiss="modal">Comenzar
        <span class="glyphicon glyphicon-play"></span>
    </button>
    <br><br><br>
    <h1 class="button">
        <span id="btn-listen" class="glyphicon glyphicon-record playbutton"></span>
    </h1>
</div>

BOOTSTRAP MODAL

<!-- /.modal -->
<div id="instructions-modal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title modal-titulo">Examen Audiometrico</h3>
            </div>
            <div class="modal-body">
                <h4 class="modal-title modal-titulo">Instrucciones</h4><br>
                <ul>
                    <li class="modal-pagraph">Para una correcta evaluación se recomienda el uso de auriculares.</li>
                    <li class="modal-pagraph">Procure realizar el examen en un ambiente libre de ruido.</li>
                    <li class="modal-pagraph">Si detecta que el volumen del sonido es demasiado alto, reduzcalo.</li>
                    <li class="modal-pagraph">Sus oidos serán evaluados individualmente, el primero será el izquierdo.</li>
                    <li class="modal-pagraph">Durante el examen, solo debe presionar el botón <span class="glyphicon glyphicon-record"></span> cuando escuche un sonido.</li>
                </ul>
            </div>
            <div class="modal-footer">
                <button id="start" type="button" class="btn btn-success" data-dismiss="modal">Comenzar
                <span class="glyphicon glyphicon-play"></span>
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
<!-- /.modal -->

JS

$(document).ready(function () {
    $('#instructions-modal').modal('show')
});
$('#start').click(function () {
    $("#start2").remove();
    var status = 'off';
    var delay = (Math.floor((Math.random() * 5) + 1)) * 1000;
    var clicks = 0;
    setTimeout(function () {
        //$("#song").play();
        document.getElementById("song").play();
        status = 'wait';
    }, delay);

    setTimeout(function () {
        if (status == 'wait') {
            status = 'failure'
        }

        $('#resultado').text(status);
        console.log(status);
    }, delay + 3000);


    $('#btn-listen').click(function () {

        if (status == 'wait' && clicks == 0) {
            status = 'success'
        } else {
            status = 'failure'
        }
        clicks = clicks + 1;
    })
});
1
  • 2
    Comprueba que se haya cargado del todo el mp3 antes de lanzar el timeout, podría ser que en un móvil tarde mas en cargar el mp3 que el tiempo que espera. Commented el 22 sept. 2016 a las 8:55

1 respuesta 1

1

Por defecto, para dispositivos móviles, el autoplay está deshabilitado (al igual que la carga automática) para evitar que el usuario incurra en uso de datos no esperado. Y para que el sonido comience se requiere una acción del usuario.

Puedes leer más sobre el tema en la web de Apple Developer (traducción mía):

En Safari en iOS (para todos los dispositivos, incluido iPad), en donde el usuario puede estar usando red de datos y pagando por unidad de datos, la precarga y autoplay están deshabilitados. Ningún dato se carga hasta que el usuario lo indique. Eso significa que los métodos play() y load() estarán inactivos hasta que el usuario inicie la reproducción, play() y load() serán llamados por acción del usuario. En otras palabras, un botón de Play pulsado por el usuario funcionará, pero onLoad="play()" no lo hará.

Aunque tienes el play() dentro de un click, no está funcionando, lo cual podría ocurrir por alguno de estos motivos:

  1. El play está siendo ignorado porque, aunque iniciado en una función lanzada por una acción del usuario, se encuentra en un setTimeout y el navegador entonces no lo considera acción iniciada por el usuario.
  2. La canción tarda en cargarse más de 3 segundos, lanzándose el mensaje de error antes de que suene (porque no se empieza a cargar hasta que se pulse en el botón).

En esta otra pregunta de StackOverflow en inglés con un problema similar, apsillers sugiere una posible solución que adaptada a tu pregunta sería hacer lo siguiente:

  1. Ejecuta el play() dentro del código que se llama al hacer click.
  2. Justo después del play() pon el audio en pausa con pause().
  3. Llama a la función dentro del setTimeout de la misma manera que tienes ahora.

Como el play() original se realiza dentro de una acción iniciada por el usuario en lugar de un setTimeout el navegador cargará el audio y a partir de ahí deberías poder trabajar con él de manera normal sin problemas.

Prueba a hacer eso y dime si te funciona.

2
  • 1
    Muchísimas gracias, lo he probado y funciona a la perfección. Commented el 22 sept. 2016 a las 15:21
  • @AlejandroGutierrez si esta respuesta funciona y te sirvió, acéptala como respuesta correcta pulsando en el ✓ que hay en la esquina superior izquierda.
    – Alvaro Montoro
    Commented el 27 sept. 2016 a las 19:31

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.