Audio Player

Purpose

To highlight an audio snippet, or multiple audio snippets, with supporting content inside a card for each audio snippet. 

Design

Component Library

Wireframe - the audio player has a heading that starts "Listen In..."

Screenshots

Use Cases

Use this block to embed an audio snippet with supporting content (heading, optional photo).

Use this block to embed multiple audio snippets, each in their own card.

Can be used on a Page or in a Post.

42/58 layout (use most often)

This layout can be used anytime you need an image next to copy. 

To use this layout, choose 58% for Image column width field, under Configuration.

50/50 layout (default; use often)

This layout can be used anytime you need an image next to copy. You can use this layout when the image is not as important or does not have small details that are important to see.

This is the default layout of the block.

33/66 layout (use sparingly)

Only use this layout when you have a very small amount of copy (< 250 characters total).

To use this layout, choose 66% for Image column width field, under Configuration.

Card-level Fields

Audio (required for each card)

Upload or use an audio file from the media library. Only MP3, WAV, and OGG files are supported.

Title

The card title. 

Heading Size

You can select H2 - H4 heading sizes.

Subtitle

The card subtitle. 

Image

Use large, high-quality images that are 2400 x 1600. Using a shorter image may break the layout by causing the card to extend below the image (see callout above).

Micro title

The card micro title. 

Content

The supporting copy. This should not be more than 1 sentence. Make sure the amount of copy in the card looks good. If not, cut some of it or ask a writer to cut some of it.

Transcript (required)

The audio transcript. Required for accessibility. Causes a "Show transcript" link to appear at base of the card.

Link (use sparingly)

The URL. Use sparingly as it will distract users from the primary action for this block, which is to play the audio snippet.

CTA Styles

You can pick text link or different CTA styles for the link.

Block-level Fields

Image Column Width

Default is 50%. Can also choose 58% or 66% for image width.

Enable Swiper

If you have multiple cards in one block, you can choose between using a swiper or stacking the cards on the page.

Potential future updates for this block

1. Consider adding keyboard arrow controls for swiper slides, as long as it doesn't interfere with arrow actions for the audio controls (e.g. scrubbing and volume control).
2. When the swiper slide is changed, set focus on first focusable element in the now active slide (Erica tried to do this when creating the block, but it created other problems with the swiper code)
3. Crosscheck onKeyDown keycodes with vertical tabbed block code, since we used a different, newer way of checking which key was pressed.