[BUG] The play() request was interrupted by a call to pause().

[jscheid]

• [ ] I have verified that the issue occurs with the latest twilio.js release and is not marked as a known issue in the CHANGELOG.md.
• [x] I reviewed the Common Issues and open GitHub issues and verified that this report represents a potentially new issue.
• [x] I verified that the Quickstart application works in my environment.
• [x] I am not sharing any Personally Identifiable Information (PII) or sensitive account information (API keys, credentials, etc.) when reporting this issue.

Code to reproduce the issue:

N/A

Expected behavior:

N/A

Actual behavior:

We're seeing the following error sporadically when a call is being established: The play() request was interrupted by a call to pause(). https://goo.gl/LdLk22.

This error is triggered by a race condition and therefore difficult to reproduce. However, looking at the code in https://github.com/twilio/twilio-client.js/blob/master/lib/twilio/sound.js the client does not always ensure that pause is called only after the promise returned by play has resolved, as described in the link contained in the error message. The following sequence of events can cause it to be called prematurely:

1. _play is called. It assigns a promise to _playPromise without waiting for the promise to resolve.
2. _play is called again before _playPromise resolves. isPlaying returns true because _playPromise is present.
3. This causes the condition at the very start of _play to be true, and therefore _stop to be called, which in turn calls pause on the audio element.

In short, the guard at the beginning of _play causes pause to be called on the audio element if playback has been initiated, but without checking that playback has commenced, which is a race condition in current Chrome versions as described in the linked page.

Software versions:

Last seen on Chrome 96.0.4664 on Windows 10 with twilio-client 1.13.0