You are viewing the Spanish (Mexico) site, but your language preference is set to English. Switch to English site →

Menu

Sonidos y audio en Flex

Hay muchas razones por las que te recomendamos reproducir un sonido en Flex UI (la interfaz de usuario de Flex). Por ejemplo:

  • Reproducir un sonido para indicar una tarea de llamada entrante
  • Notificaciones sonoras de nuevos mensajes de chat
  • Sonido para indicar que los participantes entraron o salieron de una conferencia

La API AudioPlayerManager de Flex proporciona un mecanismo para implementar sonidos como estos en la interfaz de usuario de Flex.

API AudioPlayerManager

La API AudioPlayerManager de Flex permite reproducir, detener y silenciar sonidos.

Los sonidos se dividen en dos categorías:

  • Recursos multimedia repetitivos que se reproducen en un bucle, como un teléfono que suena sin parar. La única forma de detener los recursos multimedia repetitivos es llamar manualmente al método stop.
  • Recursos multimedia no repetitivos que se reproducen una vez, como un pitido. Los recursos multimedia no repetitivos se detienen de forma automática después de reproducirse una vez.

El recurso multimedia que se reproducirá se define de la siguiente manera:

export interface MediaData {
    url: string;
    repeatable: boolean;
}

Para reproducir recursos multimedia, debes especificar la dirección URL donde se encuentra el archivo multimedia y declarar si el sonido es repetitivo o no:

const mediaId = Flex.AudioPlayerManager.play(
{
    url: "sound-url",
    repeatable: true
},
(error: AudioPlayerError) => {
    // handle error
}
);

Controlar errores

Si se produce un error durante la reproducción del recurso multimedia, se mostrará una notificación con el error. Estos son algunos posibles errores:

Error Mensaje Motivo
NotAllowed Cannot play sound, because permissions for playback of media were not given or denied. To find out more about how to fix this error, go to Flex Docs (No se puede reproducir el sonido porque no se otorgaron o se negaron los permisos de reproducción multimedia. Para obtener más información sobre como corregir este error, dirígete a la documentación de Flex). El usuario no ha interactuado con el sitio y el navegador no permite la reproducción de sonido.
InvalidMedia Cannot play sound. Provided media is invalid. (No se puede reproducir el sonido. El archivo multimedia proporcionado no es válido).

El recurso multimedia proporcionado no es válido; puede tratarse de un tipo de archivo incorrecto, una ruta URL incorrecta o un archivo dañado.

Other Error playing media. (Error de reproducción multimedia)

Otras excepciones. Podría depender de los detalles de implementación del navegador, la implementación del reproductor multimedia, etc.

Detener la reproducción multimedia

Para detener la reproducción multimedia, utiliza el ID del recurso multimedia devuelto por el método play (descrito anteriormente):

Flex.AudioPlayerManager.stop(mediaId);

Silenciar recursos multimedia

Para silenciar o activar el sonido, utiliza el siguiente método:

Flex.AudioPlayerManager.toggleSound(true/false);

Silenciar o activar el sonido no detiene la reproducción multimedia en curso. Los recursos se seguirán reproduciendo, pero con el volumen en cero.

Recursos multimedia repetitivos y no repetitivos

Los recursos multimedia repetitivos y no repetitivos se pueden reproducir al mismo tiempo, pero solo puede haber un recurso repetitivo y otro no repetitivo reproduciéndose a la vez. En general, esto significa que solo se pueden reproducir dos recursos multimedia a la vez: uno repetitivo y otro no repetitivo.

Si los recursos multimedia son repetitivos, las llamadas a Flex.AudioPlayerManager.play pondrán en cola los recursos y los reproducirán uno tras otro. Puedes detener un recurso multimedia repetitivo que no se esté reproduciendo (pero que esté en cola) para eliminarlo de la cola. La detención de un recurso multimedia repetitivo que se está reproduciendo detendrá el sonido y reproducirá el siguiente recurso multimedia de la cola (si la cola no está vacía).

