Audio Pull Quotes
aka Audiograms
Presto-based pull quotes can can also be transformed with audio and an accompanying text track that updates the quote text in sync with the audio. The audiogram is an update of the now deprecated audio pullquote. At times, hearing a person's voice is more powerful than reading their words, and this tool (along with its text tracks) enables that in an visually compelling and accessible way.
Options
| value | purpose | required | default |
|---|---|---|---|
position |
Supports all standard positions | No | |
layout |
Supports all standard layouts | No | |
audioQuote |
Must be set to false |
Yes | |
audiogram |
Must be set to true |
Yes | |
audioSrc |
Absolute CDN URL to the associated audio file | Yes | |
vttSrc |
Absolute CDN URL to the associated text track file | Yes | |
autoplay |
If true, the audiogram will automatically start when it scrolls into view |
No | |
backgroundColor |
Will set the color behind the quote text to any valid CSS color | No | Article backgroundColor |
backgroundImage |
Optional CDN link to a photo behind the audio visualization. Will be cropped to cover a 16x9 space. | No | |
posterQuote |
The quote initially displayed before the audiogram starts playing. | No | Text of presto pullquote being swapped. |
posterAttribution |
Optionally define the quote attribution initially displayed. | No | Attribution of the presto pullquote being swapped. |
Example configuration
Minimal
{assets.489574398}
audiogram: true
audioQuote: false
audioSrc: https://www.gannett-cdn.com/path/to/audio-file.mp3
vttSrc: https://www.gannett-cdn.com/path/to/track-file.vtt
{}
Loaded with options
{assets.489574398}
audiogram: true
audioQuote: false
audioSrc: https://www.gannett-cdn.com/path/to/audio-file.mp3
vttSrc: https://www.gannett-cdn.com/path/to/track-file.vtt
posterQuote: This is the quote we want to display at first.
posterAttribution: Person said this
backgroundImage: https://www.gannett-cdn.com/path/to/image.jpg
backgroundColor: #009bff
autoplay: true
{}
Visually-enhanced audio pullquotes
To add an image or video to an audio pullquote, see Visually-enhanced display.
How do I make subtitles/captions?
The audiogram uses a web-standard file format called the Web Video Text Track (VTT). A VTT file is made up of cues, each with a start and end times and a voice tag with optional attribution. They can be edited in any text editor. You can use this website — https://quuz.org/webvtt/ — to validate your VTT files. When you are done, you can upload the file to the CDN using the In-Depth uploader
VTT example
WEBVTT
00:01.000 --> 00:04.000
<v Abbott>Who's on first?
00:05.000 --> 00:09.000
<v Costello>That's what I want to find out.
00:09.000 --> 00:12.000
<v>[Audience laughter]
What about Google AMP and Apple News
Audiograms will not appear on distributed platforms. It is recommended to target a pullquote with the audiogram configuration so that the spirit of the content remains in the story.
Live Demos
There are lots of options. See them in the demos.
Published examples
- In Lubbock, young people are dying due to gun violence. Here's how one advocate is reaching out
- Black lives matter: We must live up to Declaration of Independence’s promise
- How one advocate became the conscience of Wilmington by bridging communities
Analytics
| Event | Label | Category | Action |
|---|---|---|---|
| Scrolls into view | in view |
scroll tracking |
audiogram |
| Play | played |
content |
audiogram |
| Pause | paused |
content |
audiogram |
| Restart | restarted |
content |
audiogram |