# Now playing card

> Canonical HTML: https://screenrig.ai/docs/cards/now-playing/

The track on right now: album art, title, artist and album, a progress bar running from the track's start time, and what plays next.

Category: Media. Tags: Restaurants and cafes, Stores, Bars and pubs.

## Previews

![Now playing](/cards/now-playing/v1/screenshots/canvas-bloom.webp?sha=3efbfb627d661f7eab20ff2c42764cad58ccf18aa023888ab83a29463c1ef46a)

Canvas

![Now playing](/cards/now-playing/v1/screenshots/corner-bloom.webp?sha=137765adf8efdbaef93869b411257584278fe27c496fb569b6396ca3d749fba6)

Corner

![Now playing](/cards/now-playing/v1/screenshots/chip-bloom.webp?sha=596e1868db1766a8318c3f99a13513091be075d326b9e42445074563431f5d12)

Chip

## Views and forms

Views: canvas, corner, chip. Canvas forms: landscape, portrait, square, strip.

[Card views, themes and publishing](/docs/cards/). [Browse the gallery](/apps/#cards).

## Data and privacy

Feed: `screenrig.nowplaying/v1`.

Feed documents carry source attribution. The Player supplies the feed to the card.

## Properties

For theme, background, accent and position, see [Common properties](/docs/cards/#common-properties).

Set static properties in `params`. Bind `data` to a project card data key for live values; that document holds only dynamic properties. Without a data key, put the complete configuration in `params`. Nested rows describe the contents of their parent property.

### Static properties

| Name | Type | Default | Values and limits | Description |
| --- | --- | --- | --- | --- |
| `title` | string | `"Now playing"` | maxLength: `40` |  |
| `showNext` | boolean | `true` |  | List the tracks coming up. |
| `showAlbum` | boolean | `true` |  |  |

### Dynamic properties

This card has no dynamic properties.

## Canvas example

Add this item to a playlist page’s `primitives`. [Publish the playlist and assign a screen](/docs/cards/#publish-a-card-canvas).

```json
{
  "id": "now-playing",
  "primitive": "card",
  "card": "now-playing",
  "major": 1,
  "params": {
    "theme": "neomustard"
  },
  "rect": {
    "x": 0,
    "y": 0,
    "width": 1920,
    "height": 1080
  },
  "layer": 0,
  "content_fit": "fill"
}
```