Ambient audio
Ambient audio expands the storytelling experience by playing selected audio clips as specified elements scroll into view. Triggers can be attached to chapter headers, images, pullquotes and embeds.
In-Depth Config: The configuration for all targets follows the same basic pattern.
{configTarget.ambientAudio}
title: Short title
loop: false
[.source]
* https://www.gannett-cdn.com/path/to/audiofile.mp3
* https://www.gannett-cdn.com/path/to/audiofile.webm
[]
{}
- For images, pullquotes and embeds: {assets.PRESTOID.ambientAudio}
- For chapter headers: {chapters.1.ambientAudio}
- For toppers: {storyTopper.ambientAudio} Note: Only select custom toppers will work with ambient audio.
Required properties
- [.source] Complete urls to .mp3 and/or .webm audio files. Prefix with an asterisk as demonstrated above.
Optional properties
- title: Upon playing, a tooltip will pop up next to the global mute button with this as its content.
- loop: If set to true, the audio file will loop until the triggering element is scrolled back and past the bottom of the viewport or another sound is triggered. Defaults to false.
Usage Guide: audio narration during segments of a story, background audio to introduce a story's section purpose
Demo link:
Distributed Platform: does not appear on distributed
Omniture tracking options: Generic click event on global playback [muteButton], pause/play on the persistent audio playback button [globalMuteButton] in the UI
Reader notification
When ambient audio is configured in a story, a notification call to action is added to the top of the story, alerting the reader to the audio and encouraging opt-in to the experience. Though configurable, the notification cannot be disabled. By default, the notification CTA appears at the top of the story, but it can be shifted down, if you would like the reader to get involved in the story before having to choose audio or not.
Configuring the notification
The notification uses a new {audio} block in the configuration panel with the following options:
ambientText: The string of text will default to "This audio enhanced story is best with headphones."ambientButtonEnableText: The text displayed when the user has not yet enabled audio, defaulting to "Turn audio on."ambientButtonDisableText: After audio is enabled, the user can click again to turn audio off. This is the button text displayed, defaulting to "Turn audio off."ambientOffset: By default, the notification appears first thing in the story. This can be nudged down, one element at a time, until it reaches the end of the story. Some experimentation might be needed as the notification is placed in the story along with other inserted elements like logos, notes and ads. This value cannot be less than zero or greater than the story's length.ambientCenterNotification: Center the notification.ambientHideIcon: If true then the icon will not display.
Example configuration
{audio}
ambientText: This story has cool noise.
ambientButtonEnableText: Have a listen
ambientButtonDisableText: Turn it off
ambientOffset: 3
ambientHideIcon: true
{}