AudioElement.play()'s promise is not properly handled when erroring

[sarayourfriend]

Description

We do not fully handle the promise returned by the AudioElement's play function: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play#return_value

We need to resolve errors in the promise by catching and handling them. We should not assume that the audio will play without issue.

https://sentry.io/share/issue/ba82b7f580074af3901151497c1ef3e2/

Reproduction

1. Go to https://search.openverse.engineering/search/audio?q=birds and open your browser's developer console
2. Quickly play and then pause an audio file before it has time to load. Note the error message in your console.

Resolution

• [ ] 🙋 I would be interested in resolving this bug.

[ramadanomar]

🙋 I would be interested in resolving this bug.

[sarayourfriend]

Thanks @ramadanomar :tada: I've assigned the issue to you.

[zackkrida]

Noting that this also impacts audio files that are invalid, not just the condition identified in reproduction step 2.