Si el recurso multimedia no es repetitivo, solo se reproducirá si no se está reproduciendo ningún otro recurso multimedia no repetitivo. Los recurso multimedia no repetitivos no se ponen en cola. Puedes detener un recurso multimedia no repetitivo que se esté reproduciendo para detener el sonido.

Por ejemplo, para reproducir un sonido cuando se recibe un mensaje de chat, puedes hacer esto:

Flex.Manager.getInstance().chatClient.on("messageAdded", () => {
    const mediaId = Flex.AudioPlayerManager.play({
        url: "sound-url",
        repeatable: true
    });
})

Solución de problemas

Los navegadores, especialmente Chrome, tienen políticas estrictas que impiden la reproducción de sonido o la reproducción automática de recursos multimedia de las pestañas en segundo plano o las pestañas que no han recibido ninguna entrada del usuario (fuente: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes). Estas son algunas situaciones típicas:

  • Se actualizó una pestaña y nunca recibió entradas del usuario.
  • Una pestaña con Flex en una ventana independiente que se reabrió automáticamente y nunca recibió entradas del usuario.
  • Una pestaña que se abrió hace un tiempo y que no ha sido enfocada desde hace un tiempo.
  • Una pestaña entre otras pestañas que reproducen sonidos.

Para reproducir archivos multimedia, el agente debe interactuar primero con Flex UI (la interfaz de usuario de Flex). Los sonidos que se activaron, pero cuya reproducción se prohibió, comenzarán a reproducirse tan pronto como el agente interactúe con el sitio.

  • Los recursos multimedia repetitivos se reproducirán empezando por el primer recurso activado. Una vez que el primero deje de reproducirse, se reproducirá el siguiente recurso en cola.
  • Los recursos multimedia no repetitivos se reproducirán empezando por el primer recurso activado que no se haya detenido.

Ejemplos de situaciones de uso de recursos multimedia repetitivos

Screenshot 2019-08-14 at 19.04.57.png
Screenshot 2019-08-14 at 19.04.40.png

Ejemplos de situaciones de uso de recursos multimedia no repetitivos

Screenshot 2019-08-14 at 19.05.33.png

Existen algunas soluciones alternativas:

Chrome

  • Cambiar la política de reproducción automática: el agente puede actualizar el indicador de la política de reproducción automática de Chrome a uno que no requiera la interacción del usuario con un documento para reproducir sonidos. Se puede acceder a él a través del URI `chrome://flags/` > `Autoplay policy` (Política de reproducción automática). Cámbialo a `No user gesture is required` (No se requiere ningún gesto del usuario). Advertencia: Este indicador se aplicará a todos los sitios web.
  • Permitir el nombre de host: agrega el nombre de host a `chrome://settings/content/sound` para permitir que reproduzca sonido. Nota: Para ello no se necesitan políticas empresariales.
  • Cambiar las políticas empresariales: agrega el nombre de host a la lista de nombres de host permitidos. Nota: Para ello se necesitan políticas empresariales.

Firefox

Permitir nombre de host: agrega el nombre de host a la lista de ajustes de audio about:preferences#privacy y permite que siempre reproduzca sonido.

Safari

Permitir reproducción automática de sonido por nombre de host: en la app Safari, selecciona Safari > Ajustes para este sitio web y, en "Auto-Play" (Reproducción automática), selecciona "Allow All Auto-Play" (Permitir toda reproducción automática).

Calificar esta página:

¿Necesitas ayuda?

Todos la necesitamos a veces; la programación es difícil. Obtén ayuda ahora de nuestro equipo de soporte, o recurre a la sabiduría de la multitud visitando Stack Overflow Collective de Twilio o navegando por la etiqueta de Twilio en Stack Overflow.

Gracias por tus comentarios.

Selecciona los motivos de tus comentarios. La información adicional que nos brindas nos ayuda a mejorar nuestra documentación:

Enviando tus comentarios…
🎉 Gracias por tus comentarios.
Se produjo un error. Inténtalo de nuevo.

Gracias por tus comentarios.

thanks-feedback-gif