Skip to content

No pause event emitted when iOS automatically pauses audio #1750

Open
@BrainCrumbz

Description

The Problem

On iOS (iPhone or iPad) the following behaviour happens:

  • when both a video HTML element and an audio HTML element are playing on a page,
  • and the video HTML element has not the muted attribute,
  • when the video source ends,
  • and the video source is programmatically forced to play again

then the system will automatically pause the audio.

Apart from this system behaviour being kind of unexpected and/or unwanted, the actual issue with Howler.js is the following:

  • when a vanilla HTMLAudioElement is used to play audio, the pause event is correctly emitted by the element
  • when an HTML5 Howler.js player is used to play audio, no pause event is emitted by the Howler.js player

When a Web Audio API Howler.js player is used to play audio, the issue is not reproducible, as the system will not pause the audio.

Reproducible Example

https://stackblitz.com/edit/howlerjs-ios-pause-not-emitted?file=README.md

Reproduction Steps

  1. Prepare a web page with a <video>element and its video source, and programmatically add an Howler.js HTML5 player with its audio source. Make sure the audio is longer than the video
  2. Programmatically, when video ends force it to start playing again. Seeking time to 0 is optional.
  3. Start playing both the video and audio, e.g. from a button

When video ends and is forced to play again, the audio is automatically paused by the system.

Attached is the downloaded Stackblitz project.

howlerjs-ios-pause-not-emitted.zip

Possible Solution

No response

Context

During some tests we were able to inspect the paused state of inner HTMLAudioElement created by Howler.js, having set an interval timer. When the system pauses audio, the paused state actually becomes true.
We have not tried adding an event listener on the inner HTMLAudioElement, but from other distinct tests performed without Howler.js we could confirm that a plain HTML audio element on its own emits the event.
So apparently there's something within HTML5 Howler player that prevents the event from being emitted.

Howler.js Version

v2.2.4

Affected Browser(s)/Version(s)

Safari on iOS

Side note

The template for composing this issue had a typo in the last section. It spelled "Versiuon(s)".

Activity

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

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions