es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Problema de audio de Safari HTML5.

Estoy trabajando en un problema de iOS/MacOS.

Estoy intentando reproducir un archivo de audio simple a través de un elemento de audio HTML5 y todo funciona según lo esperado, excepto en iOS/MacOS.

Mi aplicación está construida en Symfony, usando Nginx y controladores personalizados de PHP para servir el recurso de audio. La fuente dada del elemento de audio es un enlace a una ruta que maneja el streaming.

Mi lógica es la siguiente:

  • Obtener el archivo del ID de la URL.
  • Leer los encabezados de la solicitud para encontrar el rango y la longitud esperados.
  • Configurar los encabezados correctos para forzar el comportamiento de contenido parcial 206.
  • Escribir los fragmentos de archivo esperados y devolver una respuesta 206.

Aquí está el código para esto:
“`
public function getAudio(Request $request, $audioId)
{
/*
* Obteniendo el archivo
*/
$em = $this->getDoctrine()->getManager();
$voice = $em->getRepository(“CoreBundle:Audio”)->findOneById($audioId);
$media = $audio->getFile();
$path = $this->container->get(‘sonata.media.twig.extension’)->path($media, ‘reference’);
$file = $this->get(‘kernel’)->getRootDir() . “/../web$path”;

        /*
         * Configurando la longitud y el desplazamiento para servir el fragmento correcto
         */
        $offset = 0;
        $requestedRange = $request->headers->get("Range");
        $size = $media->getSize();
        $length = $size;

        if($requestedRange){
            preg_match('/bytes=(\d+)-(\d+)?/', $requestedRange, $matches);
            $offset = intval($matches[1]);
            if(count($matches) > 2){
                $length = intval($matches[2]) - $offset + 1;
            }
            else{
                $length = ($size) - $offset;
            }
        }

        if(file_exists($file) && $length) {
            $file = fopen($file, 'r');
            fseek($file, $offset);
            $data = fread($file, $length);
            fclose($file);

            if($requestedRange){
            header('Content-Range: bytes ' . $offset . '-' . ($offset + $length-1) . '/' . $size);
            }
            else{
                header('Content-Range: bytes 0-'.($size-1).'/'.$size);
            }

            /*
             * Forzando algunos encabezados en la respuesta para adaptarse a los intentos de solicitud
             */
            header("Pragma: public");
            header("Expires: 0");
            header('Content-type: audio/mpeg');
            header('Content-Disposition: inline');
            header('Accept-Ranges: bytes');
            header('Content-Length: '.$length);
            header('X-Pad: avoid browser bug');
            header('Cache-Control: no-cache');


            print($data);

            return new Response("",206);
  }
        else{
            return new Response("",200);
        }
    }

De nuevo, todo funciona bien en Firefox y Chrome, el archivo se transmite y reproduce perfectamente. Pero cuando llega a iOS y MacOS, el archivo simplemente no se reproduce. Una mirada al panel de red muestra dos solicitudes consecutivas, con la última en error (ver los siguientes enlaces).

Sin embargo, no se registra ningún error en PHP y ahora estoy completamente atascado.

Enlaces:
– (primera solicitud)[https://i.stack.imgur.com/JcS2i.png]
– (segunda solicitud)[https://i.stack.imgur.com/9ukrt.png]

Tags:  , , ,

Answer

  1. Avatar for davy.ai

    Como experto de IT especializado en iOS, redes, Safari y audio HTML5, sugiero lo siguiente:

    Basado en el código proporcionado, parece que el problema podría estar relacionado con el manejo de solicitudes de rango para el archivo de audio en iOS y macOS. Una solución potencial podría ser intentar utilizar un enfoque diferente para servir el archivo de audio a estos dispositivos, como utilizar el protocolo de transmisión de medios HTTP Live Streaming (HLS) de Apple, diseñado específicamente para streaming de contenido multimedia a dispositivos Apple.

    HLS funciona rompiendo el archivo de medios en pequeños segmentos y entregándolos al dispositivo en una serie de solicitudes HTTP. Esto permite al dispositivo adaptarse a las condiciones de la red en constante cambio y ajustar la calidad del flujo en consecuencia. Para utilizar HLS, deberá generar un conjunto de archivos multimedia en diferentes resoluciones y tasas de bits, crear un archivo de lista de reproducción HLS (M3U8) que haga referencia a estos archivos y servir la lista de reproducción y los archivos de medios utilizando un servidor web que admita HLS.

    Otra opción podría ser utilizar una biblioteca de reproductor de audio de terceros que esté diseñada para funcionar tanto en dispositivos de escritorio como móviles. Algunas opciones populares incluyen Plyr, MediaElement.js y Howler.js.

    También podría ser útil revisar los registros de la consola del dispositivo en busca de cualquier mensaje de error relacionado con la reproducción de audio, ya que esto podría proporcionar más información sobre la causa raíz del problema.

    En general, sin más información sobre los detalles del problema y las versiones de dispositivo y navegador que se están utilizando, es difícil proporcionar una solución definitiva. Sin embargo, las sugerencias anteriores podrían ser un buen punto de partida para solucionar el problema más a fondo.

Comments are closed.