Y al fin llega el último artículo de esta serie sobre la interfaz AudioPlayer para crear skills de audio en Alexa. Ya solo nos queda una parte por tratar: ¿cómo se comporta y qué se puede hacer en dispositivos con pantalla?

A día de hoy es muy probable que la mayoría de dispositivos Alexa que usen tu skill sean sin pantalla pero, ¿qué pasa cuando se ejecuta una skill de audio en un dispositivo con pantalla? Amazon tiene varias opciones como el Echo Show 5 (mi favorito), Show 8 y Show 10 (este último es un nuevo modelo que además tiene con movimiento)

La interfaz AudioPlayer nos lo pone fácil y provee una salida visual por defecto. Esa representación básica consta de un fondo plano y el nombre de la skill con su logo. Si además el dispositivo tiene una pantalla táctil, se mostrarán unos controles al usuario. Estos controles son los habituales en interfaces de reproducción de música con tres botones, en este orden: anterior, pausar/reproducir y siguiente. Igual pasará si estás usando un mando remoto con FireTv (versión Lite o versión 4K) o Cube.

AudioPlayer display

Metadatos

Podemos personalizar la salida visual para cada audio en concreto o para toda la skill en general. Para ello, Alexa nos permite indicar una serie de metadatos a la hora de enviar las directivas del AudioPlayer. Los metadatos son:

  • Album art, que viene a ser la típica carátula de álbum cuadrada. La recomendación de tamaño mínimo para esta imagen es de 480x480 píxeles. Se puede indicar un listado de imágenes para que el dispositivo elija la mejor en cada caso.
  • Fondo, una imagen de fondo que ocupará toda la pantalla. La recomendación de tamaño mínimo es de 1024x640 píxeles y que tenga aplicada una capa de 70% de opacidad. Tengo que decir que yo he tenido muchos problemas usando estas imágenes de fondo. Parece que Alexa, por algún motivo, aplica algún tipo de capa en base al color que más destaque en el album art. Lo he probado en varios dispositivos distintos y siempre es igual. Mi consejo aquí sería no usar una imagen con distintos colores en el fondo sino ir a algo más neutro y que no sea relevante. Parece una issue ya reportada al equipo de Alexa pero aún sin resolver.
  • Título, el texto más relevante en pantalla. Si, por ejemplo, estuviéramos hablando de un disco, sería el título de la canción que suena.
  • Subtítulo, el segundo texto que habrá en pantalla, debajo del título. Orientado por ejemplo a mostrar la categoría del audio, nombre del artista, información adicional, etc.

Tenéis toda la info en la documentación oficial de Alexa. Ahí podréis ver el comportamiento del AudioPlayer cuando vienen algunos campos del metadata y otros no. Se pueden hacer varias combinaciones.

¡Importante! Los metadatos que se ven por pantalla están asociados al token que va en la directiva que se envía desde el back. Alexa puede cachear esos metadatos hasta cinco días para un mismo token. Si queremos que la representación visual cambie, ya sea para cada audio o para la skill en general, habrá que enviar tokens distintos.

Un ejemplo de código en Kotlin para la directiva de Play con metadatos sería:

Subtítulos

Un punto importante, que es posible que la gente desconozca, es la posibilidad de poner subtítulos en AudioPlayer. Estos subtítulos están asociados directamente a un audio.

Al igual que los metadatos, tenemos una serie de campos que enviar desde el back en las directivas:

  • Caption type, para indicar el formato de los subtítulos. Por ahora soporta únicamente el tipo WebVTT.
  • Caption content, la declaración de los subtítulos en cada momento del audio. Igual que antes, deben seguir el formato WebVTT.

Yo aún no he usado subtítulos en las skills de audio que he hecho. Os adjunto un ejemplo de la documentación oficial del tipo de respuesta válida en JSON:

AudioPlayer touch controls

Si el usuario está usando la skill en un dispositivo con pantalla táctil, tendrá varios botones en pantalla para controlar el AudioPlayer. Incluye las acciones típicas en este tipo de interfaces para audio: moverse al anterior, pausar/continuar la reproducción actual, moverse al siguiente.

Para cada comando se genera una request con el comando correspondiente:

El contenido de las request es muy simple y no tiene información que necesitemos recoger. En el back, lo único que tendrás que hacer será recoger esos eventos y crear su handler correspondiente o usar los mismos que ya tengas para los comandos de voz similares ("Alexa, para/siguiente/anterior/continúa"). En mi caso los tengo así:

Si te fijas, la forma de detectar este comando en el método canHandle es similar al de LaunchRequest pero no a los intents. En este caso tendrás que buscar por el tipo de request.

A la hora de responder a estos eventos aplican las mismas reglas que para la mayorías de los eventos del playback que ya vimos en otro post:

  • Puedes responder con cualquier directiva de AudioPlayer.
  • NO puedes responder con texto para Alexa o similares.

Nota: Usar el botón de pausa en una pantalla táctil va a parar de forma automática la reproducción sin enviar una request al back de la skill. Sin embargo hay que cubrir este caso para otro tipo de interacción como un control remoto u otro hardware compatible con Alexa.

Y hasta aquí ha llegado esta serie sobre la interfaz AudioPlayer para crear skills de audio en Alexa. Espero que sea útil para la idea que te ronde la cabeza. Igualmente recordar que escribí un post y publiqué un vídeo con una guía para crear una skill de audio fácilmente con una plantilla de código que hice.