Skip to content

New template: Hover/tap for sound #294

Description

@alykat

See: https://www.npr.org/2018/04/02/598287888/photos-why-they-marched-in-their-own-words

This should support:

  • Photo
  • Audiofile (MP3)
  • Photo credit
  • Caption (optional)
  • Caption placement (left, right, bottom) (optional)
  • Pullquote (optional)
  • Pullquote placement (left, right, bottom) (optional)

Important note: Chrome now suppresses autoplay video and audio if the user hasn't interacted with a page. This seems to affect our "hover for sound" embedded projects, like pigeon races. The error I see in console:

Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.

Passing the autoplay parameter to the iframe -- as mentioned here: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes#iframe -- doesn't universally fix this. (Supporting the param also will require an update to the npr pym loader and to pym.)

In the short term, I think "click-to-play" is the best way to go. Longer-term, there's probably some kind of detection to see if autoplay is supported and, if not, display a click message instead.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions