Add "pause on detach" property support to the Audio component

[vaadin-bot]

Originally by mpilone

---

After researching a customer bug I found that browsers implement the removal/detach of the audio tag differently when audio playback has not yet started but the tag is set to autoplay. There appears to be some ambiguity in the specification as to what should happen with audio playback when the audio tag is removed from the DOM while still loading audio. For example, there is a Firefox bug thread about the issue here https://bugzilla.mozilla.org/show_bug.cgi?id=594748

While Vaadin can't completely hide the behavior of the different browsers, it would be useful to have a property on the Audio component such as "pauseOnDetach" that would instruct the client side connector to pause the Audio component when it is removed from the DOM which would prevent playback even if the audio was still loading at the time of detach.

I attempted to implement this server side first, but that didn't work because when the detach event is processed on the server side no changes to the component take affect because the client side connector has already been removed. I was then forced to extend the client side Audio component to add a listener and implement my own pause. I'll attach my code but it would be nice to have this as a standard feature of the component.

This issue can occur when the audio tag is, for example, in a Vaadin Window and the user closes the Window without pausing audio playback and the audio is still loading from the server. Depending on the browser's interpretation of the HTML5 specification, the audio may start to playback with no way for the user to stop it. In my specific case I have to do audio transcoding if I don't have a cached version of the audio format which causes a 5 to 10 second delay for the user. If the user closes the Vaadin Window with the Audio component in it, the audio may still play back once the transcoding is done.

---

Imported from https://dev.vaadin.com/ issue #14650

[vaadin-bot]

Originally by mpilone

---

Attachment added: audio_play_after_remove.html (1.6 KiB) A static HTML test file that can be used to reproduce the issue. Refer to the comments in the file as the audio file needs to be hosted on a server with an artificial response delay.

[vaadin-bot]

Originally by mpilone

---

Attachment added: MikeTest_002_SGMT02_87178476.opus (328.4 KiB)

[vaadin-bot]

Originally by mpilone

---

Attachment added: PauseOnDetachAudioConnector.java (2.0 KiB)

[vaadin-bot]

Originally by @denis-anisimov

---

https://dev.vaadin.com/review/#/c/5190/

[stale[bot]]

Hello there!

It looks like this issue hasn't progressed lately. There are so many issues that we just can't deal them all within a reasonable timeframe.

There are a couple of things you could help to get things rolling on this issue (this is an automated message, so expect that some of these are already in use):

• Check if the issue is still valid for the latest version. There are dozens of duplicates in our issue tracker, so it is possible that the issue is already tackled. If it appears to be fixed, close the issue, otherwise report to the issue that it is still valid.
• Provide more details how to reproduce the issue.
• Explain why it is important to get this issue fixed and politely draw others attention to it e.g. via the forum or social media.
• Add a reduced test case about the issue, so it is easier for somebody to start working on a solution.
• Try fixing the issue yourself and create a pull request that contains the test case and/or a fix for it. Handling the pull requests is the top priority for the core team.
• If the issue is clearly a bug, use the Warranty in your Vaadin subscription to raise its priority.

Thanks again for your contributions! Even though we haven't been able to get this issue fixed, we hope you to report your findings and enhancement ideas in the future too!