1683437 - Rapidly changing video playbackRate causes audio popping

Status: RESOLVED INCOMPLETE

(Core :: Audio/Video: Playback, defect)

Description

[John Bartos]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36

Steps to reproduce:

Change the playback rate somewhat frequently. Here's some code you can paste into the console which reproduces the issue:

const video = document.createElement('video');
document.body.appendChild(video);

video.controls = true;
video.src = 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4';

let interval;
video.addEventListener('play', () => {
interval = setInterval(() => {
console.log('setting rate to 1.5');
video.playbackRate = 1.5;
setTimeout(() => {
console.log('setting rate to 1');
video.playbackRate = 1;
});
}, 500);
});

video.addEventListener('pause', () => {
clearInterval(interval);
});

The above example is a bit contrived, but is a reasonable representation of a use case of our application (the Twitch video player). For example, if a viewer changes the playbackRate directly on the video element, our player application will issue a change back to the default value.

We have observed this bug for a few versions of Firefox and do not know the first version in which this is reproduced, so I selected the latest.

Actual results:

Each time the rate changes, an an audible pop/click is heard

Expected results:

Changing the playback rate does not cause audio glitching

Comment 1

[Pablo]

Hi john

Im trying to reproduce this using Firefox release 84.0.1 using a macbook with macOs 10.14
but after i put those lines on browser console i just get a "cannot play media. No decoders for requested formats: video/mp4

should i have something else setup for those lines to work?

thanks.
Pablo

Comment 2

[BugBot [:suhaib / :marco/ :calixte]]

Bugbug thinks this bug should belong to this component, but please revert this change in case of error.

Comment 3

[chrisguttandin]

Hello everyone, I ran into the same problem today. From what I can tell the problem only occurs when switching the playbackRate back to 1. Changing the playbackRate rapidly between 1.2 and 1.1 doesn't cause a problem. Doing the same with 1.1 and 1 causes audible pops. Maybe there is a switch somewhere which disables the algorithm when the playbackRate is exactly 1 and that causes those pop sounds. But that's just a wild guess.

John's code above worked for me. I adapted it a bit to make the problem more obvious. I navigated to about:blank and then entered the following in the console.

const video = document.createElement('video');
document.body.appendChild(video);

video.controls = true;
video.src = 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4';

let animationFrame;

video.addEventListener('play', () => {
    const changeTempo = () => {
        if (video.playbackRate === 1) {
            video.playbackRate = 1.5;
        } else {
            video.playbackRate = 1;
        }

        animationFrame = requestAnimationFrame(changeTempo);
    };

    animationFrame = requestAnimationFrame(changeTempo);
});

video.addEventListener('pause', () => {
    cancelAnimationFrame(animationFrame);
});

I then clicked play on the video.

The following doesn't produce any pops.

const video = document.createElement('video');
document.body.appendChild(video);

video.controls = true;
video.src = 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4';

let animationFrame;

video.addEventListener('play', () => {
    const changeTempo = () => {
        if (video.playbackRate === 1.1) {
            video.playbackRate = 1.2;
        } else {
            video.playbackRate = 1.1;
        }

        animationFrame = requestAnimationFrame(changeTempo);
    };

    animationFrame = requestAnimationFrame(changeTempo);
});

video.addEventListener('pause', () => {
    cancelAnimationFrame(animationFrame);
});

Comment 4

[BugBot [:suhaib / :marco/ :calixte]]

A needinfo is requested from the reporter, however, the reporter is inactive on Bugzilla. Given that the bug is still UNCONFIRMED, closing the bug as incomplete.

For more information, please visit BugBot documentation.