¿Puede almacenar en caché los archivos de sonido en una aplicación web de iOS utilizando un manifiesto o almacenamiento web?

Cuando agrego mi archivo beep-23.mp3 al manifiesto de caché, el efecto de sonido ya no funciona ni está desconectado. ¿Es esto un error, o estoy haciendo algo mal?¿Puede almacenar en caché los archivos de sonido en una aplicación web de iOS utilizando un manifiesto o almacenamiento web?

El audio está dentro de un archivo HTML como:

function playBEEP() { if (navigator.platform == "iPad" || navigator.platform == "iPhone" || navigator.platform == "iPod") { Beep.play(); } } 
if (navigator.platform == "iPad" || navigator.platform == "iPhone" || navigator.platform == "iPod") { 
    var Beep = document.createElement('audio'); 
    Beep.setAttribute('src', 'beep-23.mp3'); 
}

accede a través de:

$("#mybutton,#anotherbutton").each(function() { 
    $(this).bind("touchstart",function(e){ 
      playBEEP(); 
    }); 
});

<html manifest='index.manifest'> hace la parada de audio de trabajo cuando aparece bip-23.mp3 ...

ACTUALIZACIÓN: ¿Se podría usar Web Storage en lugar del manifiesto de caché para almacenar el audio?

Fuente

2012-02-13 shaun5

¿Comprobó que el contenido del manifiesto realmente se descargó? Tal vez sea solo un error tipográfico ... – andreapier

Sin saber más acerca de QUÉ estás haciendo, es muy difícil decir si es tu código o no. – livingtech

Ejemplo de código agregado. – shaun5

UPDATE para iOS 6:

Todo esto se fija en iOS 6. Puede almacenar en caché un archivo de audio y reproducirlo a través de JavaScript sin intervención del usuario.
shaun5 Nov 7 '12 a 0:58

A pesar de que debería funcionar y no hay especificaciones (W3C, de Apple), que decir que no debería, he probado algunos escenarios y parece que Safari en iOS simplemente se niega a almacenar en caché los archivos de sonido.

Safari está cargando el archivo de audio (pero no el index.html) cada vez que recargo la página, por lo que el almacenamiento en caché aparentemente no funciona correctamente, independientemente del tamaño del archivo.

Después de algunas investigaciones: Parece que no es posible almacenar en caché los archivos de audio. Por lo tanto, puede presentar una falla en Apples bugtracker.

Aquí está mi código para demostrar mis resultados:

index.html:

<!DOCTYPE HTML> 
    <html lang="en-US" manifest="audio.appcache"> 
    <head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"> 
    <meta name="apple-mobile-web-app-capable" content="yes" /> 
    <meta name="apple-mobile-web-app-status-bar-style" content="black" /> 
    <title>Cached audio</title> 
    </head> 
    <body> 
    <h1>Cached audio</h1> 
    <audio controls autobuffer> 
     <source src="sample.mp3" type="audio/mpeg" /> 
    </audio> 
    </body> 
</html>

audio.appcache:

CACHE MANIFEST 
# 2012-02-23:v1 

# explicitly cached 
CACHE: 
index.html 
sample.mp3

.htaccess:

AddType text/cache-manifest .appcache 
AddType audio/mpeg .mp3

EDITAR

también probé usando URIs de datos, pero que Safari sigue rechazando los datos de audio.Así que creo que no es posible almacenar en caché de audio ...

<?php 
    function data_uri($file) { 
    $contents = file_get_contents($file); 
    $base64 = base64_encode($contents); 
    return ('data:audio/mpeg;base64,'.$base64); 
    } 
?> 
... 
<audio controls autobuffer> 
    <source src="<?php echo data_uri('sample.mp3'); ?>" type="audio/mpeg" /> 
</audio> 
...

EDIT 2

Gran idea, pero parece que no está funcionando ... Safari para OS X -> OK; Safari para iOS -> sigue teniendo el mismo problema que antes.

<?php 
    function base_64_string($file) { 
    $contents = file_get_contents($file); 
    return base64_encode($contents); 
    } 
?> 
... 
<audio controls autobuffer> 
    <source id="sound-src" src="sample.mp3" type="audio/mpeg" /> 
</audio> 
... 
<script> 
    (function(){ 
    var sound; 
    if (localStorage.getItem('cachedSound')) { 
     sound = localStorage.getItem('cachedSound'); 
    } 
    else { 
     sound = "<?php echo base_64_string('sample.mp3'); ?>"; 
     localStorage.setItem('cachedSound',sound); 
    } 
    document.getElementById("sound-src").src='data:audio/mpeg;base64,' + sound; 
    })(); 
</script>

Fuente

2012-02-23 09:39:04 dom

Su respuesta me hizo pensar en una posible solución, vea mi pregunta actualizada. – shaun5

@ shaun5 Echa un vistazo a la nueva edición ... – dom

Creo que tienes que esperar a que el usuario reproduzca el archivo antes de que Mobile Safari descargue el archivo, por lo que creo que tendrías que esperar para guardarlo en el almacenamiento local. – shaun5

Si no lo ha hecho usted tiene que asegurarse de que las rutas de URL son absolutos o relativos al .manifest y no la página web real.

También hay un límite para el tamaño del componente real que está intentando almacenar actualmente en la memoria caché a 4MB.

El límite de caché total es de 5 MB.

También estoy bastante seguro de que no puede almacenar en caché los archivos de audio y video.

Fuente

2012-02-23 12:10:16

Los tres archivos (html, mp3, manifiesto) están en el mismo directorio. Los tamaños de archivos totales e individuales están por debajo de los límites. ¿Tiene alguna experiencia o documentación para apoyar su 'seguro bastante'? – shaun5

@ shaun5 He leído mucho en el sitio de Apple Devs y no hay nada que decir que puedas. También intenté hacerlo yo mismo, todo en caché, excepto el video. Aunque no tenía un archivo de audio. Por proceso de eliminación, tendría que asumir que no puedes. –

-3

Apple no es compatible con la reproducción de audio a través de safari, esto es intencional para evitar que las personas que usan dominios en línea almacenen tu música sin pagar por ellas y usando tu iPod/iPhone para reproducirlas. Es una forma de tratar de hacerte pagar por la música. Lo siento chicos.

Fuente

2012-08-30 06:08:41 Finchmeister

Esta respuesta parece contradecir directamente la pregunta y otras respuestas. –

Esto es incorrecto. –

¿Puede almacenar en caché los archivos de sonido en una aplicación web de iOS utilizando un manifiesto o almacenamiento web?

Respuesta

Cuestiones relacionadas