WordPress/gutenberg

Audio Block: Autoplay does not happen on first load

Open

#22056 opened on May 3, 2020

View on GitHub
 (6 comments) (0 reactions) (0 assignees)JavaScript (9,607 stars) (3,893 forks)batch import
Good First Issue[Block] Audio[Status] In Progress[Type] Bug

Description

Description

When the audio block is set to automatically play; it is not automatically playing on the first load. After clicking around to other pages or refreshing a few times, the audio starts to play.

To reproduce

  1. Create a page with an Audio Block, and set the audio to automatically play. Also set the Preload settings to Auto.
  2. Load the site fresh and the audio does not autoplay.
  3. Reload the site a couple of times, and the audio starts to autoplay.
  4. Clear the cache and load the site again and the audio does not autoplay.
  5. Repeat step 2 and it starts again.

Expected behavior Audio should automatically play on the site.

Editor version

  • WordPress version: current
  • Default

Desktop (please complete the following information):

  • Tested in Mac OS, using updated version of Chrome

Smartphone (please complete the following information):

  • Also appeared on iphone

Contributor guide

Tech stack
javascriptreact
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
basic React knowledgeunderstanding of browser autoplay policies
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
60
Research direction
Investigate why autoplay fails on first load but works after refresh. Check browser autoplay policies (e.g., Chrome's autoplay policy requiring user gesture). Look at the audio block component in the Gutenberg repository, specifically the `audio` block implementation. Consider whether the `play()` method is called without user interaction. Review existing comments for clues.