No funcionan los audios en IPAD's
Estimados, necesito de su ayuda.
Estoy realizando un sistema en donde utilizo los tags audios de html5. La página puede llegar a desplegar 5 audios distintos y la idea es que apenas termine uno comience el siguiente. Al finalizar el último se activa un botón que permite al usuario volver a escuchar los 5 audios nuevamente (esto las veces que quiera).
En computador de escritorio o notebook no hay problema, pero cuando quiero ejecutarlo en IPAD's o moviles si tengo serios dramas.
En IPAD's sé que la opción de autoplay no sirve, así que obligo al usuario a presionar el botón para que los audios se puedan reproducir, pero solo reproduce el primer audio, y los demás no.
Por alguna razón los llamados que hago al evento "ended" no funcionan correctamente, quisiera saber si alguno me puede ayudar o si les ha pasado lo mismo.
Les dejo parte del código utlilizado. Utilizo JADE con Jquery y NODE.js.
-- JADE
#divsonido
img#boton_sonido.sonido(src='images/audio-encendido.png', alt='')
audio#tagaudio0.clase_audio(preload, src='ruta del primer sonido')
audio#tagaudio1.clase_audio(preload, src='ruta del sonido}')
audio#tagaudio2.clase_audio(preload, src='ruta del sonido}')
audio#tagaudio3.clase_audio(preload, src='ruta del sonido}')
audio#tagaudio4.clase_audio(preload, src='ruta del sonido}')
--JQUERY
function procesaraudioalternativas2(alternativas, i,audio_) {
if (cabecera_con_sonido == true && opciones_con_sonido == true) {
var reproducir = document.getElementById("tagaudio"+i);
document.getElementById("tagaudio"+i).play();
document.getElementById("tagaudio"+i).onended = function() {
if (++i < total_audios2.length) { //valido que tenga más audios que escuchar
var audio_ = total_audios2[i];
procesaraudioalternativas2(datos, i, audio_);
} else { //en caso que pueda repetir todos los audios, habilito el botón para volver a llamar la función
if (cabeceras[0].repetir_repro == true) {
$('#boton_sonido').remove(); // remuevo el botón y lo vuelvo a crear para que no se sobrepongan los eventos click sobre el botón.
$('#divsonido').append(boton_sonido);
$('#boton_sonido').attr('src', 'images/audio-off.png');
$('#boton_sonido').css('cursor', 'pointer')
$('#boton_sonido').attr('disabled', false).css('cursor', 'pointer');
$('#boton_sonido').click(function () {
console.log('click');
$('#boton_sonido').attr('src', 'images/audio-encendido.png');
procesaraudioalternativas2(datos, 0, audio);
});
}
else {
$('#boton_sonido').attr('src', 'img/audio-apagado.png');
}
}
}
} else {
// borré esto porque hace otra cosa... lo importante es lo de arriba.
}
}
procesaraudioalternativas2(datos, 0, audio); // llamado a la función creada anteriormente
-- Fin programación.
La función se vuelve a llamar así misma hasta que no tiene más sonidos que reproducir, y al acabar se activa el botón para comenzar desde cero al presionarlo.
Espero me puedan ayudar porque ya me está volviendo loco que no funcione en IPAD's.
saludos