Gracias por tu visita. Esta página solo está disponible en inglés.

Media services

Alexa runs on top of the system, servicing media content from a variety of sources (e.g. Amazon Music, Spotify, etc.). Customers may ask Alexa to play music, audiobooks, podcasts, and more. Alexa responds by seamlessly switching between the sources and surfacing the right media to the customer.

We believe the best in-car Alexa experience is one that integrates and utilizes the existing native media player, rather than a separate experience the customer must navigate to. This section covers guidelines for three key feature sets that must exist within the media player:

  1. Playback controls
  2. Source attribution
  3. Metadata & Images

Playback controls

Media playback controls vary depending on the source and type of content playing. It is up to you to determine the position and order of these controls. The example below shows different variations that could appear across different sources at different times. The TemplateRuntime API provides real-time instructions as to which buttons should be displayed. For questions on the following guidelines, please refer to this template. The JSON provides all playback controls for the MSP.

My alternative image text
Examples of potential media player controls for different sources

(Required) Allow customers to use Alexa for all media controls.

As a rule of thumb, don't display controls that cannot be controlled by voice. This breaks customers mental model of “if you can see it, you can say it”.

(Required) Remove controls that are not available for the current media source and disable media controls that are not currently selectable.

A source should not present a control that it does not use for the current playing media. Example: Like/dislike is a specific control available in Spotify's radio controls, but not within their playlist controls. Because of this, these controls should only appear when the Spotify Radio is playing.

Some services offer controls that can only be tapped a limited amount of times. When a control cannot be used anymore, grey out the control to avoid frustrating the customer.

Example: Pandora users with a free account can only skip a set number of tracks per day. Once they reach that limit, they can no longer press the next track button. In this instance, the next track button must appear disabled.

Source attribution

Customers can ask Alexa to play media from a wide range of sources – Amazon Music, Audible, Pandora, etc. These media sources require attribution so customers to know where the media is coming from.

(Required) Always display attribution to the current media source/provider on media players.

The media source must be attributed on the media player in the center console. Use the designer toolkit, for the attribution icon with the render template. We recommend using a white icon on dark backgrounds and a black icon on light backgrounds.

My alternative image text
My alternative image text

Metadata & images

Metadata should appear on the screen at all times to inform the customer of what they are listening to. We will push three lines of metadata that will come from the JSON payload. The order this data is presented depends on the type of media playing.

(Recommended) Only three lines of metadata should be displayed on the center console.

Refer to the UI Text Guidelines for more details on string requirements.

(Recommended) The first line of text should be larger than the second two.

This is typically a song title, chapter of a book, or podcast name

My alternative image text

Album art, cover art, logos, etc.

(Recommended) Should the native media player support media images, follow the guidelines listed in this section.

(Recommended) If no image is available, the following placeholder images should appear in its place.

My alternative image text

(Recommended) Use the Now Playing image as the media player background.

We recommend blurring the background image and overlaying a dark color or gradient to ensure good color contrast and legibility of the text and icons.

For example:

  • Image with 20px gaussian blur
  • Overlay solid color #272F38 at 75% opacity
My alternative image text