Skip to main content

Reproducir Audio con la funcion delay Javascript en móviles

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