audio.duration devuelve Infinity en Safari cuando se sirve mp3 desde PHP

Question

Por lo tanto, tengo un script php que envía mi archivo mp3 a la etiqueta de audio de html5. El problema es que en Safari, la etiqueta audio.duration no funciona y devuelve infinito. Si configuro el src del audio directamente en el archivo todo funciona bien. Pero no quiero que mis usuarios vean la ruta al archivo.

De todos modos, así es como estoy enviando mis encabezados desde el PHP.

Ya he intentado tener los rangos de contenido. Eso no ayudó.

if (file_exists($filename)) { 
    $fp = fopen($filename, 'r'); 
    $etag = md5(serialize(fstat($fp))); 
    fclose($fp); 
    header("Content-Transfer-Encoding: binary"); 
    header("Content-Type: audio/mpeg"); 
    header('Content-Length: ' . (string)(filesize($filename))); 
    header('Content-Disposition: inline; filename="' . $filename . '"'); 
    header('X-Pad: avoid browser bug'); 
    header('Cache-Control: no-cache'); 
    header('Etag: ' . $etag); 

    //GetContentRange($filelength); 

    readfile($filename); 
    exit; 
} 
else { 
    header($_SERVER['SERVER_PROTOCOL'].' 404 Not Found', true, 404); 
    echo "no file"; 
} 

Answer 1

Estaba teniendo el mismo problema y agregué un par de encabezados. Parece que funciona para mí -

header("Pragma: public"); 
header("Expires: 0"); 
header("Content-Type: audio/mpeg"); 
header('Content-Length: ' . $fsize); 
header('Content-Disposition: inline; filename="' . $track2play . '"'); 
header('Content-Range: bytes 0-'.$shortlen.'/'.$fsize); 
header('Accept-Ranges: bytes'); 
header('X-Pad: avoid browser bug'); 
header('Cache-Control: no-cache'); 
header('Etag: ' . $etag); 

$ fsize es el tamaño de archivo y $ = $ shortlen tamaño del archivo-1 ... probado en Safari 5.1.4 y el nuevo iPad ...

Answer 2

El servidor debe permitir a las solicitudes de intervalo. Esto es fácil de verificar por para ver si la respuesta de su servidor incluye Aceptar rangos en su encabezado . La mayoría de los navegadores HTML5 permiten buscar nuevas posiciones de archivos durante una descarga, por lo que el servidor debe permitir que el nuevo rango sea solicitado.

No se aceptan las solicitudes de rango de byte causará problemas en algunos navegadores de HTML5 . A menudo, la duración no se puede leer desde el archivo como , algunos formatos requieren que el inicio y el final del archivo se lean a para conocer su duración. Chrome suele ser el navegador que tiene la mayoría de los problemas si la solicitud de rango no está habilitada en el servidor, pero todos los navegadores tendrán problemas incluso si solo es necesario esperar para cargar todos los medios antes de saltar cerca. hasta el final.

Consulte this post para obtener un ejemplo de PHP sobre cómo servir medios con las solicitudes de rango habilitadas.

Además, me di cuenta de que está utilizando No-Cache ..

Uso de la respuesta del servidor a desactivar la caché local de los medios de comunicación puede causar problemas con algunos navegadores HTML5. Esto puede causar que la duración del medio sea desconocida.

Answer 3

• Hoy i perdí la mayor parte de mi tiempo investigando este problema y finalmente salió con una solución. La razón detrás de por qué Safari devuelve duración infinita es bastante interesante: parece que Safari solicita el servidor dos veces para reproducir archivos. Primero envía una solicitud de rango al servidor con un encabezado de rango como este: (bytes: 0-1).
• Si el servidor no devuelve la respuesta como un contenido parcial y si se vuelve toda la corriente entonces el navegador Safari no establecerá etiqueta audio.duration y que dan lugar a la reproducción del archivo sólo una vez y se puede' t se jugará de nuevo.

• hice un arreglo rápido a ella, en el lado del servidor sólo echa la cabecera y si contiene un rangeHeader después lo devuelve.

  String rangeHeader = request.getHeader("Range"); if(rangeHeader != null) { //just return it }